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

Demo de la aplicación web de temporizador de tareas

🎯 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

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.

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.

Implementar la funcionalidad de adición de 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".

Implementar 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".

Implementar la funcionalidad de parada del 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".

Implementar 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".

Ejecutando la aplicación

Abre index.html en un navegador web.

open 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:

task timer demo animation

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.

Crear una aplicación web de temporizador de tareas

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Crea la estructura HTML

Estilos CSS

Implementar la funcionalidad de adición de tareas

Implementar la funcionalidad de inicio del temporizador de tareas

Implementar la funcionalidad de parada del temporizador de tareas

Implementar la funcionalidad de eliminación de tareas

Ejecutando la aplicación

Resumen