To do list JS only

How to create a to do list vanilla js only

A to do list is a great way to keep track of what you need to get done. There are plenty of apps and other tools that offer this functionality, but if you’re a developer or designer looking for something more lightweight that doesn’t require any additional plugins or software downloads, then vanilla js might be the right fit.

Vanilla js is referring to plain javascript. It’s pure javascript code. There is no need for plugins and software. It means no other additional library needed in this code. The pure javascript code is known as Vanilla js.

Let’s begin with to do list of vanilla js. First, we need to create an input filed to create a dynamic to do list vanilla js. For creating a to do vanilla js, we need an input box. so create an input list inside a div. We need to div just because all things are well maintained by our parent div. Then we apply CSS on the div for its look. You can put it as simple or attractive as your need.

Here I m write the code for an attractive input box. Copy the entire code and paste it into your CSS document or CSS file. code is given below

* {
        margin: 0;
        padding: 0;
        transition: 0.1s all linear;
      }
      #mylist,
      .header {
        width: 300px;

        background: slateblue;
        margin-bottom: 50px;
        margin: auto;
        text-align: center;
      }
      ul li {
        list-style: none;
        padding: 10px;
        color: thistle;
      }

      input,
      button,
      button:focus,
      input:focus {
        border: none;
        padding: 10px;
        outline: none;
        margin-bottom: 10px;
      }
      input:hover,
      button:hover,
      li:hover,
      li:hover span {
        background: tomato !important;
        color: snow;
      }

      #myList {
        text-align: left;
        text-transform: capitalize;
        margin-top: 20px;
      }
      ul li:nth-child(even) {
        background: #6a5acdb3;
      }
      ul li:nth-child(odd) {
        background: #4d4c56;
      }
      ul li i {
        margin-right: 10px;
      }
      .clsBtn {
        float: right;
        color: #fff;
        background: royalblue;
        padding: 5px 10px;
        margin: -5px;
      }
      .close {
        display: none;
      }
      [data-title]:hover:after {
        opacity: 1;
        transition: all 0.1s ease 0.5s;
        visibility: visible;
      }
      [data-title]:after {
        content: attr(data-title);
        color: #fff;
        background: royalblue;
        padding: 5px 10px;
        margin: -5px;
        position: absolute;
        bottom: -1.6em;
        left: 100%;
        border: 1px solid #111111;
        z-index: 99999;
        visibility: hidden;
        white-space: nowrap;
      }
      [data-title] {
        position: relative;
      }
      h1 {
        padding: 5px 0;
        color: silver;
      }
      input[type="date"] {
        font-family: "Courier New", Courier, monospace;
      }

When u put the above code in your css file. Add a div to your HTML file. The HTML code is given for to do list vanilla js.

<div class="header">
      <h1>My To do list</h1>
      <input type="text" id="newTask" placeholder="Enter a task " />
      
      <button onclick="creatList()">Add Task</button>
    </div>
<div id="myList"></div>

in above HTML se set the header for the title and also we set input box in header too. Just because it is an experiment. You can put this input every where as you need. Its all depend on ui/ux. And set button for action. The add task button is only for adding the task in our myList div.

Every time u click on add task button u got a new task in our myList container. The div containing id myList is a simple container which gives you new task everytime when u hit the add task button. Now time to put the magic code in javascript. Copy the entire javascript code into your HTML or Javasript file, and see the magic.

 var input = document.getElementById("newTask");
      var myList = document.getElementById("myList");
      myList.style.display = "none";
      ul = document.createElement("ul");
      myList.appendChild(ul);

      function creatList() {
        li = document.createElement("li");
        i = document.createElement("i");
        li.appendChild(i);
        i.className = "fas fa-list-ul";
        var text = document.createTextNode(" " + input.value);
        li.appendChild(text);
        mylist = document.getElementsByTagName("li");
        span = document.createElement("span");
        li.appendChild(span);
        span.innerHTML = "X";
        span.className = "clsBtn";
        myList.style.display = "block";
        ul.appendChild(li);
        span.addEventListener("click", deleteListItem);
        span.setAttribute("data-title", "Delete Itme");
        input.value = "";
      }
      function deleteListItem() {
        this.parentNode.remove();
        if (ul.innerHTML == "") {
          myList.style.display = "none";
        }
      }

In above javascript code we set a var input for access the value of input box. Where user can add thier tasks, and myList is just for showing the input values. Then we need a list for showing each itme in seprate list. So we take a var ul for creating an unordered list.

Then we need a function which works with add task button. in that function we just add some code for creating a list for to do list.

to do list | to do list vanilla js | vanilla js

Advantage of this code, your page speed is boosted. And accessed within a second. Because this is a pure javascript example.

And the disadvantage of this cod is your input box is not validated. So it takes blank value also. if you want to restrict the use of the blank value you must need javascript validation. For more tips and trick Follow this link advance developer

Leave a Comment