DOM
DOMuser_4880986512
javascript
2 years ago
3.2 kB
2
Indexable
Never
const todos = []; const RENDER_EVENT = 'event-todo'; document.addEventListener(RENDER_EVENT, function(){ console.log(todos); const uncompletedTODOList = document.getElementById('todos'); uncompletedTODOList.innerHTML = ''; for(const todoItem of todos) { const todoElement = makeTodo(todoItem); if(!todoItem.isComplated){ uncompletedTODOList.append(todoElement); } } }); document.addEventListener("DOMContentLoaded", function(){ const submitForm = document.getElementById('form'); submitForm.addEventListener('submit', function(event){ event.preventDefault(); addTodo(); }) }) function generateToObject (id, task, timeStamp , isComplated) { return{ id, task, timeStamp, isComplated } } function generateId(){ return +Date(); } function addTodo(){ const textTodo = document.getElementById('title').value; const timeStamp = document.getElementById('date').value; const generateID = generateId(); const todoObject = generateToObject(generateID, textTodo, timeStamp, false); todos.push(todoObject); document.dispatchEvent(new Event(RENDER_EVENT)); } function findTodo(todoId){ for (const todoItem of todos){ if(todoItem.id === todoId) { return todoItem; } } return null; } function addTaskToCompleted (todoId){ const todoTarget = findTodo(todoId); if (todoTarget == null) return; todoTarget.isComplated = true; document.dispatchEvent(new Event(RENDER_EVENT)); } function makeTodo(todoObject){ const textTitle = document.createElement('h2'); textTitle.innerText = todoObject.task; const textTimestamp = document.createElement('p'); textTimestamp.innerText = todoObject.timeStamp; const textContainer = document.createElement('div'); textContainer.classList.add('inner'); textContainer.append(textTitle, textTimestamp); const container = document.createElement('div'); container.classList.add('item', 'shadow'); container.append(textContainer); container.setAttribute('id', `todo${todoObject.id}`); if(todoObject.isComplated){ const undoButton = document.createElement('button'); undoButton.classList.add('undo-button'); undoButton.addEventListener('click', function(){ undoTaskFromCompleted(todoObject.id); }); const trashButton = document.createElement('button'); trashButton.classList.add('trash-button'); trashButton.addEventListener('click', function(){ removeTaskFromCompleted(todoObject.id); }); container.append(undoButton, trashButton); }else { const checkButton = document.createElement('button'); checkButton.classList.add('check-button'); checkButton.addEventListener('click', function(){ addTaskToCompleted(todoObject.id); }); container.append(checkButton); } return container; }