Coders Packet

TO-Do List Application (HTML,CSS,JS)

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">   

To-DoList

 

 

 

Download Complete Code

Comments

No comments yet