Mini-Projet : ToDoList

Préparation du repository

Dans votre dossier bre05-js-j6, créez un dossier todolist
Créez un fichier index.html dans le dossier todolist
Créez un fichier style.css dans le dossier todolist
Créez un fichier index.js dans le dossier todolist

Le contenu des fichiers

index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mini-Projet ToDoList</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="container">
        <header>
            <h1>Ma Liste</h1>
        </header>

        <ul id="todo-list">
            <!-- Exemple pour vous montrer la structure HTML à créer -->
            <li class="todo-item">
                <input type="checkbox" class="todo-checkbox">
                <span class="todo-text">Faire les courses</span>
                <button class="delete-btn">Supprimer</button>
            </li>
        </ul>

        <form id="todo-form">
            <input type="text" id="todo-input" placeholder="Nouvelle tâche..." required>
            <button type="submit" id="add-btn">+</button>
        </form>
    </div>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.container {
    background: white;
    width: 90%;
    max-width: 450px;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin-bottom: 20px;
    text-align: center;
    color: #1a1a1a;
}


#todo-list {
    list-style: none;
    margin-bottom: 25px;
    max-height: 400px;
    overflow-y: auto;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

.todo-item:hover {
    background: #f8f9fa;
}


.todo-text {
    flex: 1;
    font-size: 1rem;
    transition: color 0.3s, text-decoration 0.3s;
}


.completed .todo-text {
    text-decoration: line-through;
    color: #a0aec0;
}


.todo-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6c5ce7;
}


#todo-form {
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

#todo-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
}

#add-btn {
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.5rem;
}

.delete-btn {
    background: none;
    border: none;
    color: #ff7675;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
}

index.js

let todos = [];

window.addEventListener('DOMContentLoaded', () => {

});

Consignes

Nous allons reprendre le principe de l'exercice de la todolist mais en l'améliorant.

Cette fois la liste des tâches va être remplie par les ajouts depuis votre formulaire.

Chaque tâche de la liste devra générer une structure HTML semblable à celle fournie en exemple (vous devrez donc retirer celle placée en guise d'exemple dans le HTML) :

<li class="todo-item">
    <input type="checkbox" class="todo-checkbox">
    <span class="todo-text">Faire les courses</span>
    <button class="delete-btn">Supprimer</button>
</li>

À la soumission du formulaire, une tâche est ajoutée à la liste et dans le HTML.

Lorsque la case de cette liste est cochée, son texte devient barré.

Lorsque l'on appuie sur le bouton supprimer, elle est supprimée de la liste.

13 January 2026