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
🎯 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.
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.
Implementar a Funcionalidade de Adição de Tarefas
Requisitos:
- Abra o arquivo
script.js. - Crie a função
addTaskque 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.
Implementar a Funcionalidade de Início do Cronômetro da Tarefa
Requisitos:
- Expanda o arquivo
script.js. - Crie a função
startTimerque 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.
Implementar a Funcionalidade de Parada do Cronômetro da Tarefa
Requisitos:
- Continue no arquivo
script.js. - Crie a função
stopTimerque 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.
Implementar a Funcionalidade de Exclusão de Tarefas
Requisitos:
- Ainda no arquivo
script.js. - Crie a função
deleteTaskque 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.
Executando o Aplicativo
Abra
index.htmlem 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:
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.
