Introdução: Em JavaScript, um aplicativo de tarefas é um projeto de nível iniciante para novos desenvolvedores. Se você quiser aprender JavaScript, ingressar neste aplicativo, pois ele ajuda a dominar os conceitos JavaScript. Se os desenvolvedores formarem esse projeto, você poderá criar facilmente grandes projetos, como um site de portal de empregos, um jogo de cinema etc. Neste artigo, aprenderemos a criar um aplicativo de tarefas usando o Javascript de baunilha sem estruturas e bibliotecas externas. Isso ajuda a mostrar como trabalhar JavaScript com HTML e CSS. Com o uso deste projeto, os usuários executam essas operações, como adicionar novas tarefas, atualizar tarefas, excluir tarefas e salvar dados em dispositivos locais. Por que criar um aplicativo de tarefa? Construir um aplicativo de tarefas usando JavaScript de baunilha é um poderoso desenvolvimento da Web de aprendizado. Algumas das razões são as seguintes: • Todos os conceitos fundamentais: o aplicativo de tarefas inclui os principais tópicos dos aplicativos da Web modernos, como manuseio de eventos, manipulação de DOM, gerenciamento de armazenamento local etc. Usados para construir a estrutura, o CSS adiciona como mostrar sua página interativa e o JavaScript usado para torná -lo um site dinâmico. Construa um aplicativo de tarefa etapa 1) Adicione o arquivo html (index.html): doctype html>

