https://github.com/vitorhonna/nlw-heat-origin
Rocketseat Next Level Week: Heat - Trilha Origin
https://github.com/vitorhonna/nlw-heat-origin
css html javascript nlw-7 nlw-heat rocketseat
Last synced: 4 months ago
JSON representation
Rocketseat Next Level Week: Heat - Trilha Origin
- Host: GitHub
- URL: https://github.com/vitorhonna/nlw-heat-origin
- Owner: vitorhonna
- Created: 2021-10-19T22:50:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-27T02:26:56.000Z (over 3 years ago)
- Last Synced: 2025-01-14T18:04:13.064Z (5 months ago)
- Topics: css, html, javascript, nlw-7, nlw-heat, rocketseat
- Language: HTML
- Homepage: https://nextlevelweek.com/episodios/origin/abertura/edicao/7
- Size: 738 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Level Week #7: Heat
Evento da Rocketseat de 18 a 24 de outubro de 2021.
## Trilha Origin
[Layout do Projeto](https://www.figma.com/community/file/1031698737363668691)
[Material Complementar](https://efficient-sloth-d85.notion.site/Origin-00a89e06c0b7412bb6daf435243df92d)
[Videos](https://nextlevelweek.com/episodios/origin/aula-1/edicao/7)
- ✅ 17/out/21 - Abertura
- ✅ 18/out/21 - Stage 1
- ✅ 19/out/21 - Stage 2
- ✅ 20/out/21 - Stage 3
- ✅ 21/out/21 - Stage 4
- ✅ 22/out/21 - Stage 5
- ✅ 24/out/21 - Encerramento
## Ferramentas
[Lorempixel](https://www.lorempixel.com/185/185/abstract)
```
https://www.lorempixel.com/185/185/abstract
```
[Clippy CSS](https://bennettfeely.com/clippy/)
## Anotações
### Javascript
- **Alterar o valor de uma tag usando um ID:**
```html
Nome do Usuário
```
```js
document.getElementById("userName").textContent = "Novo Nome";
// ou
userName.textContent = "Novo Nome";
```
Essas funções tambem retornam o valor atribuído:
```js
let novoNome = (userName.textContent = "Novo Nome");
console.log(novoNome); // Novo Nome
```
Essa mudança também pode ser feita usando `.innerHTML`, a diferença é:
> - `.textContent` altera apenas o conteúdo textual. Se receber "\Nome\", vai mostrar "\Nome\". É mais rápido.
> - `.innerHTML` espera receber um conteúdo em HTML que será interpretado, portanto é mais lento. Se receber "\Nome\", vai mostrar "Nome". É mais rápido.
- **Acessando valores de tags e filhos:**
Usar o `id` com o "método" `.children`, pode-se então acessar os filhos passando um index como se fosse uma array.
```html
```
```js
function changeSocialMediaLinks() {
for (let li of socialMediaLinks.children) {
let classeDaTag = li.getAttribute("class");
li.children[0].href = `https://www.link.com`;
}
}
```
- **Consumindo a API do github:**
Passar a url para `fetch(url)` que armazenará a resposta da API. `.then` recebe esses dados e, usando uma função anônima de flecha (*arrow function*), transforma em JSON usando `.json()`. Finalmente, pode-se acessar os dados com notação de ponto (ex: `data.name`).
```js
function getGithubProfileInfo() {
const url = `https://api.github.com/users/${linksSocialMedia.github}`;
fetch(url)
.then((response) => response.json())
.then((data) => {
githubUserName.textContent = data.name;
githubUserBio.textContent = data.bio;
githubUserLink.href = data.html_url;
githubUserAvatar.src = data.avatar_url;
githubUserUsername.textContent = linksSocialMedia.github;
});
}
```