Next Level Week #7: Heat

Evento da Rocketseat de 18 a 24 de outubro de 2021.

Trilha Origin

Layout do Projeto

Material Complementar

Videos

• ✅ 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

Clippy CSS

Anotações

Javascript

• Alterar o valor de uma tag usando um ID:

<h1 id="userName">Nome do Usuário</h1>

document.getElementById("userName").textContent = "Novo Nome";

// ou

userName.textContent = "Novo Nome";

Essas funções tambem retornam o valor atribuído:

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 "<b>Nome</b>", vai mostrar "<b>Nome</b>". É mais rápido.
• .innerHTML espera receber um conteúdo em HTML que será interpretado, portanto é mais lento. Se receber "<b>Nome</b>", 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.

<ul id="socialMediaLinks">
  <li class="youtube">
    <a href="https://www.youtube.com/"> Youtube </a>
  </li>
  <li class="instagram">
    <a href="https://www.instagram.com/"> Instagram </a>
  </li>
</ul>

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).

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;
    });
}