Exercícios 10 - Estilos e Classes no DOM 🎨

🟢 Básicos (Fixação)

1. CamelCase: Como você mudaria a cor da borda de um elemento para "vermelho" usando .style?
2. Toggle: O que o método classList.toggle('ativo') faz?

🟡 Intermediários (Aplicação)

1. Destaque: Selecione todos os elementos <p> da página e use um laço para adicionar a classe destaque a todos eles.
2. Invisibilidade: Escreva uma função que, ao ser chamada, esconda um elemento mudando seu display para none.

🔴 Desafio

1. Menu "Accordion" Simples:
   • Imagine um <div> que contém um texto longo, inicialmente escondido (display: none).
   • Crie um botão "Ver Mais".
   • Ao clicar no botão, o texto deve aparecer e o texto do botão deve mudar para "Ver Menos".
   • Ao clicar novamente, o texto some e o botão volta ao original.
   • Dica: Use classList para controlar a visibilidade e um if para mudar o texto do botão.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Toggle
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();

// Solução de referência para: Destaque
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();

// Solução de referência para: Invisibilidade
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();