🎯 I Tuoi Obiettivi

  • ✅ Seleziona il box e i bottoni
  • ✅ Quando clicchi "Cambia Colore", cambia lo sfondo del box in #ff6b6b (rosso)
  • ✅ Cambia anche il colore del testo in white (bianco)
  • ✅ Il bottone "Reset" deve riportare i colori originali
🎨 Questo box cambierà colore quando clicchi il bottone!

📝 Istruzioni Passo-Passo

  1. Seleziona il box
    Usa document.querySelector('#colorBox')
  2. Seleziona i bottoni
    Usa document.querySelector('#btnCambiaColore') e document.querySelector('#btnReset')
  3. Aggiungi l'evento click al bottone "Cambia Colore"
    Usa addEventListener('click', function() { ... })
  4. Cambia il colore di sfondo
    Dentro la funzione, usa box.style.backgroundColor = '#ff6b6b';
  5. Cambia il colore del testo
    Usa box.style.color = 'white';
  6. Aggiungi l'evento al bottone Reset
    Riporta i colori originali usando box.style.backgroundColor = ''; e box.style.color = '';

💡 Suggerimenti

🎯 Proprietà CSS in JavaScript

In JavaScript, le proprietà CSS cambiano nome:

  • background-color (CSS) diventa backgroundColor (JavaScript)
  • font-size (CSS) diventa fontSize (JavaScript)
  • color (CSS) rimane color (JavaScript)

💡 Regola: Rimuovi il trattino e metti la lettera successiva MAIUSCOLA!

🎨 Codici Colore

Puoi usare:

  • Codici esadecimali: '#ff6b6b'
  • Nomi colori: 'red', 'blue', 'white'
  • RGB: 'rgb(255, 107, 107)'

⚡ Struttura del Codice

// Cambia colore
bottone.addEventListener('click', function() {
    box.style.backgroundColor = '#ff6b6b';
    box.style.color = 'white';
});

🔄 Resettare gli Stili

Per rimuovere uno stile e tornare all'originale, assegna una stringa vuota:

elemento.style.backgroundColor = '';  // Torna al CSS originale

🚀 Challenge Bonus (Opzionale)

Se hai finito l'esercizio base, prova a:

  • 🎨 Cambiare anche la dimensione del testo (fontSize) quando clicchi
  • 📏 Aggiungere un bordo (border) al box
  • 📦 Cambiare il padding (padding) per rendere il box più grande
  • ✨ Aggiungere un'ombra (boxShadow) al box
  • 🎭 Creare un terzo bottone che cambia il colore in verde