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