Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

1. Brief Introduction
2. Run screenshot
3. Code introduction
4. Summary

1. Brief Introduction

After learning HTML, CSS and some JS, the blogger also used some spare time to write a Demo about a simple JS application. The main application is a Todolist (similar to a notepad) that can add, delete, modify and query data, and use localStorage to achieve local persistent storage of data. Let's continue reading for details.

2. Run screenshot

insert image description here

Enter the content into the input box:

insert image description here

After adding, it will be added to the unfinished column by default:

insert image description here

Modify the items just added:

insert image description here

Modification successful:

insert image description here

Set the successfully modified items as completed:

insert image description here

Delete "eating" and "sleeping":

insert image description here

3. Code introduction

Without further ado, here's the code:

HTML part:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" />
	</head>
	<body>
		<!-- header -->
		<div id="header">
			<label class="text">TodoList</label>
			<input id="todo" class="head" type="text" placeholder="Please enter your to-do items">
			<button id="add" class="add" onclick="add()">Add</button>
		</div>
		<!-- content -->
		<div id="container">
			<h1 class="title">Unfinished</h1>
			<span id="todocount"></span>
			<ol id="todolist">
			</ol>
			<h1 class="title">Completed</h1>
			<span id="donecount"></span>
			<ol id="donelist">
			</ol>
		</div>
	</body>
	<script type="text/javascript" src="index.js"></script>
</html>

It is mainly divided into two parts, one is the header input box, and the other is the content display part. Todocount and donecount indicate the number of unfinished and completed items, and list displays specific items. There is no such item by default, so items are added and displayed in js.

CSS part:

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #b8c9ff;
}

#header {
	margin: 0 auto;
	font-size: 50px;
	width: 700px;
	text-align: center;
	height: 150px;
}

.title {
	display: inline-flex;
}

.head {
	-webkit-appearance: none;
	border-radius: 25px;
	width: 500px;
	height: 60px;
	box-shadow: 5px 5px 10px #556677;
	border: 1px solid #556677;
	font-size: 30px;
	padding-left: 25px;
	outline: 0;
	margin: 0 auto;
	display: inline-flex;
}

.add {
	width: 80px;
	height: 50px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	float: right;
	margin: 20px 0 0;
	font-size: 20px;
}

#container {
	margin: 0 auto;
	width: 700px;
	height: 150px;
}

.del {
	width: 120px;
	height: 70px;
	border-radius: 25px;
	outline: 0;
	border: 1 solid #556677;
	font-size: 20px;
	display: flex;
	margin: 0 auto;
}

ol {
	margin-top: 20px;
	margin-bottom: 20px;
}

ol li {
	width: 600px;
	height: 30px;
	background-color: #fff;
	list-style: none;
	text-align: center;
	font-size: 20px;
	border-radius: 25px;
	margin-top: 10px;
	padding: 10px;
	box-shadow: 5px 5px 10px #556677;
}

ol li span {
	float: left;
}

ol li button {
	float: right;
	width: 70px;
	height: 30px;
	margin-top: 0px;
	margin-left: 10px;
	border-radius: 25px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.del1 {
	background-color: #f40;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
}

.edit {
	background-color: royalblue;
	border-radius: 25px;
	width: 50px;
	height: 30px;
	box-shadow: 5px 5px 10px #556677;
	outline: 0;
	color: #FFFFFF;
}

#todocount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

#donecount {
	width: 30px;
	height: 30px;
	background-color: #FFFFFF;
	display: inline-block;
	border-radius: 50%;
	float: right;
	font-size: 1em;
	margin-top: 10px;
	text-align: center;
	line-height: 30px;
}

I won’t go into details about the CSS part here. The blogger thinks he has done a great job. If you have done it, you can optimize it yourself.

JS part:

