.jpg)
|
%20-%20Copia.png)
.png)
.png)
📘 PROJETO Gerenciador
de Tarefas Inteligente
🧱 Estrutura HTML
Criaremos a base no HTML — simples, sem dependências externas.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Gerenciador de Tarefas Inteligente</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 20px;
transition: 0.3s ease;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.dark {
background: #121212;
color: #f1f1f1;
}
h1 {
font-size: 24px;
}
input, button, select {
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background: #0077ff;
color: white;
cursor: pointer;
}
button:hover {
background: #005fd4;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
background: #eaeaea;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.5s;
}
li.completa {
text-decoration: line-through;
background-color: #b6f2b6;
}
.fadein {
animation: fadein 1s;
}
@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
.filtros {
margin-top: 15px;
}
.notificacao {
background-color: #0077ff;
color: white;
padding: 10px;
position: fixed;
bottom: 30px;
right: 30px;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<header>
<h1>🧠 Lista de Tarefas Inteligente</h1>
<button id="toggleTema">🌙 Tema</button>
</header>
<section>
<input id="novaTarefa" placeholder="Digite uma nova tarefa">
<button id="adicionar">Adicionar</button>
<div class="filtros">
<label>Filtrar:</label>
<select id="filtro">
<option value="todas">Todas</option>
<option value="pendentes">Pendentes</option>
<option value="completas">Completas</option>
</select>
</div>
<ul id="listaTarefas"></ul>
</section>
<div id="notificacao" class="notificacao"></div>
<script src="app.js"></script>
</body>
</html>
⚙️ Script JavaScript (app.js)
A seguir, todo o coração lógico do aplicativo.
// ==========================
// INICIALIZAÇÃO
// ==========================
const input = document.getElementById("novaTarefa");
const btnAdicionar = document.getElementById("adicionar");
const lista = document.getElementById("listaTarefas");
const filtro = document.getElementById("filtro");
const botaoTema = document.getElementById("toggleTema");
const notificacao = document.getElementById("notificacao");
let tarefas = JSON.parse(localStorage.getItem("tarefas")) || [];
let darkMode = localStorage.getItem("tema") === "dark";
// ==========================
// FUNÇÕES DE AJUDA
// ==========================
function salvarLocal() {
localStorage.setItem("tarefas", JSON.stringify(tarefas));
}
function mostrarNotificacao(msg) {
notificacao.textContent = msg;
notificacao.style.display = "block";
setTimeout(() => notificacao.style.display = "none", 2500);
}
function carregarTema() {
if (darkMode) document.body.classList.add("dark");
}
carregarTema();
// ==========================
// FUNÇÕES PRINCIPAIS
// ==========================
function exibirTarefas(filtroSelecionado = "todas") {
lista.innerHTML = "";
let tarefasFiltradas = tarefas.filter(t => {
if (filtroSelecionado === "pendentes") return !t.completa;
if (filtroSelecionado === "completas") return t.completa;
return true;
});
tarefasFiltradas.forEach((tarefa, indice) => {
const li = document.createElement("li");
li.classList.add("fadein");
if (tarefa.completa) li.classList.add("completa");
li.innerHTML = `
<span>${tarefa.texto}</span>
<div>
<button class="concluir">✔️</button>
<button class="excluir">❌</button>
</div>
`;
// EVENTOS DE INTERAÇÃO
li.querySelector(".concluir").addEventListener("click", () => {
tarefas[indice].completa = !tarefas[indice].completa;
salvarLocal();
exibirTarefas(filtro.value);
});
li.querySelector(".excluir").addEventListener("click", () => {
tarefas.splice(indice, 1);
salvarLocal();
exibirTarefas(filtro.value);
mostrarNotificacao("Tarefa excluída 🗑️");
});
lista.appendChild(li);
});
}
// ==========================
// EVENTOS
// ==========================
// Adicionar tarefa
btnAdicionar.addEventListener("click", async () => {
let texto = input.value.trim();
if (!texto) return mostrarNotificacao("Digite uma tarefa primeiro!");
// Simula carregamento antes de adicionar — async/await
await new Promise(resolve => setTimeout(resolve, 500));
tarefas.push({ texto, completa: false });
salvarLocal();
input.value = "";
exibirTarefas(filtro.value);
mostrarNotificacao("Tarefa adicionada ✅");
});
// Filtrar tarefas
filtro.addEventListener("change", e => exibirTarefas(e.target.value));
// Alternar Tema
botaoTema.addEventListener("click", () => {
document.body.classList.toggle("dark");
darkMode = document.body.classList.contains("dark");
localStorage.setItem("tema", darkMode ? "dark" : "light");
});
// ==========================
// INÍCIO
// ==========================
(async function iniciar() {
console.log("Iniciando app...");
await new Promise(resolve => setTimeout(resolve, 1000));
console.log("Carregamento concluído ✅");
exibirTarefas();
})();
⚡ Recursos Aplicados no Projeto
|
Recurso |
Onde foi usado |
|
Variáveis e Constantes |
Controle de estado e DOM |
|
Funções |
Organização modular |
|
Eventos |
Botões e interações do usuário |
|
DOM |
Criação e atualização da lista |
|
LocalStorage |
Armazenar tarefas e tema |
|
Condicionais (if/else) |
Validação e filtros |
|
Loops |
Percorrer lista de tarefas |
|
setTimeout / async/await |
Notificações e simulação de carregamento |
|
Temas (classList.toggle) |
Alternância claro/escuro |
|
CSS Animations |
Efeito suave na renderização |
|
JSON |
Conversão de dados |
🧮 Funcionamento Resumido
●
Cada tarefa tem:
{ texto: "Estudar JavaScript", completa: false }
●
São salvas automaticamente no LocalStorage;
●
A exibição é filtrada pelo <select> com três modos;
●
O botão ✔️ marca/desmarca conclusão;
●
O botão ❌
remove;
●
O botão 🌙 alterna tema e guarda a escolha;
●
Uma notificação automática aparece em cada ação;
●
Um pequeno delay com async/await simula ações de servidor (realismo).
🎨 Expansões Sugeridas
Quer levar esse app ainda mais longe?
Tente implementar:
● Edição do nome de uma tarefa;
● Ordenação de tarefas concluídas no fim da lista;
● Ligação com uma API real (ex: salvar online com fetch());
● Notificações “desktop” (usando Notification API).
🎓 Conclusão Final
Parabéns! 🎉
Você acaba de construir um aplicativo
completo em JavaScript, combinando lógica, interface, armazenamento,
interatividade, tempo e assincronismo —
tudo o que um desenvolvedor real usa no
dia a dia.
Você:
● Aprendeu fundamentos sólidos da linguagem,
● Entendeu a lógica por trás da programação moderna,
● E aplicou conceitos práticos de maneira profissional.
💡 Agora seu próximo passo natural é:
👉 mergulhar em HTML + CSS
avançado e, em seguida, frameworks como React, Vue ou Node.js, onde
tudo o que você aprendeu aqui continuará sendo usado.
📚 Continue aprendendo JavaScript:
🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador
🚀 Etapa 02 👉 Como inserir JavaScript no HTML
🚀 Etapa 03 👉 Variáveis, Tipos de Dados e Comentários
🚀 Etapa 04 👉 Operadores Aritméticos, Relacionais e Lógicos
🚀 Etapa 05 👉 Estruturas Condicionais
🚀 Etapa 06 👉 Laços de Repetição
🚀 Etapa 07 👉 Funções
🚀 Etapa 08 👉 Eventos
🚀 Etapa 09 👉 O DOM
🚀 Etapa 10 👉 Manipulação de Estilos e Classes
🚀 Etapa 11 👉 O DOM: Acessando e Manipulando Elementos HTML
🚀 Etapa 12 👉 Arrays, Objetos e Estruturas de Dados
🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador
.png)
.png)
Postar um comentário