Chronomètre de tâches : Créez une application web avec HTML, CSS et JavaScript

Introduction

Dans ce projet étape par étape, vous allez apprendre à créer une application web de chronomètre de tâches à l'aide de HTML, CSS et JavaScript. Cette application web permettra aux utilisateurs d'ajouter des tâches, de démarrer et d'arrêter les chronomètres pour chaque tâche et de supprimer des tâches. À la fin de ce projet, vous aurez une application web de chronomètre de tâches entièrement fonctionnelle avec une interface moderne et conviviale pour l'utilisateur.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment créer la structure HTML de base pour l'application web de chronomètre de tâches
Comment styliser l'application web à l'aide de CSS pour la rendre visuellement attrayante
Comment implémenter la fonctionnalité JavaScript pour ajouter des tâches à l'application
Comment ajouter la fonctionnalité de chronomètre pour démarrer et arrêter les chronomètres pour chaque tâche
Comment implémenter la capacité de supprimer des tâches de l'application

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Gérer l'entrée utilisateur et la validation dans les formulaires web
Démarrer et arrêter dynamiquement les chronomètres à l'aide de JavaScript
Mettre à jour et afficher l'heure dans un format convivial pour l'utilisateur
Supprimer des éléments du Modèle Objet Document (DOM) à l'aide de JavaScript
Structurer et organiser un projet d'application web simple
Créer des boutons et attacher des écouteurs d'événements à ceux-ci
Vider les champs de saisie après une interaction utilisateur
Activer et désactiver des boutons en fonction des actions de l'utilisateur
Utiliser des attributs de données pour stocker des informations dans les éléments HTML

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/functions -.-> lab-445715{{"Création d'une application web de chronomètre de tâches"}} javascript/dom_select -.-> lab-445715{{"Création d'une application web de chronomètre de tâches"}} javascript/dom_manip -.-> lab-445715{{"Création d'une application web de chronomètre de tâches"}} javascript/event_handle -.-> lab-445715{{"Création d'une application web de chronomètre de tâches"}} javascript/dom_traverse -.-> lab-445715{{"Création d'une application web de chronomètre de tâches"}} end

Créez la structure HTML

Exigences :

Ouvrez le fichier index.html.
Créez la structure HTML de base avec un titre, un en-tête, un champ de saisie pour les noms de tâches, un bouton "Ajouter une tâche" et une liste de tâches vide (ul).

Fonctionnalité :

Établissez la structure initiale de l'application web de chronomètre de tâches.

Étapes :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task Timer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Task Timer</h1>
      <div class="task-input">
        <input type="text" id="taskName" placeholder="Task Name" />
        <button onclick="addTask()">Add Task</button>
      </div>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Cette structure HTML comprend le conteneur principal, un en-tête, un champ de saisie pour les noms de tâches, un bouton "Ajouter une tâche" et une liste de tâches vide (ul) qui sera remplie dynamiquement.

✨ Vérifier la solution et pratiquer

Stylisation CSS

Exigences :

Ouvrez le fichier style.css.
Ajoutez des styles CSS pour rendre l'application web visuellement attrayante.

Fonctionnalité :

Appliquez des styles de base aux éléments de l'application web.

Étapes :

body {
  font-family: "Arial", sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

.task-input {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 0;
  outline: none;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #444;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.timer-controls {
  display: flex;
  gap: 10px;
}

.timer-controls button {
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.timer-controls button:hover {
  background-color: #444;
}

.task-time {
  font-size: 1.2rem;
  color: #555;
}

Nous ajouterons les styles CSS dans les étapes suivantes pour garantir une bonne coordination avec la fonctionnalité JavaScript.

✨ Vérifier la solution et pratiquer

Implémentez la fonctionnalité d'ajout de tâches

Exigences :

Ouvrez le fichier script.js.
Créez la fonction addTask qui ajoute des tâches à la liste lorsque le bouton "Ajouter une tâche" est cliqué.

Fonctionnalité :

Les utilisateurs peuvent ajouter des tâches à la liste de tâches.

Étapes :

// Function to add a new task
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("Veuillez entrer un nom de tâche.");
    return;
  }

  // Create a new list item (li)
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">Démarrer</button>
            <button onclick="stopTimer(this)">Arrêter</button>
            <button onclick="deleteTask(this)">Supprimer</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // Append the new task to the task list (ul)
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // Clear the input field
  taskNameInput.value = "";
}

Ce code définit la fonction addTask, qui crée un nouvel élément de tâche lorsque le bouton "Ajouter une tâche" est cliqué.

✨ Vérifier la solution et pratiquer

Implémentez la fonctionnalité de démarrage du chronomètre de tâches

Exigences :

Détendez le fichier script.js.
Créez la fonction startTimer qui démarre les chronomètres pour les tâches lorsque le bouton "Démarrer" est cliqué.

Fonctionnalité :

Les utilisateurs peuvent démarrer les chronomètres pour des tâches spécifiques.

Étapes :

// Function to start a timer
function startTimer(button) {
  // Retrieve the parent list item (li) of the clicked button
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // Disable the "Start" button and enable the "Stop" button
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // Update the timer display every second
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // Store the interval ID in a data attribute for later use
  li.dataset.intervalId = interval;
}

Ce code définit la fonction startTimer, qui démarre un chronomètre lorsque le bouton "Démarrer" est cliqué.

✨ Vérifier la solution et pratiquer

Implémentez la fonctionnalité d'arrêt du chronomètre de tâches

Exigences :

Continuez dans le fichier script.js.
Créez la fonction stopTimer qui arrête les chronomètres pour les tâches lorsque le bouton "Arrêter" est cliqué.

Fonctionnalité :

Les utilisateurs peuvent arrêter les chronomètres pour des tâches spécifiques.

Étapes :

// Function to stop a timer
function stopTimer(button) {
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const intervalId = li.dataset.intervalId;

  clearInterval(intervalId);
  button.disabled = true;
  li.querySelector("button:nth-child(1)").disabled = false;

  // Afficher le temps écoulé final
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

Ce code définit la fonction stopTimer, qui arrête le chronomètre lorsque le bouton "Arrêter" est cliqué.

✨ Vérifier la solution et pratiquer

Implémentez la fonctionnalité de suppression de tâches

Exigences :

Toujours dans le fichier script.js.
Créez la fonction deleteTask qui permet aux utilisateurs de supprimer des tâches lorsque le bouton "Supprimer" est cliqué.

Fonctionnalité :

Les utilisateurs peuvent supprimer des tâches de la liste.

Étapes :

// Function to delete a task
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

Ce code définit la fonction deleteTask, qui supprime une tâche lorsque le bouton "Supprimer" est cliqué.

✨ Vérifier la solution et pratiquer

Exécution de l'application

Ouvrez index.html dans un navigateur web.

Testez l'application en ajoutant des dépenses et en vérifiant que la liste et le résumé des dépenses sont mis à jour correctement.
L'effet de la page est le suivant :

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations ! Vous avez réussi à créer une application web de chronomètre de tâches en utilisant HTML, CSS et JavaScript. Les utilisateurs peuvent ajouter des tâches, démarrer et arrêter les chronomètres pour chaque tâche et supprimer les tâches selon les besoins. Cette application web offre une interface moderne et conviviale pour suivre le temps passé sur des tâches ou projets spécifiques.