window.addEventListener("load", load); //Call the load function after the page is loaded, that is, the initialization of the page document.getElementById("todo").onkeypress = function (event) {
	if (event.keyCode === 13) {/*13 means press Enter*/
		add(event);
	}
};
var todolist;//define global variables function load() { //Function to load all items var todo = document.getElementById("todolist");//Get DOM element var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = ""; //Set the initial value var donecontent = "";
	var todocount = 0;
	var donecount = 0;
	var list = localStorage.getItem("todolist"); //Get the local todolist data if (list != null) { //When it is not empty todolist = JSON.parse(list); //Convert JSON object to JS object } else {
		todolist = []; // empty }
	if (todolist != null) {
		for (var i = 0; i < todolist.length; i++) {//Traverse the todolist that has been converted into a js object
			if (todolist[i].done == false) {//done is false, which means it is not completed yet todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>Modify</button>" + 
				 "<button click=" + "del(" + i + ") class='del1'>Delete</button>" +
				"<button οnclick=" + "changedone(" + i + ")>Confirm completion</button>"
				 + "</li>"; //Concatenate the string for later use todocount++; //Increase the number of unfinished items by one } else {
				donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>Modify</button>" +
				"<button click=" + "del(" + i + ") class='del1'>Delete</button>" + 
				"<button οnclick=" + "changetodo(" + i + ")>Cancel completion</button>"
				+ "</li>";
				donecount++; //The number of completed items plus one }
		}
		todo.innerHTML = todocontent;//Add content to the tag represented by todo done.innerHTML = donecontent;//Add content to the tag represented by done todonum.innerHTML = todocount;//Add content to the tag represented by todonum donenum.innerHTML = donecount;//Add content to the tag represented by donenum } else { //When todolist is empty todo.innerHTML = "";
		done.innerHTML = "";
		todonum.innerHTML = 0;
		donenum.innerHTML = 0;
	}
}

function add(e) { //Function to add items var newtodo = {
		todo: "", //Content entered by the user done: false //done indicates whether the task is completed };
	var temp = document.getElementById("todo").value; //Use temp to store the value of the todo tag if (temp.length == 0 && temp.trim() == "") { //When the input is empty alert('The input item cannot be empty');
		return;
	}
	var flag = confirm('Are you sure you want to add this item?'); //Pop up a confirmation box if(flag){//Choose yes newtodo.todo = temp; //Assign the temp value to the todo attribute of the newtodo object todolist.push(newtodo); //Add an object to todolist document.getElementById("todo").value = ""; //Initialize the input box save(); //Save alert('Added successfully');
	}else{
		alert('Operation error');
		return ;
	}
}

function changedone(i){ //Change unfinished items to completed var flag = confirm('Are you sure you want to complete this item?');
	if(flag){
		todolist[i].done = true; //Change the done status save();
		alert('Modification successful');
	}else{
		alert('Operation error');
		return ;
	}
}

function changetodo(i){ //Change completed items to uncompleted var flag = confirm('Are you sure you want to cancel the task?');
	if(flag){
		todolist[i].done = false; //Change the done status save();
		alert('Modification successful');
	}else{
		alert('Operation error');
		return ;
	}
}

function edit(i) { //Modify the content of the item var temp = prompt("Please enter the content you want to modify", todolist[i].todo); 
	if(temp != null && temp.trim() != ""){//When the content is not empty after modification todolist[i].todo = temp; //Modify content alert('Modification successful');
		save();
	}else{
		alert('The input string is empty, modification failed');
	}
}

function del(i) { //Delete the corresponding item var flag = confirm('Are you sure you want to delete this item?');
	if(flag){
		todolist.splice(i, 1); //Delete the specified element save();
		alert('Deleted successfully');
	}else{
		alert('Operation error');
		return ;
	}
}

function save(){ //Function to save items localStorage.setItem("todolist", JSON.stringify(todolist)); //Convert JS object into JSON object and save it locally load(); //Refresh the page after each save}

The main use of this demo is the js part, so the comments in the code here are relatively comprehensive, mainly including several functions for adding, deleting, modifying and checking, as well as some initialization precautions and the use of persistent data. It should be noted that after each modification or addition, the content must be saved and reloaded, otherwise the content will not be updated in time. Also, if you copy the code directly here, there may be some differences in style due to different devices. The blogger here has not done cross-device processing.

4. Summary

This demo allowed me to apply most of the knowledge I had learned before, and I also reviewed some forgotten knowledge points in the process of practice. Although this demo was not particularly perfect and I encountered some information searching in the process, I still gained a lot overall. I also recommend that many newbies who are just starting to learn the front-end should do some demos in time after completing the first stage. After all, practice is more important in programming.

This is the end of this article about how to make a simple TODOLIST (notepad) with HTML+CSS+JS. For more relevant todolist operation examples, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: