To-Do-List Using JavaScript

Hello Friends, today in this blog you’ll learn how to create To Do List App Using HTML, CSS & JavaScript.

If you’re a frontend web developer then this will be your first project to create a To do list app using Javascript. And it’s a amazing project to add in your portfolio or resume. So in today’s blog we’ll create this amazing project and i’m sure after watching our tutorial you can easily create a To Do List App using Javascript.

Video Tutorial of Creating To-Do-List App Using JavaScript

In the video you’ve seen that using simple HTML, CSS & JavaScript we’ve easily create a To-Do-List App. In HTML code we’ve create a simple input box and add a onclick event and add a button after that using CSS we’ve design complete page like using some basic properties of CSS. After designing we’ve to add functioning using JavaScript. In Javascript we’ve use some simple properties like DOM, loops, creating variables & events and finally we’ve easily create an amazing To-Do-List App. For better understanding must checkout the video tutorial.

So, enjoy the tutorial & learn something new today 🙂

To-Do List App Using JavaScript [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="To%20Do%20List.js"></script>
  </head>
  <body>
    <div id="mydiv" class="header">
      <h2>TO DO LIST</h2>
      <input type="text" id="myInput" placeholder="Title.." />
      <span onclick="newElement()" class="addbtn"> ADD</span>
    </div>
    <ul id="myul"></ul>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body {
  margin: 0;
  padding: 0;
  min-width: 250px;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 25px;
  transition: 0.2s;
  user-select: none;
}
ul li:nth-child(odd) {
  background: #f9f9f9;
}
ul li:hover {
  background: #ddd;
}
.header h2 {
  font-size: 40px;
  font-family: sans-serif;
  text-transform: uppercase;
  padding-bottom: 5px;
  margin: 5px;
}
.header {
  text-align: center;
  background-color: #00b867;
  color: white;
  padding: 30px 40px;
}
.header::after {
  content: "";
  display: table;
  clear: both;
}
input {
  border: none;
  width: 75%;
  padding: 10px;
  font-size: 18px;
  box-sizing: border-box;
  float: left;
}
.addbtn {
  padding: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.addbtn:hover {
  background-color: #f44336;
  color: #fff;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}
.close:hover {
  background-color: #f44336;
  color: white;
  transform: scale(1.2);
  transition: 0.5s linear;
}

Third, create a JavaScript file with the name of script.js and paste the given codes in your Javascript file. you’ve to create a file with .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 = "";

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";
    }
  }
}

DOWNLOAD SOURCE CODE FILES

SUBSCRIBE TO OUR YOUTUBE CHANNEL FOR MORE SUCH AMAZING TUTORIALS !!!