Todo List App — JavaScript
3 min readOct 15, 2020
Simple Todo List with JavaScript, nice way you can brush up your skills.
You must have understanding of below things:
- DOM manipulation with JavaScript
- Bootstrap
- HTML 5 web storage (local Storage here, for data persistence)
- IIFEs to register your listeners
- Revealing modular pattern if you plan to break the features in different modules
If this sounds simple to you also, try this in within 2 hours, I personally made this in 2 hours.
Tasks to cover
- Add new todo task
- Delete added todo task
- Delete complete added todo task list
- Update persisted data in local storage when todo task is deleted
- Update persisted data in local storage when all todo tasks are cleared
- Validations as required
Stop here and first try to complete above 6 tasks by your own, else you have the complete code link at the below mentioned GitHub gist link
GitHub gist Link : https://gist.github.com/bhuwanpandey7/9adf0ea4949afbf7eb2be7fc2c07270e
Here is sample snapshot
HTML
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="todo.css"><title>Document</title></head><body><div class="container mt-2" style="margin-left: 30% !important;"><div class="row"><div class="center col-12"><div class="card w-50 justify-content-right"><div class="card-header"><h4 class="h4">New Task</h2><input type="text" id='newTask' name='newTask' class="form-control border-top-0 border-left-0 border-right-0" placeholder="Enter task here..."><button type="button" class="btnAddTask btn btn-sm btn-success float-right mt-2"><i class="fa fa-plus" aria-hidden="true"></i> Add Task</button></div><div class="card-body"><h3 class="h3">Task List</h3><ul class="addedTasks" id="addedTasks"><hr></ul></div><div class="card-footer"><button type="button" class="btnClearTasks btn btn-sm btn-danger float-right"><i class="fa fa-trash-o" aria-hidden="true"></i> Clear Tasks</button></div></div></div></div></div></body><script src="dataPersistance.js"></script><script src="constants.js"></script><script src="todo.js"></script></html>
JS- Breakdown of JS in different files is in the GitHub gist link given at the top
const NoTaskAdded = "No tasks added to the list";let addedTasksList = [];function setDataToLocalStorage(key, data) {localStorage.setItem(key, stringify(data));}function getLocalStorageData(key) {return JSON.parse(localStorage.getItem(key));}function clearLocalStorageData(key) {localStorage.clear();}function removeLocalStorageItem(key) {localStorage.removeItem(key)}function updateLocalStorageData(key, data) {if (key)localStorage.removeItem(key);localStorage.setItem(key, stringify(data));}function stringify(data) {return JSON.stringify(data);}function parse(data) {return JSON.parse(data);}(() => {let firstLoad = true;// new task input boxconst newTaskInput = document.querySelector('#newTask');// add new task buttonconst btnAddTask = document.querySelector('.btnAddTask');// addedTasks list boxconst addedTasks = document.querySelector('.addedTasks');// addedTasks.innerHTML = NoTaskAdded;// btn Clear Tasksconst btnClearTasks = document.querySelector('.btnClearTasks');// event listener to add new taskbtnAddTask.addEventListener('click', addTask);// add event listener to clear all tasksbtnClearTasks.addEventListener('click', clearTasks);// add event listener to remove individual taskaddedTasks.addEventListener('click', removeTask);// load saved tasks event listenerdocument.addEventListener('DOMContentLoaded', loadTasks);// load tasksfunction loadTasks() {const data = getLocalStorageData('addedTasks');if (data && data.length) {data.forEach(element => {createNewTaskItem(element);});}}// clear individual task event listenerfunction removeTask(event) {if (event.target.parentElement.classList.contains('deleteTask')) {if (confirm('Are you sure you want ot remove this task?')) {const taskList = getLocalStorageData('addedTasks');const index = taskList.indexOf(event.target.parentElement.parentElement.textContent.trim());taskList.splice(index, 1);setDataToLocalStorage('addedTasks', taskList);event.target.parentElement.parentElement.remove();} else {return;}}}// clear all tasks event listenerfunction clearTasks() {while (addedTasks.firstChild) {addedTasks.firstChild.remove();}addedTasks.className = 'noTask';}// create individual li for task listfunction createNewTaskItem(newTaskInput) {const liElem = document.createElement('li');liElem.classList.add('ml-4');liElem.appendChild(document.createTextNode(newTaskInput));const delLink = document.createElement('a');delLink.classList.add('deleteTask');delLink.innerHTML = '<i class="fa fa-trash-o float-right ml-8 text-danger"> </i>';liElem.appendChild(delLink);const hr = document.createElement('hr');liElem.appendChild(hr);addedTasks.appendChild(liElem);}// add task event listenerfunction addTask() {if (addedTasks.children.length === 1 && firstLoad) {addedTasks.firstChild.remove();firstLoad = false;}if (newTaskInput.value) {createNewTaskItem(newTaskInput.value);if (getLocalStorageData('addedTasks')) {addedTasksList = getLocalStorageData('addedTasks');addedTasksList.push(newTaskInput.value);updateLocalStorageData('addedTasks', addedTasksList);} else {addedTasksList.push(newTaskInput.value);setDataToLocalStorage('addedTasks', addedTasksList)}newTaskInput.value = '';} else {alert('Enter valid task name');}}})();
CSS
* {margin: 0;padding: 0;}html,body {box-sizing: border-box;font-size: 16px;}.noTask {font-size: smaller;}
Happy Learning !!
