Organizzare le proprie attività quotidiane è diventato sempre più importante, sia nella vita personale che in quella professionale. Le To-Do List — ovvero le liste di cose da fare — sono uno strumento semplice ma efficace per aumentare la produttività e tenere traccia dei propri impegni.
To-Do List da zero: guida pratica per gestire task con HTML, CSS e JavaScript
In questo tutorial andremo a realizzare una To-Do List base utilizzando HTML, CSS e JavaScript. Sarà un progetto perfetto per chi sta imparando a sviluppare per il web e vuole mettere in pratica le proprie competenze front-end.
L'obiettivo è quello di creare un'interfaccia semplice che permetta all'utente di aggiungere e rimuovere attività in modo interattivo, senza bisogno di ricaricare la pagina. Ti guiderò passo dopo passo nella creazione della struttura, dello stile e della logica funzionale della nostra To-Do List, accompagnando ogni parte di codice con spiegazioni chiare e mirate.
I linguaggi usati per questo esercizio
Per realizzare la nostra To-Do List utilizzeremo tre tecnologie fondamentali del web.
Il progetto sarà semplice ma funzionale: una casella di testo in cui inserire una nuova attività, un pulsante per aggiungerla alla lista, e accanto ad ogni elemento un'icona (o pulsante) per eliminarlo. La lista si aggiornerà in tempo reale, senza bisogno di ricaricare la pagina. Il risultato finale sarà una piccola applicazione web che potrai personalizzare, espandere o integrare in progetti più complessi.
Il docide HTML
<head>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List Base</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todo-container">
<h1>La mia To-Do List</h1>
<div class="input-section">
<input type="text" id="task-input" placeholder="Scrivi un'attività...">
<button id="add-task">Aggiungi</button>
</div>
<ul id="task-list">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>Nel codice <div class="todo-container">: contiene tutta l'applicazione e ci aiuterà a centrare e stilizzare il contenuto. <input> è invece il campo dove l'utente può scrivere il nome del task. Con <button> al click si aggiunge il contenuto del campo input alla lista. <ul id="task-list"> restituisce infine un elenco non ordinato che conterrà le attività da fare. Ognuna inserita come <li> tramite JavaScript. Questa è la base su cui verrà costruita la funzionalità desiderata.
Il codice CSS
.todo-container {
background-color: #fff;
padding: 30px;
margin-top: 50px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
.todo-container h1 {
text-align: center;
color: #333;
}Questa prima parte di codice CSS riguarda l'elemento padre che avrà un colore di sfondo e una larghezza massima di 400px, al suo interno sarà presente il contenuto con un titolo centrato.
.input-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#task-input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
#add-task {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
#add-task:hover {
background-color: #218838;
}Successivamente abbiamo l'elemento in cui viene scritta la task. Esso presenta un bordo leggermente arrotondato ed un pulsante accanto che permette di aggiungere la task appena scritta. Questi due elementi risultano allineati orizzontalmente uno accanto all'altro.
#task-list {
list-style-type: none;
padding: 0;
margin: 0;
}
#task-list li {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 12px;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.remove-btn {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.remove-btn:hover {
background-color: #c82333;
}Infine viene modificato lo stile della lista di task che man mano verranno aggiunte. Viene assegnato un colore di sfondo ed un margine oltre che un rientro per mostrare in maniera ordinata l'elenco di valori. Inoltre, accanto ad ogni task, è presente il pulsante per rimuovere il valore appena aggiunto, esso sarà bianco, Di conseguenza ogni attività viene mostrata come un blocco con un pulsante di rimozione ben visibile. Lo stile è minimale ma funzionale, e può essere facilmente personalizzato.
Il codice JavaSript
const addButton = document.getElementById("add-task");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");
addButton.addEventListener("click", function () {
const taskText = taskInput.value.trim();
if (taskText !== "") {
const li = document.createElement("li");
li.textContent = taskText;
const removeBtn = document.createElement("button");
removeBtn.textContent = "X";
removeBtn.classList.add("remove-btn");
li.appendChild(removeBtn);
taskList.appendChild(li);
taskInput.value = "";
removeBtn.addEventListener("click", function () {
taskList.removeChild(li);
});
}
});getElementById()addEventListener("click", ..)createElement()appendChild()removeChild()
Con questo semplice script, ogni attività viene creata e visualizzata istantaneamente e può essere rimossa con un solo clic. È una base perfetta per iniziare a comprendere come funziona la manipolazione del DOM con JavaScript.
Risultato finale e commento
Una volta uniti i tre file – HTML, CSS e JavaScript – il risultato finale è una semplice ma funzionale To-Do List. Un'applicazione leggera, essenziale e adatta a chi muove i primi passi nello sviluppo web. L'interfaccia si presenta chiara e intuitiva, con un campo dove l'utente può inserire una nuova attività e un pulsante per aggiungerla all'elenco sottostante. Ogni volta che si clicca su "Aggiungi", la nuova attività compare subito nella lista, accompagnata da un piccolo pulsante con una "X", utile per rimuoverla con un solo clic.
Di seguito l'anteprima del risultato finale ottenuto:
L'aspetto più interessante è quello di vedere come tre linguaggi distinti – HTML per la struttura, CSS per l'aspetto visivo e JavaScript per la logica – collaborino perfettamente per dare vita a un'interazione semplice ma efficace. Abbiamo toccato con mano il potenziale del DOM e degli eventi JavaScript, imparando come creare dinamicamente elementi e inserirli nella pagina, e come reagire alle azioni dell'utente in tempo reale.
Nonostante la semplicità dell'esempio, questa To-Do List rappresenta una vera e propria "palestra" per chi sta imparando. Le competenze coinvolte sono fondamentali: comprendere la separazione tra contenuto, stile e funzionalità è uno dei passi più importanti nello sviluppo front-end. Vedere un'app che prende forma da zero, con pochi elementi ma con un comportamento dinamico, è sempre una piccola soddisfazione che rafforza la voglia di continuare.
