<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Space+Mono&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Ceep</title>
</head>
<body>
<div class="app">
<div class="todo-list">
<h1 class="title">
Ceep
</h1>
<form class="form" action="">
<input class="form-input" type="text" data-form-input>
<button class="form-button" data-form-button> Novo Item </button>
</form>
<ul class="list" data-list>
</div>
<script type="module" src="main.js"></script>
</body>
</html>import BotaoConclui from './componentes/concluirTarefa'
import BotaoDeleta from './componentes/deletarTarefa'
const criarTarefa = (evento) => {
evento.preventDefault(); //Cancela o evento padrão.
const lista = document.querySelector('[data-list]');
const input = document.querySelector('[data-form-input]');
const valor = input.value;
const tarefa = document.createElement('li');
tarefa.classList.add('task');
const conteudo = `<p class="content">${valor}</p>`;
tarefa.innerHTML = conteudo;
tarefa.appendChild(BotaoConclui());
tarefa.appendChild(BotaoDeleta());
lista.appendChild(tarefa);
input.value = " ";
};const novaTarefa = document.querySelector('[data-form-button]');
novaTarefa.addEventListener('click', criarTarefa);
´´´´
const BotaoDeleta = () => { //criando o botao deletar. const botaoDeleta = document.createElement('button');
botaoDeleta.innerHTML = 'deletar';
botaoDeleta.addEventListener('click', deletarTarefa);
return botaoDeleta;}
const deletarTarefa = (evento) => { //criando o evento deletar. const botaoDeleta = evento.target; const tarefaCompleta = botaoDeleta.parentElement; tarefaCompleta.remove();
return botaoDeleta;}
export default BotaoDeleta;
´´´
//concluir tarefas.
const BotaoConclui = () => { //criando o botao concluir.
const botaoConclui = document.createElement('button');
botaoConclui.classList.add('check-button');
botaoConclui.innerText = "Concluir";
botaoConclui.addEventListener('click', concluirTarefa)
return botaoConclui;
}
const concluirTarefa = (evento) => { //criando o evento concluir.
const botaoConclui = evento.target;//botaoConclui capturamos qual elemento foi clicado.
const tarefaCompleta = botaoConclui.parentElement; //utilizamos a propriedade parentElement para subir um nó na árvore- capturar a LI, pai do botao.
tarefaCompleta.classList.toggle('done'); //colocamos o método toggle que vai adicionar a classe done quando clicarmos no botão.
}
export default BotaoConclui
