Projeto JavaScript para iniciantes – Aprenda como criar um To Do List com HTML, CSS e JavaScript
Você já se perguntou como criar um To Do List interativo usando HTML, CSS e JavaScript? Se sim, você veio ao lugar certo! Neste artigo, vamos aprender como criar um simples To Do List que permitirá adicionar, remover e marcar tarefas como concluídas.
Passo 1: Estrutura do HTML
O primeiro passo é criar a estrutura HTML para o nosso To Do List. Podemos usar as seguintes tags para isso:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Minha Lista de Tarefas</h1>
<div id="todo-form">
<input type="text" id="todo-input" placeholder="Adicionar nova tarefa">
<button onclick="addTodo()">Adicionar</button>
</div>
<ul id="todo-list">
<!-- Tarefas serão exibidas aqui -->
</ul>
<script src="script.js"></script>
</body>
</html>
Passo 2: Estilizando com CSS
Para deixar nosso To Do List mais apresentável, podemos usar CSS para estilizar os elementos. A seguir, temos um exemplo de estilos que você pode adicionar em um arquivo “styles.css”:
body {
font-family: Arial, sans-serif;
}
#todo-form {
margin-bottom: 20px;
}
#todo-list {
list-style-type: none;
padding: 0;
}
#todo-list li {
margin-bottom: 10px;
}
Passo 3: Adicionando funcionalidades com JavaScript
Por fim, precisamos adicionar funcionalidades ao nosso To Do List usando JavaScript. Abaixo está um exemplo de como você pode fazer isso em um arquivo “script.js”:
function addTodo() {
var todoInput = document.getElementById('todo-input').value;
if(todoInput !== '') {
var li = document.createElement('li');
li.appendChild(document.createTextNode(todoInput));
document.getElementById('todo-list').appendChild(li);
document.getElementById('todo-input').value = '';
}
}
Conclusão
Com esses passos simples, você pode criar um To Do List funcional usando HTML, CSS e JavaScript. A partir disso, você pode continuar explorando e adicionando mais funcionalidades ao seu To Do List, como a capacidade de marcar tarefas como concluídas, remover tarefas e muito mais. Espero que este artigo tenha sido útil e que você esteja animado para continuar aprendendo e praticando JavaScript!
PARTICIPE DO EVENTO: https://go.rodolfomori.com.br/evento
Aula sensacional Rodolfo, obrigado!
Tutorial super clarooo e muito bacana
Oi Rodolfo, obrigada pelo tutorial do projeto. Muito didático! Mesmo sem saber de alguns assuntos consegui fazer. Funcionou. Entretanto, ao digitar qualquer coisa na caixa "o que tenho que fazer", ele só aparece UNDEFINED, não grava a opção escrita. Poderia dar um help? Não encontrei como poderia fazer…
Cara fui jogado para uma disciplina no final do ano nem sabia o que fazer com os alunos, teu video foi foda parabéns
excelente!!! Caso eu criasse outra lista de itens como faria pra poder clicar num item e conseguir arrastar pra mover para a outra lista ? tipo um quadro do trello
muito bom
ta incrivel mas como eu fasso as minhas tarefas aparecerem para todo mundo
Que canal bommmm
Excelente explicação
Fiz a aplicação do início ao fim, foi um grande aprendizado pra mim. Muito obrigado
MUITO BOM CARA, PARABÉNS PELO CONTEÚDO !
poxa que didática excelente!
Salve mestre, consegui fazer o desafio de adicionar um if para verificar se o input está vazio
top mano! Parabéns pelo video
Brabo demais!!!!
Ótimo Projeto , mas achei muito puxado para iniciante.. bate um desanimo =/
Amando esse vídeo, e essa música de fundo perfeita!! Amo estudar escutando lofi
Professor, que top… Adorei o tutorial… Na verdade, oq eu estava atrás mesmo, era de uma forma de editar o cabeçalho e o rodapé do site uma única vez, e essa edição atualizar automáticamente em todas as páginas do site… Essa video aula me abriu muito a mente pra isso… Obg
Parabéns, Foi uma aula muito Boa. Obrigado por compartilhar esse conhecimento.
Achei o o maximo, consegui ir até o final, excelente ditatica, só me deixou com a pulga atras da orelha no final pra tirar o adicionar vazio rs