Digite o modo de saída do modo de tela completa Etapa 2) Adicione o arquivo CSS (style.css): / * estilos globais * / corpo {Font-Family: Arial, Sans-Serif; Antecedentes: #f3f3f3; exibição: flex; Justify-Content: Center; Top-top: 60px; margem: 0; } / * Caixa de contêiner * / .Container {Background: #FFF; preenchimento: 30px; Radio de fronteira: 10px; Shadow de caixa: 0 4px 12px rgba (0, 0, 0, 0.1); Largura: 400px; } / * Cabeçalho * / h1 {text-align: Center; Margin-Bottom: 20px; } / * Seção de entrada e botão * / .input-group {display: flex; Gap: 10px; } #tarefa-entrada {flex: 1; preenchimento: 10px; borda: 1px sólido #ccc; Radio de fronteira: 5px; } #add-btn {preenchimento: 10px; Antecedentes: #28A745; Cor: Branco; fronteira: nenhuma; Radio de fronteira: 5px; Cursor: Ponteiro; } #add-btn: hover {background: #218838; } / * Lista de tarefas * / ul {estilo de lista: nenhum; preenchimento: 0; Margin-top: 20px; } li {background: #f8f9fa; preenchimento: 12px; Margin-Bottom: 10px; Radio de fronteira: 5px; exibição: flex; Direcção flexível: coluna; Gap: 8px; Shadow de caixa: 0 2px 5px rgba (0, 0, 0, 0,05); } / * Estilo de tarefa concluído * / li.completed .Task-title {Decoração de texto: linha de linha; Cor: #888; } / * Linha do cabeçalho da tarefa * / .Task-top-ROW {Display: Flex; Justify-Content: Space Between; alinhado-itens: centro; } / * Text * / .Task-title {font-weight: BOLD; tamanho de fonte: 1Rem; Cor: #222; Cursor: Ponteiro; } / * Informações do tempo * / .task-info {font-size: 0.75remm; Cor: #666; } / * Seção de botões * / button.edit, button.delete {preenchimento: 8px; fronteira: nenhuma; Radio de fronteira: 4px; Cursor: Ponteiro; flex: 1; } Button.edit {Background-Color: #ffc107; Cor: preto; } button.edit: hover {background-color: #e0a800; } Button.Delete {Background: Crimson; Cor: Branco; } Button.Delete: Hover {Background: Darkred; } .Task-Buttons {display: flex; Gap: 10px; } / * Responsive * / @media Screen e (max-width: 450px) {.Container {Width: 90%; } .Task-top-ROW {Flex-Direction: Column; Align-itens: Flex-Start; lacuna: 4px; } .Task-Buttons {Flex-Direction: Column; }} Digite Modo de tela FullScreen Modo de tela cheia Etapa 3) Adicione Javascript (script.js) Arquivo: const taskInput = document.getElementById (“entrada de tarefa”); const addBtn = document.getElementById (“add-btn”); const taskList = document.getElementById (“Lista de tarefas”); // Carregar tarefas do localStorage na página Carregar Window.adDeventListener (“DOMCOntentLoaded”, () => {const Tasks = json.parse (LocalStorage.getItem (“Tasks”)) || []; Tasks.ForEach (Task => {CreateTaskElement (Task.Text, Task.completed, Task.addedat, Task.UpDatedAt);}); }); // adicione nova tarefa addbtn.addeventListener (“clique”, () => {const tastText = taskInput.value.trim (); if (taskText! == “”) {const agora = new Date (). }); // Crie e exiba uma função de elemento de tarefa CreateTaskElement (texto, concluído = false, Adicionado = “”, UpdateTat = “”) {const li = document.createElement (“li”); if (concluído) li.classList.add (“concluído”); // Texto da tarefa Span const span = document.createElement (“span”); span.TextContent = text; span.className = “Task-título”; span.addeventListener (“clique”, () => {li.classList.toggle (“concluído”); updateTaskStatus (text);}); // informações de tempo const timeInfo = document.createElement (“pequeno”); timeinfo.className = “Task-info”; timeInfo.textContent = `Adicionado: $ {Adicionado} $ {updatedAt! == Adicionado? `| Atualizado: $ {atualizado} `:” “}`; // linha superior (tarefa + tempo) const toprow = document.createElement (“div”); TOPROW.CLASSNAME = “TASK-TOP-ROW”; TOPROW.APPENDCHILD (SPAN); toprow.appendChild (timeinfo); // botões const editbtn = document.createElement (“botão”); editbtn.TextContent = “Edit”; editbtn.className = “Edit”; editbtn.addeventListener (“clique”, () => {const newText = prompt (“Editar sua tarefa:”, span.textContent); if (newText && newText.trim ()! == “”) {editTask (text, newText.Trim ()); const DeleteBtn = document.createElement (“botão”); Deletebtn.textContent = “excluir”; deletebtn.className = “exclation”; deletebtn.addeventListener (“clique”, () => {li.remove (); removetak (text);}); const btnrow = document.createElement (“div”); btnrow.className = “Task-buttons”; btnrow.appendChild (editbtn); btnrow.appendChild (DeleteBtn); li.appendChild (toprow); li.appendChild (btnrow); TaskList.AppendChild (LI); } // Salvar uma nova tarefa na função localStorage SaveTask (texto, concluída, adicionada, atualizada) {const Tasks = json.parse (localStorage.getItem (“Tasks”)) || []; tarefas.push ({text, concluído, adicionado, atualizado}); LocalStorage.SetItem (“Tasks”, JSON.Stringify (Tasks)); } // alterna completa/incompleto e atualize o timestamp função updataTaskStatus (text) {let tasks = json.parse (localStorage.getItem (“tarefas”) || []; const agora = new Date (). tolocalestring (); Tasks = Tasks.Map (Task => Task.Text === Text? {… Tarefa, Concluído:! Task.completed, UpdatedAt: agora}: tarefa); LocalStorage.SetItem (“Tasks”, JSON.Stringify (Tasks)); Reloadtasks (); } // Edite o texto da tarefa e atualize a função de timestamp EditTask (OldText, newText) {let tasks = json.parse (localStorage.getItem (“Tasks”)) || []; const agora = new Date (). tolocalestring (); Tasks = Tasks.Map (Task => Task.Text === OldText? {… Tarefa, Texto: NewText, UpdateTat: Now}: Task); LocalStorage.SetItem (“Tasks”, JSON.Stringify (Tasks)); Reloadtasks (); } // Remova a tarefa da função LocalSorage RemoveTask (text) {let Tasks = json.parse (localStorage.getItem (“Tasks”)) || []; Tasks = Tasks.Filter (Task => Task.Text! == Text); LocalStorage.SetItem (“Tasks”, JSON.Stringify (Tasks)); } // Lista de atualização da função LocalStorage relloadtasks () {taskList.innerhtml = “”; loadTasks (); } // renderá todas as tarefas da função de armazenamento loadTasks () {const tarefas = json.parse (localStorage.getItem (“tarefas”) || []; Tasks.ForEach (Task => CreateTaskElement (Task.Text, Task.completed, Task.addedat, Task.UpDatedAt)); } Digite o modo de tela fullcreen Sair da tela cheia Saída: Conclusão O aplicativo de tarefas fornece recursos para você adicionar sua tarefa, editar e atualizar a tarefa também. Este aplicativo é criado usando o Javascript de baunilha fornece habilidades principais de desenvolvimento da Web. Ele suporta como manipular o DOM, lidar com eventos e gerenciar o armazenamento local sem o uso de qualquer estrutura e bibliotecas. A estrutura HTML limpa combinada com o estilo CSS mostra seu poder. Sugiro que você aprenda a programação JavaScript no site da TPONTE TECH, pois fornece tutoriais de JavaScript, perguntas da entrevista e todos os seus tópicos relacionados de maneira mais fácil.

Fonte