To-Do-list - Lista de Tarefas:
Descubra como construir uma to-do list interativa com este tutorial detalhado.
Esta aplicação permite adicionar e remover tarefas, ajudando na organização do dia a dia.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 3 linguagens: HTML, CSS e JavaScript.
Veja o To-Do List em funcionamento neste link. To-Do List.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang= "pt-br" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Lista de Tarefas </title>
<link rel= "stylesheet" href= "style.css" >
</head>
<body>
<div class= "container" >
<h1> Lista de Tarefas </h1>
<form id= "task-form" >
<input type= "text" id= "task-input" placeholder= "Adicionar nova tarefa" required >
<button type= "submit" > Adicionar </button>
</form>
<ul id= "task-list" ></ul>
</div>
<script src= "script.js" ></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
form {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li:last-child {
border-bottom: none;
}
button.remove {
background-color: #e74c3c;
border: none;
padding: 5px 10px;
color: white;
border-radius: 4px;
cursor: pointer;
}
button.remove:hover {
background-color: #c0392b;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
// script.js
document.addEventListener(
'DOMContentLoaded', () => {
const taskForm = document
.getElementById('task-form');
const taskInput = document
.getElementById('task-input');
const taskList = document
.getElementById('task-list');
taskForm.addEventListener('submit',
(e) => {
e.preventDefault();
addTask(taskInput.value);
taskInput.value = '';
});
function addTask(task) {
const li = document.createElement(
'li');
li.textContent = task;
const removeButton = document
.createElement('button');
removeButton.textContent =
'Remover';
removeButton.classList.add(
'remove');
removeButton.addEventListener(
'click', () => {
taskList.removeChild(li);
});
li.appendChild(removeButton);
taskList.appendChild(li);
}
});
Se preferir os códigos estão no meu repositório no GitHub.
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!