Privacy & Policy

ads

pop ads

Build A Simple TO-DO App using Javascript

benrobo April 08, 2021

 ​


Hey guys welcome back, in this article you would learn how to build a simple Todo list application using Html, Css, javascript, Bootstrap, Localstorage were all items added would be stored on the browser localstorage temporary .

As you may know, A to-do list is a list of tasks you need to complete or things that you want to do and in our design [Todo List App], at first, there is a content-box that holds only the input field with some buttons and text. When you entered some characters and click on the add button, the list will be added to your tasks list and the number of the pending tasks also updated. You can also delete each list by clicking on the x icon

Shutup giff

For reference, i ensure you eitheir copy the code below step by step or clone / download the code from my github repository Todo App Download Link

Okk enough talking let now dive in.

let begin giff

 

STEP 1

kk, Now simply use any text editor of your choice, and create a folder called  CSS & JS. This 2 folders would contain both our css files and javascript files. also make sure you have boostrap downloaded for easy styling if not download it fom here.Bootstrap Link . Now create a new file called index.html. this file would hold our html files along with some external css and boostatrap link.




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo App</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <div class="todo-container container">
      <h2>TODO APP</h2>

      <div class="todo-cont">
        <form class="cont form-group">
          <input type="text" placeholder="Enter key word" class="form-control inp">
          <button class="btn btn-success add">Add</button>
        </form>

        <table class="table table-striped">
        </table>
      </div>
    </div>

    <script src="js/index.js"></script>
  </body>
</html>

Easy and self explanatory right. Now let preview this in our browser





As you can see, it not looking nice enough, now let add our css to make it look good.

STEP 2: Adding Css Codes

 

body{
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    background: rgb(112, 243, 204) !important;
}

input[type="text"]{
  width: 300px;
}
.navbar{
  width: 100%;
  height: 55px;
  background: #000;
  margin-bottom: 20px;
}
.navbar .search{
  border-radius: 30px;
  width: 300px;
  margin: 0px auto;
}
.todo-container{
  margin: 0px auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cont{
    width:500px;
    height: 70px;
    background: #fff;
    box-shadow: 0px 0px 7px #000;
    padding: 12px;
    display: flex;
    flex-wrap:nowrap;
    position: relative;
}
.cont .add{
    float: right;
    position: absolute;
    left: 70%;
    width: 20%;
}

.table{
    width: 500px !important;
}
.table td{
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 4px grey;
    width: 500px !important;
    margin-top: 6px !important;
}
.table td{
    margin-top: 10px !important;
}
.table tr{
    cursor: pointer;
}
.close{
    padding: 5px;
    background-image:linear-gradient(red,red);
    color: #fff;
    cursor: pointer;
}

.checked{
    text-decoration: line-through;
}

 

And wala, we got this.



Giff clapping

 

STEP 3: POWER OF JAVASCRIPT.

Just building the interface without any functionality is useless, so now let begin with the javascript aspect were we add the functionality of adding items to the DOM. But first let understand what the dom is and how it work.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. ... The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

 Now let begin with our code

let search = document.querySelector('.search');
let inp = document.querySelector('.inp');
let addbtn = document.querySelector('.add');
let tbl = document.querySelector('.table');
let close = document.createElement('span')
// function so add list to table
addbtn.addEventListener('click', function(e){
  e.preventDefault();

  addListToTbl()
})

function addListToTbl(){
  let closet = document.querySelector('span')
  let close = document.createElement('span')
  let tr = document.createElement('tr');
  let td = document.createElement('td');
  tr.setAttribute('class', 'tr')
  td.setAttribute('class', 'td')
  td.innerHTML = inp.value;
  close.setAttribute('class', 'close')
  close.textContent = "x";
    // remove child element
  close.addEventListener('click', ()=>{
    tbl.removeChild(tr)
  })
  
  if (inp.value == "") {
    tbl.removeChild(tr)
  } else {
    td.appendChild(close)
  tr.appendChild(td);
  tbl.appendChild(tr)
  }
  inp.value = "";

  tr.addEventListener('click', function(){
    td.classList.toggle('checked')
  })
}

having all this, let begin by running our code in browser and see how it works.

After adding items to the DOM



 

After Deleting item from the DOM
 



And that how you build a TO-DO list application in javascript.

we did it

 

If you enjoy this considering sharing this post to your friends.

wishing you happy coding.

​

Post a Comment

0 Comments