How to Make a Todo List using JavaScript
Using the HTML and CSS code below, I have created the basic structure for creating this todo list html css. First I designed the webpage using CSS code. Here the width of the box is 450px and min-height: 100px is used. background-color I used white.
*, *:before, *:after padding: 0; margin: 0; box-sizing: border-box; > body height: 100vh; background: #066acd; > .container width: 40%; top: 50%; left: 50%; background: white; border-radius: 10px; min-width: 450px; position: absolute; min-height: 100px; transform: translate(-50%,-50%); > 
Step 2: Create input place and button
Now we have created a button and input space using some amount of HTML code. The width of the input space is 75% and the height is 45px . This button has a width of 20% and a height of 45px.
id="newtask"> type="text" placeholder="Task to be done.."> id="push">Add #newtask position: relative; padding: 30px 20px; > #newtask input width: 75%; height: 45px; padding: 12px; color: #111111; font-weight: 500; position: relative; border-radius: 5px; font-family: 'Poppins',sans-serif; font-size: 15px; border: 2px solid #d1d3d4; > #newtask input:focus outline: none; border-color: #0d75ec; > #newtask button position: relative; float: right; font-weight: 500; font-size: 16px; background-color: #0d75ec; border: none; color: #ffffff; cursor: pointer; outline: none; width: 20%; height: 45px; border-radius: 5px; font-family: 'Poppins',sans-serif; > 
Step 3: Create a place to view information
Now I have made a list in this project where all the tests can be seen. I did not set any specific height for this because you can add as many texts as you want here.
#tasks border-radius: 10px; width: 100%; position: relative; background-color: #ffffff; padding: 30px 20px; margin-top: 10px; > .task border-radius: 5px; align-items: center; justify-content: space-between; border: 1px solid #939697; cursor: pointer; background-color: #c5e1e6; height: 50px; margin-bottom: 8px; padding: 5px 10px; display: flex; > .task span font-family: 'Poppins',sans-serif; font-size: 15px; font-weight: 400; > .task button background-color: #0a2ea4; color: #ffffff; border: none; cursor: pointer; outline: none; height: 100%; width: 40px; border-radius: 5px; > 
Step 4: Enable Todo List JavaScript
Above we have made the basic design of Todo List. Now is the time to implement it with JavaScript. Watch its live demo to learn how it works. First I made this condition using the ‘if’ condition ➤ If you do not input anything in the place of input, then you will see a kind of error message. This message will alert you to input something. For this I have taken the help of alert. ➤ Then I added the above conditions using else. We have determined what kind of work will be done if you input something in the input space. ➤ First I used innerhtml to display all the information added here in the web page. I have already created an area in the webpage. All this information can be found in that area. ➤ We’ve added a delete button that can be found with each text. When that button is clicked, the text will be deleted from the list.
document.querySelector('#push').onclick = function() if(document.querySelector('#newtask input').value.length == 0) alert("Please Enter a Task") > else document.querySelector('#tasks').innerHTML += ` $document.querySelector('#newtask input').value> `; var current_tasks = document.querySelectorAll(".delete"); for(var i=0; icurrent_tasks.length; i++) current_tasks[i].onclick = function() this.parentNode.remove(); > > > > 
I hope you have learned from this tutorial how I created Todo List javascript. Related Post:
- Footer HTML CSS
- Make a Todo List using JavaScript
- Simple Stopwatch using JavaScript
- Javascript Age Calculator
- Random Password Generator with JavaScript
- Automatic Image Slider in Html, CSS
- Sidebar Menu Using HTML CSS
If you want, you can download the source code required to create this project. Be sure to comment on how you like this design.
How TO — Create a To Do List
Learn how to create a «to-do list» with CSS and JavaScript.
The To Do List
Use CSS and JavaScript to create a «to-do list» to organize and prioritize your tasks.
Create The To Do List
Step 1) Add HTML:
Example
My To Do List
Step 2) Add CSS:
Style the header and the list:
Example
/* Include the padding and border in an element’s total width and height */
* box-sizing: border-box;
>
/* Remove margins and padding from the list */
ul margin: 0;
padding: 0;
>
/* Style the list items */
ul li cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) background: #f9f9f9;
>
/* Darker background-color on hover */
ul li:hover background: #ddd;
>
/* When clicked on, add a background color and strike out text */
ul li.checked background: #888;
color: #fff;
text-decoration: line-through;
>
/* Add a «checked» mark when clicked on */
ul li.checked::before content: »;
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
>
/* Style the close button */
.close position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
>
.close:hover background-color: #f44336;
color: white;
>
/* Style the header */
.header background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
>
/* Clear floats after the header */
.header:after content: «»;
display: table;
clear: both;
>
/* Style the input */
input margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
>
/* Style the «Add» button */
.addBtn padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
>
.addBtn:hover background-color: #bbb;
>
Step 3) Add JavaScript:
Example
// Create a «close» button and append it to each list item
var myNodelist = document.getElementsByTagName(«LI»);
var i;
for (i = 0; i < myNodelist.length; i++) var span = document.createElement("SPAN");
var txt = document.createTextNode(«\u00D7»);
span.className = «close»;
span.appendChild(txt);
myNodelist[i].appendChild(span);
>
// Click on a close button to hide the current list item
var close = document.getElementsByClassName(«close»);
var i;
for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement;
div.style.display = «none»;
>
>
// Add a «checked» symbol when clicking on a list item
var list = document.querySelector(‘ul’);
list.addEventListener(‘click’, function(ev) if (ev.target.tagName === ‘LI’) ev.target.classList.toggle(‘checked’);
>
>, false);
// Create a new list item when clicking on the «Add» button
function newElement() var li = document.createElement(«li»);
var inputValue = document.getElementById(«myInput»).value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ») alert(«You must write something!»);
> else document.getElementById(«myUL»).appendChild(li);
>
document.getElementById(«myInput»).value = «»;
var span = document.createElement(«SPAN»);
var txt = document.createTextNode(«\u00D7»);
span.className = «close»;
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement;
div.style.display = «none»;
>
>
>