// Seleziona un elemento con la classe "bottone"
const mioBottone = document.querySelector('.bottone');

// Seleziona un elemento con l'ID "titolo"
const mioTitolo = document.querySelector('#titolo');

// Seleziona il primo paragrafo della pagina
const primoParagrafo = document.querySelector('p');

// 1. Seleziona il bottone
const bottone = document.querySelector('.mio-bottone');

// 2. Ascolta il click
bottone.addEventListener('click', function() {
    alert('Hai cliccato il bottone! 🎉');
});

// Seleziona un titolo
const titolo = document.querySelector('h1');

// Cambia il testo
titolo.textContent = 'Nuovo Titolo! 🚀';

// O usa innerHTML per inserire HTML
titolo.innerHTML = 'Testo con <strong>grassetto</strong>!';

// Seleziona un elemento
const box = document.querySelector('.box');

// Cambia il colore di sfondo
box.style.backgroundColor = 'blue';

// Cambia il colore del testo
box.style.color = 'white';

// Cambia la dimensione del testo
box.style.fontSize = '24px';

// Cambia più proprietà insieme
box.style.cssText = 'background: blue; color: white; padding: 20px;';

<div class="progetto-container">
    <h1 id="progettoTitolo">Scegli il Tuo Colore Preferito!</h1>
    <p id="progettoMessaggio">Clicca un bottone per cambiare lo sfondo</p>
    
    <div class="colori-grid">
        <button class="color-btn" data-color="#ff6b6b" data-name="Rosso">
            🔴 Rosso
        </button>
        <button class="color-btn" data-color="#4ecdc4" data-name="Azzurro">
            🔵 Azzurro
        </button>
        <button class="color-btn" data-color="#ffd93d" data-name="Giallo">
            🟡 Giallo
        </button>
        <button class="color-btn" data-color="#a29bfe" data-name="Viola">
            🟣 Viola
        </button>
        <button class="color-btn" data-color="#55efc4" data-name="Verde">
            🟢 Verde
        </button>
        <button class="color-btn" data-color="#fd79a8" data-name="Rosa">
            🌸 Rosa
        </button>
    </div>
</div>

.progetto-container {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.colori-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.color-btn {
    padding: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    border: none;
    border-radius: 15px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s;
}

.color-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

// Seleziona tutti i bottoni colore
const bottoniColore = document.querySelectorAll('.color-btn');
const messaggio = document.querySelector('#progettoMessaggio');

// Per ogni bottone, aggiungi un evento click
bottoniColore.forEach(function(bottone) {
    bottone.addEventListener('click', function() {
        
        // COMPLETA TU QUESTO CODICE! 
        // Suggerimenti:
        // 1. Prendi il colore: bottone.dataset.color
        // 2. Prendi il nome: bottone.dataset.name
        // 3. Cambia lo sfondo: document.body.style.backgroundColor
        // 4. Cambia il messaggio: messaggio.textContent
        
    });
});