By Shahbaz Alam
This is a To-Do List Application made using HTML, CSS & JavaScript. I have used the Document Object Model (DOM) + JSDOM concept to build this Application.
This is a To-Do List Web App. The Tech stack I used in this project is HTML, CSS, JavaScript. In this project, I have used pure CSS(Cascading Style Sheets ), JAVAScript, and the Document Object Model (DOM) + JSDOM concept. I have included the edit button and delete button in the project, Edit button helps you to edit the task once it has been added. I am attaching the code samples with an explanation.
const container = document.querySelector('.container'); var inputValue = document.querySelector('.input'); const add = document.querySelector('.add'); if(window.localStorage.getItem("todos") == undefined){ var todos = []; window.localStorage.setItem("todos", JSON.stringify(todos)); } var todosEX = window.localStorage.getItem("todos"); var todos = JSON.parse(todosEX); class item{ constructor(name){ this.createItem(name); } createItem(name){ var itemBox = document.createElement('div'); itemBox.classList.add('item'); var input = document.createElement('input'); input.type = "text"; input.disabled = true; input.value = name; input.classList.add('item_input'); var edit = document.createElement('button'); edit.classList.add('edit'); // This code indicate that we are calling edit function used in the project edit.innerHTML = ''; edit.addEventListener('click', () => this.edit(input, name)); var remove = document.createElement('button'); remove.classList.add('remove'); remove.innerHTML = '';
// This code indicate that we are calling remove text function used in the project
remove.addEventListener('click', () => this.remove(itemBox, name)); container.appendChild(itemBox); itemBox.appendChild(input); itemBox.appendChild(edit); itemBox.appendChild(remove); } edit(input, name){ if(input.disabled == true){ input.disabled = !input.disabled; } else{ input.disabled = !input.disabled; let indexof = todos.indexOf(name); todos[indexof] = input.value; window.localStorage.setItem("todos", JSON.stringify(todos)); } } remove(itemBox, name){ itemBox.parentNode.removeChild(itemBox); let index = todos.indexOf(name); todos.splice(index, 1); window.localStorage.setItem("todos", JSON.stringify(todos)); } } add.addEventListener('click', check); window.addEventListener('keydown', (e) => { if(e.which == 13){ check(); } }) function check(){ if(inputValue.value != ""){ new item(inputValue.value); todos.push(inputValue.value); window.localStorage.setItem("todos", JSON.stringify(todos)); inputValue.value = ""; } } for (var v = 0 ; v < todos.length ; v++){ new item(todos[v]); }
l="stylesheet">
Submitted by Shahbaz Alam (Shahbaz07)
Download packets of source code on Coders Packet
Comments