Make A Todo list using javascript example

Feb 13, 2023 By Admin Category: JavaScript   HTML-HTML5   CSS-CSS3  

Hello Guys,

In this article you will learn how to create Todo List using JavaScript. JavaScript Todo List helps you create a list of things you want to do throughout the day. Suppose you want to do something throughout the day that you can list here. Whenever you complete that task then you can delete it.

I have taken HTML, CSS and JavaScript help to create this Todo List. html and css helped to design it and JavaScript made it work.

In this example to first make a inside your project folder to make assets/css/custom.css file

Demo Todo List : Source Code : 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Todo List Pratical</title>
	<link rel="stylesheet" href="assets/css/custom.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>	

</head>
<body>
    
<div class="todoMainDiv">
	<div id="todoDiv" class="header">
	  	<h2 style="padding-top:15px;color: #fff;">Custom To Do List</h2>
	  	<div id="newtask">
	        <input type="text" placeholder="To Do Head...." id="text-value" onclick= "clearInput()">
	        <button id="addTodo">Add</button>
	    </div>
	</div>

	<ul id="todo-ul">
	</ul>
</div>    

<script type="text/javascript">
function clearInput(){
  	var getValue= document.getElementById("text-value");
    if (getValue.value !="") {
        getValue.value = "";
    }
}

function addToDoList() {	
	let array = [];
	let obj = {
	 	name: document.querySelector('#newtask input').value
	};
    array.push(obj);
    appendTodo(obj);
    document.querySelector('#text-value').innerHTML = '';
}

//  appendTodo list
function appendTodo(obj) {
  	const list = document.querySelector('#todo-ul');
  	const liObj = document.createElement("li");

  	liObj.innerHTML = 
  	`<div class="task">
        <span id="todoname">
            ${document.querySelector('#newtask input').value}
        </span>
        <span class="delete">x</span> 
    </div>`; 
	list.append(liObj);
}

document.querySelector('#addTodo').onclick = function(){
    if(document.querySelector('#newtask input').value.length == 0){
        alert("Please Enter Task Name")
    }

    else{
    	addToDoList();
		var delete_todo = document.querySelectorAll(".delete");
    	deleteToDoList(delete_todo);
    }
}

// delete todo list
function deleteToDoList(delete_todo) {
    for(var i=0; i<delete_todo.length; i++){
        delete_todo[i].onclick = function(){
        	var div = this.parentNode;
            div.parentNode.remove();
        }
    }
}

// compleate todo list
var list = document.querySelector('ul');
compleateTodoList(list);
function compleateTodoList(list) {
	list.addEventListener('click', function(ev) {
	  if (ev.target.tagName === 'LI') {
	    ev.target.classList.toggle('checked');
	  }
	}, false);
}
</script>
</body>
</html>

I hope you understand of how to make todo list using javascript...

We are Recommending you

Search

Popular Posts

Random Posts

Categories

Latest Posts

Copyright © 2023 www.RVSolutionStuff.com • All Rights Reserved