Todo List App using HTML, CSS & JavaScript

Todo List App using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Todo List App using HTML, CSS & JavaScript.

A todo list is a list of things or tasks that you want to get done or that need to be done. The todo list can be used for many purposes like the task have to be completed, it reminds you that what are all the task that you have not yet completed. You can also add the task that you want to do and, can delete the task if you have completed it.

In this blog(Todo List App), the task can be added in the input box which contains some text and a button. When you enter a task and click on the add button, the task will be added to your tasks lists. You can also delete the task by clicking the cross button if you completed the task. The hover effect is used in the cross button, when you move the mouse over the cross button the color of the cross button changes.

The function of the JavaScript code is to add the task to the list and delete the task while by clicking on the cross button.

The source code of this Todo list App is given below, if you want the source code of this program, you can copy it. You can use this Todo list App with your creativity and can take this project to the next level.

Todo List App [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./style.css"> <title>Todo List App || learningrobo</title> </head> <body> <div class="wrapper"> <div id="myDIV" class="header"> <h2 style="margin:5px">To Do List</h2> <input type="text" id="myInput" placeholder="My Work..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <li>Prepare</li> <li class="checked">Practice</li> <li>Practice Coding</li> <li>Motive yourself</li> <li>Test</li> <li>Analyse yourself</li> </ul> </div> <div class="credit">Made with <span style="color:#072f5f">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


  * {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 250px;
  background-image: linear-gradient(to right bottom, #0093E9, #80D0C7);
  height: 100%;
}
.wrapper{
  background: #fff;
  max-width: 400px;
  width: 100%;
  margin: 45px auto;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  border-radius: 10px;
}
li{
    margin-top: 10px;
}
ul li:nth-child(odd) {
  background: #f9f9f9;
}
ul li:hover {
  background: #ddd;
}
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}
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;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}
.close:hover {
  background-color: #f44336;
  color: white;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.header {
  background: linear-gradient(to bottom right,#21D4FD,#B721FF);
  padding: 30px 40px;
  color: white;
  text-align: center;
  border-radius: 15px;
}
.header:after {
  content: "";
  display: table;
  clear: both;
}
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}
.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;
}
.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
}
.credit a{
    text-decoration: none;
    color: #072f5f;
    font-weight: bold;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


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);
}
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";
  }
}
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);
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 = "hai";

  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"; 
   }
 }  
}
We hope you would like this Todo list App using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome