Task Timer: Crie um Aplicativo Web com HTML, CSS e JavaScript - Tutorial

Introdução

Neste projeto passo a passo, você aprenderá a criar uma aplicação web de Task Timer usando HTML, CSS e JavaScript. Esta aplicação web permitirá que os usuários adicionem tarefas, iniciem e parem cronômetros para cada tarefa e excluam tarefas. Ao final deste projeto, você terá uma aplicação web de Task Timer totalmente funcional com uma interface moderna e amigável.

👀 Pré-visualização

Demonstração da aplicação web Task Timer

🎯 Tarefas

Neste projeto, você aprenderá:

Como criar a estrutura HTML básica para a aplicação web Task Timer
Como estilizar a aplicação web usando CSS para torná-la visualmente atraente
Como implementar a funcionalidade JavaScript para adicionar tarefas à aplicação
Como adicionar a funcionalidade de cronômetro para iniciar e parar cronômetros para cada tarefa
Como implementar a capacidade de excluir tarefas da aplicação

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Lidar com a entrada e validação do usuário em formulários web
Iniciar e parar cronômetros dinamicamente usando JavaScript
Atualizar e exibir o tempo em um formato amigável ao usuário
Excluir elementos do Document Object Model (DOM) usando JavaScript
Estruturar e organizar um projeto de aplicação web simples
Criar botões e anexar ouvintes de eventos a eles
Limpar campos de entrada após a interação do usuário
Habilitar e desabilitar botões com base nas ações do usuário
Usar atributos de dados para armazenar informações em elementos HTML

Criar a Estrutura HTML

Requisitos:

Abra o arquivo index.html.
Crie a estrutura HTML básica com um título, cabeçalho, campo de entrada para nomes de tarefas, um botão "Adicionar Tarefa" e uma lista de tarefas vazia (ul).

Funcionalidade:

Estabelecer a estrutura inicial da aplicação web Task Timer.

Passos:

<!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 estrutura HTML inclui o contêiner principal, um cabeçalho, um campo de entrada para nomes de tarefas, um botão "Adicionar Tarefa" e uma lista de tarefas vazia (ul) que será preenchida dinamicamente.

✨ Verificar Solução e Praticar

Estilização CSS

Requisitos:

Abra o arquivo style.css.
Adicione estilos CSS para tornar a aplicação web visualmente atraente.

Funcionalidade:

Aplicar estilos básicos aos elementos da aplicação web.

Passos:

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

Adicionaremos os estilos CSS nos próximos passos para garantir a coordenação adequada com a funcionalidade JavaScript.

✨ Verificar Solução e Praticar

Implementar a Funcionalidade de Adição de Tarefas

Requisitos:

Abra o arquivo script.js.
Crie a função addTask que adiciona tarefas à lista quando o botão "Adicionar Tarefa" é clicado.

Funcionalidade:

Os usuários podem adicionar tarefas à lista de tarefas.

Passos:

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

  if (taskName === "") {
    alert("Please enter a task name.");
    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)">Start</button>
            <button onclick="stopTimer(this)">Stop</button>
            <button onclick="deleteTask(this)">Delete</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 = "";
}

Este código define a função addTask, que cria um novo item de tarefa quando o botão "Adicionar Tarefa" é clicado.

✨ Verificar Solução e Praticar

Implementar a Funcionalidade de Início do Cronômetro da Tarefa

Requisitos:

Expanda o arquivo script.js.
Crie a função startTimer que inicia os cronômetros para as tarefas quando o botão "Iniciar" é clicado.

Funcionalidade:

Os usuários podem iniciar cronômetros para tarefas específicas.

Passos:

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

Este código define a função startTimer, que inicia um cronômetro quando o botão "Iniciar" é clicado.

✨ Verificar Solução e Praticar

Implementar a Funcionalidade de Parada do Cronômetro da Tarefa

Requisitos:

Continue no arquivo script.js.
Crie a função stopTimer que para os cronômetros das tarefas quando o botão "Parar" é clicado.

Funcionalidade:

Os usuários podem parar os cronômetros para tarefas específicas.

Passos:

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

  // Display the final elapsed time
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

Este código define a função stopTimer, que para o cronômetro quando o botão "Parar" é clicado.

✨ Verificar Solução e Praticar

Implementar a Funcionalidade de Exclusão de Tarefas

Requisitos:

Ainda no arquivo script.js.
Crie a função deleteTask que permite aos usuários excluir tarefas quando o botão "Excluir" é clicado.

Funcionalidade:

Os usuários podem remover tarefas da lista.

Passos:

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

Este código define a função deleteTask, que exclui uma tarefa quando o botão "Excluir" é clicado.

✨ Verificar Solução e Praticar

Executando o Aplicativo

Abra index.html em um navegador web.
Teste o aplicativo adicionando despesas e verificando se a lista de despesas e o resumo são atualizados corretamente.
O efeito da página é o seguinte:

✨ Verificar Solução e Praticar

Resumo

Parabéns! Você criou com sucesso um aplicativo web Task Timer usando HTML, CSS e JavaScript. Os usuários podem adicionar tarefas, iniciar e parar cronômetros para cada tarefa e excluir tarefas conforme necessário. Este aplicativo web fornece uma interface moderna e amigável para rastrear o tempo gasto em tarefas ou projetos específicos.

Criando um Aplicativo Web Task Timer

Introdução

👀 Pré-visualização

🎯 Tarefas

🏆 Conquistas

Criar a Estrutura HTML

Estilização CSS

Implementar a Funcionalidade de Adição de Tarefas

Implementar a Funcionalidade de Início do Cronômetro da Tarefa

Implementar a Funcionalidade de Parada do Cronômetro da Tarefa

Implementar a Funcionalidade de Exclusão de Tarefas

Executando o Aplicativo

Resumo