Esercizio 3: Bottoni Multipli

🎯 I Tuoi Obiettivi

✅ Crea 3 eventi click diversi per 3 bottoni
✅ Bottone 1: Cambia il titolo in "Titolo Modificato! ✨"
✅ Bottone 2: Cambia lo sfondo del box in blu (#4ecdc4)
✅ Bottone 3: Cambia il testo del paragrafo in "Testo Cambiato! 🎉"
✅ Bottone Reset: Riporta tutto ai valori originali

Questo è il Titolo

Box Colorato

Questo è un paragrafo di testo.

📝 Istruzioni Dettagliate

🎯 Passo 1: Seleziona TUTTI gli Elementi

Devi selezionare 7 elementi in totale:

Il titolo (#titolo)
Il box colorato (#boxColorato)
Il paragrafo (#paragrafo)
I quattro bottoni (#btnTitolo, #btnBox, #btnParagrafo, #btnResetAll)

⚡ Passo 2: Aggiungi 4 Eventi Click Separati

🔹 Bottone 1 - Cambia Titolo

Quando clicchi #btnTitolo:

Cambia titolo.textContent in "Titolo Modificato! ✨"

🔹 Bottone 2 - Cambia Box

Quando clicchi #btnBox:

Cambia boxColorato.style.backgroundColor in "#4ecdc4"
(OPZIONALE) Cambia anche boxColorato.style.color in "white"

🔹 Bottone 3 - Cambia Paragrafo

Quando clicchi #btnParagrafo:

Cambia paragrafo.textContent in "Testo Cambiato! 🎉"

🔹 Bottone 4 - Reset Tutto

Quando clicchi #btnResetAll:

Riporta titolo.textContent a "Questo è il Titolo"
Riporta boxColorato.style.backgroundColor a '' (stringa vuota)
Riporta paragrafo.textContent a "Questo è un paragrafo di testo."

💡 Suggerimenti

📋 Struttura Generale

// 1. Seleziona tutti gli elementi
const titolo = document.querySelector('#titolo');
const boxColorato = document.querySelector('#boxColorato');
const paragrafo = document.querySelector('#paragrafo');
const btnTitolo = document.querySelector('#btnTitolo');
// ... continua tu con gli altri bottoni

// 2. Evento per il primo bottone
btnTitolo.addEventListener('click', function() {
    titolo.textContent = 'Titolo Modificato! ✨';
});

// 3. Evento per il secondo bottone
btnBox.addEventListener('click', function() {
    boxColorato.style.backgroundColor = '#4ecdc4';
});

// 4. Continua tu con gli altri bottoni...

🎯 Tabella IDs Completa

Elemento	ID da usare	Cosa modificare
Titolo	`#titolo`	`.textContent`
Box Colorato	`#boxColorato`	`.style.backgroundColor`
Paragrafo	`#paragrafo`	`.textContent`
Bottone Titolo	`#btnTitolo`	-
Bottone Box	`#btnBox`	-
Bottone Paragrafo	`#btnParagrafo`	-
Bottone Reset	`#btnResetAll`	-

🔄 Pattern Ripetitivo

Nota come ogni bottone segue lo stesso pattern:

bottone.addEventListener('click', function() {
    elemento.proprieta = 'nuovo valore';
});

Devi solo ripetere questo pattern 4 volte con elementi e valori diversi!

⚠️ Attenzione ai Dettagli

✅ Scrivi i testi ESATTAMENTE come indicato (con emoji incluse!)
✅ Usa il colore esadecimale corretto: #4ecdc4
✅ Ricorda il # davanti agli ID nel querySelector
✅ Chiudi sempre le parentesi { } e ( )

🚀 Challenge Bonus (Opzionale)

Hai completato l'esercizio? Prova a:

🎨 Far cambiare anche il colore del testo del box (oltre allo sfondo)
📏 Aumentare la dimensione del font del titolo quando lo modifichi
✨ Aggiungere un bordo al box quando cambi il suo colore
🔤 Cambiare il colore del paragrafo in rosso quando cambi il testo
🎭 Creare un quinto bottone che fa qualcosa di completamente nuovo
⏱️ Usare setTimeout() per far tornare automaticamente tutto normale dopo 3 secondi