HTML, CSS e JavaScript: realizziamo una lista dei compiti

Tecnologie e Progettazione di Sistemi Informatici e di Telecomunicazioni | Laboratorio guidato

Obiettivo: mettere in relazione struttura, presentazione e comportamento realizzando una piccola applicazione web utilizzabile direttamente nel browser.

6.1 Il progetto: una lista interattiva

Dopo aver studiato separatamente HTML5, CSS e JavaScript, realizziamo un’applicazione che consente di annotare le attività da svolgere. Chi usa la pagina potrà inserire un compito, contrassegnarlo come completato con un clic ed eliminarlo con un doppio clic. Un messaggio riepilogherà quanti elementi risultano conclusi.

HTML definisce campo di inserimento, pulsante, elenco e testo di stato; CSS ne cura la leggibilità e distingue i compiti completati; JavaScript gestisce gli eventi e aggiorna gli elementi della pagina tramite DOM.

Crea una cartella chiamata lista-compiti e al suo interno tre file: index.html, stile.css e script.js. I nomi utilizzati nei collegamenti devono corrispondere esattamente ai file creati.

6.2 Il file HTML: gli elementi dell’interfaccia

Nel documento HTML inseriamo una sezione principale che contiene il titolo, un campo di testo, un pulsante, un elenco inizialmente vuoto e un paragrafo informativo. Gli attributi id permettono allo script di individuare gli elementi interessati.

<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Lista dei compiti</title>
<link rel=”stylesheet” href=”stile.css”>
</head>
<body>
<main class=”scheda”>
<h1>I miei compiti</h1>
<div class=”riga-input”>
<input type=”text” id=”nuovo” placeholder=”Scrivi un compito…”>
<button id=”aggiungi”>Aggiungi</button>
</div>
<ul id=”lista”></ul>
<p id=”stato”>Nessun compito in lista</p>
</main>
<script src=”script.js”></script>
</body>
</html>

Osserva che <link> richiama il foglio di stile e <script> carica il programma JavaScript. Il tag <script> è posto alla fine del body: in questo modo, quando viene eseguito, gli elementi HTML sono già stati creati.

6.3 Il file CSS: presentazione e stato dei compiti

Definiamo una scheda centrale, colori coerenti e un aspetto riconoscibile per i pulsanti. La classe fatto sarà applicata da JavaScript alle attività completate: il testo apparirà grigio e barrato.

body {
font-family: Verdana, sans-serif;
background: linear-gradient(135deg, #1f4e79, #2e75b6);
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.scheda {
background: white;
width: 90%;
max-width: 500px;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
h1 { color: #1f4e79; text-align: center; }
.riga-input { display: flex; gap: 10px; }
input {
flex: 1;
min-width: 0;
padding: 10px;
font-size: 16px;
border: 2px solid #8eaadb;
border-radius: 6px;
}
button {
background: #1f4e79;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
}
button:hover { background: #2e75b6; }
li {
list-style: none;
padding: 10px;
margin-top: 8px;
background: #f2f6fb;
border-radius: 6px;
cursor: pointer;
}
li.fatto { text-decoration: line-through; color: gray; }

La regola li.fatto riguarda esclusivamente gli elementi <li> ai quali è stata assegnata la classe fatto. In questo modo il programma non deve modificare direttamente i colori.

6.4 Il file JavaScript: azioni e aggiornamenti

Il programma recupera gli elementi tramite getElementById, controlla il testo immesso e crea dinamicamente un nuovo elemento <li>. A ogni modifica aggiorna anche il riepilogo delle attività.

const campo = document.getElementById(“nuovo”);
const bottone = document.getElementById(“aggiungi”);
const lista = document.getElementById(“lista”);
const stato = document.getElementById(“stato”);

function aggiungiCompito() {
const testo = campo.value.trim();
if (testo === “”) {
alert(“Scrivi prima un compito!”);
return;
}

const voce = document.createElement(“li”);
voce.textContent = testo;

voce.addEventListener(“click”, function () {
voce.classList.toggle(“fatto”);
aggiornaStato();
});

voce.addEventListener(“dblclick”, function () {
voce.remove();
aggiornaStato();
});

lista.appendChild(voce);
campo.value = “”;
aggiornaStato();
}

bottone.addEventListener(“click”, aggiungiCompito);
campo.addEventListener(“keydown”, function (evento) {
if (evento.key === “Enter”) {
aggiungiCompito();
}
});

La funzione trim() elimina gli spazi iniziali e finali, evitando l’inserimento di voci vuote. createElement() crea un elemento, appendChild() lo aggiunge alla lista e remove() lo elimina. classList.toggle() attiva o disattiva la classe CSS. Il tasto Invio richiama la stessa funzione del pulsante.

Nota tecnica: il doppio clic produce anche eventi click; nell’esempio l’elemento viene comunque rimosso correttamente. Per applicazioni più complesse sarebbe preferibile prevedere un pulsante Elimina dedicato, anche per migliorare l’accessibilità.

6.5 Come collaborano i tre file

Supponiamo di digitare “Studiare il DOM” e premere Aggiungi. Il browser mostra il campo e il pulsante definiti in HTML. L’evento click avvia la funzione JavaScript, che legge il testo, crea un nuovo elemento <li> e lo inserisce nell’elenco. Il CSS applica immediatamente lo stile previsto per tutte le voci. Se si clicca sul compito, JavaScript aggiunge la classe fatto e il CSS mostra il testo barrato. Infine, il riepilogo viene aggiornato leggendo il numero delle voci presenti e completate.

Questo esempio dimostra la separazione delle responsabilità: HTML descrive cosa esiste, CSS stabilisce come appare, JavaScript definisce cosa accade quando si interagisce con la pagina.

Esercitazione e verifica

Apri index.html nel browser e inserisci tre attività. 2. Contrassegnane una come completata e verifica il conteggio. 3. Elimina una voce con doppio clic. 4. Cambia il colore del pulsante nel CSS e verifica che non occorra modificare HTML o JavaScript. 5. Spiega quale istruzione crea una nuova voce e quale modifica il suo aspetto quando viene completata.

Per approfondire: aggiungi un pulsante “Elimina completati” oppure impedisci l’inserimento di attività duplicate. Queste modifiche richiedono ulteriori controlli JavaScript.

4. HTML, CSS e JavaScript