# ✍️Mão na Massa

**Bloco 1: Fundamentos e Primeiros Passos (Exercícios 1-4)**

1. Explorando o Console: Abra qualquer site (como <https://www.google.com/search?q=google.com>), pressione `F12` para abrir as Ferramentas de Desenvolvedor, vá até a aba "Console" e digite `console.log("Eu estou explorando a web!");`. Pressione Enter e veja o resultado.
2. A Santíssima Trindade da Web: Com suas próprias palavras, explique a diferença entre HTML, CSS e JavaScript.
3. Primeira Página Interativa: Copie o código HTML com a função `mostrarMensagem()` do exemplo da página 7.1. Salve-o como `index.html` e abra no navegador. Clique no botão e veja o alerta.
4. O que é o DOM? Usando a analogia da casa de LEGO, explique o que é o DOM (Document Object Model) e por que ele é essencial para que o JavaScript possa interagir com uma página.

**Bloco 2: Selecionando Elementos no DOM (Exercícios 5-9)**

5. Seleção por ID: Crie uma página com um título `<h1>` que tenha o `id="titulo-principal"`. Em uma tag `<script>`, use `document.getElementById("titulo-principal")` para selecionar o elemento e exibi-lo no console com `console.log()`.
6. Seleção por Classe: Crie uma lista não ordenada (`<ul>`) com três itens (`<li>`), todos com `class="item-lista"`. Use `document.getElementsByClassName("item-lista")` para selecionar todos os itens e veja no console o que é retornado (uma `HTMLCollection`).
7. Seleção por Tag: Na página do exercício anterior, use `document.getElementsByTagName("li")` para selecionar todos os itens da lista. Compare o resultado no console com o do exercício 6.
8. O Poder do `querySelector`: Crie uma página com um `div` que tenha a classe `.caixa` e dentro dele um parágrafo `<p>` com o `id="texto-interno"`.
   * Use `document.querySelector(".caixa")` para selecionar a `div`.
   * Use `document.querySelector("#texto-interno")` para selecionar o parágrafo.
   * Exiba ambos no console.
9. Seleção Múltipla com `querySelectorAll`: Na lista do exercício 6, use `document.querySelectorAll(".item-lista")` para selecionar todos os itens. Observe que ele retorna um `NodeList`, que é um pouco diferente e mais fácil de percorrer.

**Bloco 3: Manipulando o DOM (Alterando Conteúdo e Estilos) (Exercícios 10-16)**

10. Mudando Texto com `textContent`: Selecione o `<h1>` do exercício 5 e, usando JavaScript, altere seu texto para "Página de Exercícios de DOM".
11. Alterando Estilos com `.style`: Crie um parágrafo com o `id="paragrafo-colorido"`. Use JavaScript para:
    * Mudar a cor do texto para `blue`.
    * Aumentar o tamanho da fonte para `22px`.
    * Adicionar uma cor de fundo (`backgroundColor`) de `lightgray`.
12. `innerHTML` vs `textContent`: Crie uma `div` vazia. Use JavaScript para adicionar o seguinte conteúdo nela usando `innerHTML`: `<strong>Texto em negrito</strong>`. Depois, crie outra `div` e adicione o mesmo texto, mas usando `textContent`. Observe a diferença no navegador.
13. Trabalhando com Classes (`classList`): Crie um botão e um parágrafo. Defina uma classe CSS chamada `.destaque` que mude a cor de fundo. Faça com que o botão, ao ser clicado, adicione ou remova (`toggle`) a classe `.destaque` do parágrafo.
14. Lendo Valores de Inputs: Crie um campo de texto (`<input type="text" id="campo-nome">`) e um botão. Crie uma função que, ao clicar no botão, exiba no console o valor (`.value`) que foi digitado no campo de texto.
15. Criando e Adicionando Elementos: Crie um botão "Adicionar Imagem". Quando o botão for clicado, crie um novo elemento `<img>` via `document.createElement("img")`, defina seu atributo `src` para uma URL de imagem qualquer e adicione-o ao final do `<body>` da página usando `document.body.appendChild()`.
16. Removendo Elementos: Crie uma lista com 5 itens. Adicione um botão que, ao ser clicado, remove (`.remove()`) o último item da lista.

**Bloco 4: Navegando pela Árvore DOM (Exercícios 17-20)**

17. Acessando o Pai (`parentNode`): Crie uma `div` com um parágrafo dentro. Selecione o parágrafo e, a partir dele, acesse e adicione uma borda vermelha ao `div` pai usando `.parentNode.style.border`.
18. Acessando os Filhos (`children`): Crie uma `div` com três parágrafos dentro. Selecione a `div` e use a propriedade `.children` para acessar o segundo parágrafo e mudar seu texto.
19. Navegando entre Irmãos: Crie três botões, um ao lado do outro. Selecione o segundo botão. Use `previousElementSibling` para mudar o texto do primeiro botão e `nextElementSibling` para mudar o texto do terceiro.
20. Diferença entre `children` e `childNodes`: Crie uma `div` e inspecione `minhaDiv.childNodes` no console. Observe que ele inclui nós de texto (espaços em branco, quebras de linha). Agora, inspecione `minhaDiv.children` e veja que ele retorna apenas os elementos HTML. Anote a diferença.

**Bloco 5: Eventos (Básico e Avançado) (Exercícios 21-27)**

21. Ouvindo Eventos de Teclado: Crie um campo de texto. Use `addEventListener` para ouvir o evento `keydown`. Toda vez que uma tecla for pressionada dentro do campo, exiba a propriedade `event.key` no console.
22. Impedindo Comportamentos Padrão: Crie um link `<a>` com `href="https://google.com"`. Adicione um `addEventListener` de clique que usa `event.preventDefault()` para impedir que o navegador vá para o Google e, em vez disso, exiba um alerta dizendo "Navegação bloqueada!".
23. Entendendo o `event.target`: Crie uma `div` com 5 botões dentro. Adicione um único `addEventListener` de clique na `div`. Dentro da função, use `event.target` para descobrir exatamente qual dos 5 botões foi clicado e exiba seu texto no console.
24. Demonstração de Event Bubbling: Crie uma `div` (pai) com um `button` (filho) dentro. Adicione um `addEventListener` de clique em ambos. Cada um deve exibir uma mensagem diferente no console (ex: "Clique no PAI" e "Clique no FILHO"). Clique no botão e observe que as duas mensagens aparecem. Isso é o bubbling em ação.
25. Parando a Propagação: Modifique o exercício anterior. Use `event.stopPropagation()` no `addEventListener` do botão (filho) para impedir que o clique "borbulhe" para o pai. Agora, ao clicar no botão, apenas a mensagem do filho deve aparecer.
26. Delegação de Eventos (Event Delegation): Crie uma lista `<ul>` e use um único `addEventListener` nela. A função deve verificar se o `event.target` é um `<li>` e, se for, mudar a cor do texto do item clicado para vermelho. Isso é muito mais eficiente do que adicionar um listener para cada `li`.
27. Removendo um Event Listener: Crie um botão que, na primeira vez que for clicado, exiba um alerta "Olá!". Na segunda vez, nada deve acontecer. Dica: você precisará nomear sua função de evento para poder removê-la com `removeEventListener` após a primeira execução.

**Bloco 6: Mini-Projetos de Integração (Exercícios 28-30)**

28. Mini-Projeto: Lista de Tarefas (To-Do List):
    * Crie um campo de texto (`<input>`) e um botão "Adicionar".
    * Ao clicar no botão, pegue o texto do input, crie um novo item de lista (`<li>`), e adicione-o a uma `<ul>` na página.
    * Use a delegação de eventos para que, ao clicar em um `<li>`, ele seja marcado como concluído (ex: riscando o texto com `text-decoration: line-through`).
    * (Bônus) Adicione um pequeno botão "X" em cada `<li>` que, ao ser clicado, remove a tarefa da lista.
29. Mini-Projeto: Contador Simples:
    * Crie um `<h2>` que começa com o número 0.
    * Crie dois botões: "+" e "-".
    * Faça o botão "+" incrementar o número no `<h2>` e o botão "-" decrementá-lo.
30. Mini-Projeto: Buscando Dados com `fetch`:
    * Use a API de teste `https://jsonplaceholder.typicode.com/users/1`.
    * Crie um botão "Buscar Usuário".
    * Ao clicar, use a função `fetch()` para buscar os dados dessa URL.
    * Quando os dados chegarem (`.then()`), exiba o nome (`name`) e o email (`email`) do usuário em parágrafos na sua página.
