Temporizador de tareas: Crea una aplicación web con HTML, CSS y JavaScript

Introducción

En este proyecto paso a paso, aprenderás a crear una aplicación web de temporizador de tareas utilizando HTML, CSS y JavaScript. Esta aplicación web permitirá a los usuarios agregar tareas, iniciar y detener temporizadores para cada tarea y eliminar tareas. Al final de este proyecto, tendrás una aplicación web de temporizador de tareas completamente funcional con una interfaz moderna y amigable para el usuario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo crear la estructura básica HTML para la aplicación web de temporizador de tareas
Cómo dar estilo a la aplicación web utilizando CSS para que sea visualmente atractiva
Cómo implementar la funcionalidad de JavaScript para agregar tareas a la aplicación
Cómo agregar la funcionalidad de temporizador para iniciar y detener temporizadores para cada tarea
Cómo implementar la capacidad de eliminar tareas de la aplicación

🏆 Logros

Después de completar este proyecto, podrás:

Manejar la entrada y validación del usuario en formularios web
Iniciar y detener temporizadores dinámicamente utilizando JavaScript
Actualizar y mostrar el tiempo en un formato amigable para el usuario
Eliminar elementos del Modelo de Objetos del Documento (DOM) utilizando JavaScript
Estructurar y organizar un proyecto de aplicación web simple
Crear botones y adjuntar oyentes de eventos a ellos
Limpiar los campos de entrada después de la interacción del usuario
Habilitar y deshabilitar botones según las acciones del usuario
Utilizar atributos de datos para almacenar información en elementos 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{{"Crear una aplicación web de temporizador de tareas"}} javascript/dom_select -.-> lab-445715{{"Crear una aplicación web de temporizador de tareas"}} javascript/dom_manip -.-> lab-445715{{"Crear una aplicación web de temporizador de tareas"}} javascript/event_handle -.-> lab-445715{{"Crear una aplicación web de temporizador de tareas"}} javascript/dom_traverse -.-> lab-445715{{"Crear una aplicación web de temporizador de tareas"}} end

Crea la estructura HTML

Requisitos:

Abre el archivo index.html.
Crea la estructura básica HTML con un título, un encabezado, un campo de entrada para los nombres de tareas, un botón "Agregar Tarea" y una lista de tareas vacía (ul).

Funcionalidad:

Establece la estructura inicial de la aplicación web de temporizador de tareas.

Pasos:

<!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>

Esta estructura HTML incluye el contenedor principal, un encabezado, un campo de entrada para los nombres de tareas, un botón "Agregar Tarea" y una lista de tareas vacía (ul) que se llenará dinámicamente.

✨ Revisar Solución y Practicar

Estilos CSS

Requisitos:

Abre el archivo style.css.
Agrega estilos CSS para que la aplicación web sea visualmente atractiva.

Funcionalidad:

Aplica estilos básicos a los elementos de la aplicación web.

Pasos:

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;
}

Agregaremos los estilos CSS en los siguientes pasos para garantizar una adecuada coordinación con la funcionalidad de JavaScript.

✨ Revisar Solución y Practicar

Implementa la funcionalidad de agregar tareas

Requisitos:

Abre el archivo script.js.
Crea la función addTask que agrega tareas a la lista cuando se hace clic en el botón "Agregar Tarea".

Funcionalidad:

Los usuarios pueden agregar tareas a la lista de tareas.

Pasos:

// Función para agregar una nueva tarea
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("Please enter a task name.");
    return;
  }

  // Crea un nuevo elemento de lista (li)
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">Start</button>
            <button onclick="stopTimer(this)">Stop</button>
            <button onclick="deleteTask(this)">Delete</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // Agrega la nueva tarea a la lista de tareas (ul)
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // Limpia el campo de entrada
  taskNameInput.value = "";
}

Este código define la función addTask, que crea un nuevo elemento de tarea cuando se hace clic en el botón "Agregar Tarea".

✨ Revisar Solución y Practicar

Implementa la funcionalidad de inicio del temporizador de tareas

Requisitos:

Amplía el archivo script.js.
Crea la función startTimer que inicia los temporizadores para las tareas cuando se hace clic en el botón "Start".

Funcionalidad:

Los usuarios pueden iniciar los temporizadores para tareas específicas.

Pasos:

// Función para iniciar un temporizador
function startTimer(button) {
  // Obtiene el elemento de lista padre (li) del botón clicado
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // Deshabilita el botón "Start" y habilita el botón "Stop"
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // Actualiza la visualización del temporizador cada segundo
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // Almacena el ID del intervalo en un atributo de datos para su uso posterior
  li.dataset.intervalId = interval;
}

Este código define la función startTimer, que inicia un temporizador cuando se hace clic en el botón "Start".

✨ Revisar Solución y Practicar

Implementa la funcionalidad de detener el temporizador de tareas

Requisitos:

Continúa en el archivo script.js.
Crea la función stopTimer que detiene los temporizadores para las tareas cuando se hace clic en el botón "Stop".

Funcionalidad:

Los usuarios pueden detener los temporizadores para tareas específicas.

Pasos:

// Función para detener un temporizador
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;

  // Muestra el tiempo transcurrido final
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

Este código define la función stopTimer, que detiene el temporizador cuando se hace clic en el botón "Stop".

✨ Revisar Solución y Practicar

Implementa la funcionalidad de eliminación de tareas

Requisitos:

Sigue en el archivo script.js.
Crea la función deleteTask que permite a los usuarios eliminar tareas cuando se hace clic en el botón "Delete".

Funcionalidad:

Los usuarios pueden eliminar tareas de la lista.

Pasos:

// Función para eliminar una tarea
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

Este código define la función deleteTask, que elimina una tarea cuando se hace clic en el botón "Delete".

✨ Revisar Solución y Practicar

Ejecutando la aplicación

Abre index.html en un navegador web.

Prueba la aplicación agregando gastos y verificando que la lista y el resumen de gastos se actualicen correctamente.
El efecto de la página es el siguiente:

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Has creado con éxito una aplicación web de temporizador de tareas utilizando HTML, CSS y JavaScript. Los usuarios pueden agregar tareas, iniciar y detener los temporizadores para cada tarea y eliminar tareas según sea necesario. Esta aplicación web ofrece una interfaz moderna y amigable para el usuario para registrar el tiempo invertido en tareas o proyectos específicos.