window.onload=()=>{ (function(){ const taskList = document.querySelector('ul'); const completedList = document.querySelector('#completed-task'); const editTask = document.querySelector('#edit-task'); const cover = document.querySelector('.cover'); const editedInfo = document.querySelector('#edited-info'); const editedDate = document.querySelector('#edited-date'); const editedName = document.querySelector('#edited-item'); let editedListItem; /* Update: February 6, 2019 --> Number of Tasks Tracker */ const counter = document.querySelector('#counter'); /* Update: February 8, 2019 --> Search Tasks*/ const searchBar = document.getElementById('search'); let exampleTask = document.querySelector('#task-list li'); // Cleaning up my code --> Storing repeated pieces of code inside functions const taskCounter = () => { let numberOfTasks = taskList.children.length - 1; counter.textContent = numberOfTasks; }; document.querySelector('button').addEventListener('click', function(e) { /* Preventing Page Default Page Refresh*/ e.preventDefault(); /* Grabbing User Input */ let userInput = document.querySelector('input').value; let userDate = document.getElementById('date').value; let userInfo = document.getElementById('userInfo').value; // Update: June 20, 2019. Adding start date. const now = new Date(); const time = dateFns.format(now, 'MMMM D, YYYY'); /* Creating Elements */ let listItem = document.createElement('li'); listItem.innerHTML = `

${userInput}

Started: ${time}

Due: ${userDate}

${userInfo}

`; /* Adding Elements to List */ taskList.appendChild(listItem); taskCounter(); }); document.querySelector('#task-list').addEventListener('click',function(event){ if(event.target.className == 'material-icons default') { event.target.parentElement.parentElement.parentElement.remove(); taskCounter(); } }); document.querySelector('#completed-task').addEventListener('click',function(event){ if(event.target.className == 'material-icons default') { event.target.parentElement.parentElement.parentElement.remove(); } }); /* Update: February 4, 2019 --> Hide Tasks Checkbox */ document.forms['hide-task'].addEventListener('change', function(event){ const checkbox = document.querySelector('input[type="checkbox"]'); if (checkbox.checked === true) { taskList.style.display = 'none'; } else { taskList.style.display = 'block'; } }); taskList.addEventListener('click', function(event){ if (event.target.className == 'material-icons complete') { completedList.appendChild(event.target.parentElement.parentElement.parentElement); taskCounter(); } if (event.target.className == 'material-icons edit') { event.preventDefault(); editTask.style.display = 'flex'; cover.style.display = 'block'; editedDate.value = event.target.parentElement.previousElementSibling.previousElementSibling.firstElementChild.textContent; editedInfo.value = event.target.parentElement.previousElementSibling.textContent; editedName.value = event.target.parentElement.parentElement.previousElementSibling.firstElementChild.textContent; editedListItem = event.target.parentElement.parentElement.parentElement; } }); // Update: February 5, 2019 --> Updates the Task Content document.querySelector('#change').addEventListener('click', function(event){ event.preventDefault(); editedListItem.firstElementChild.firstElementChild.textContent = editedName.value; editedListItem.lastElementChild.firstElementChild.nextElementSibling.firstElementChild.textContent = editedDate.value; editedListItem.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling.textContent = editedInfo.value; editTask.style.display = 'none'; cover.style.display = 'none'; }); // Update: February 8, 2019 --> Search Bar searchBar.addEventListener('keyup', function(event){ const term = event.target.value.toLowerCase(); const tasks = taskList.getElementsByTagName('li'); Array.from(tasks).forEach(function(task){ const title = task.firstElementChild.textContent; if (title.toLowerCase().indexOf(term) != -1) { task.style.display = 'block'; } else { task.style.display = 'none'; } }) }); })(); };

JavaScript To Do List - Version 2.3.2