today we will create a basic todo app to understand the basics of javascript. In this web app, one can create notes and delete like Google Keep or Evernote. basic setup : create three files for html,css and javascript. To create these files run command $ .html .css .js touch index index index now edit file step 1 : index.html todo &nbsp;&nbsp;&nbsp; TODO APP &nbsp;&nbsp;&nbsp; <!DOCTYPE html> < = = > html lang "en" dir "ltr" < > head < = > meta charset "utf-8" < > title </ > title < = = > link rel "stylesheet" href "index.css" </ > head < > body < > h1 </ > h1 < = > div class "container" < = > div class "box" < = = = = /> input type "text" name "add" placeholder "todo-item" id "box" < = = = /> input type "button" value "add" onclick "add_item()" < = > ul id "list_item" </ > ul </ > div </ > div < = = > script type "text/javascript" src "index.js" </ > script </ > body </ > html now time to add some css , edited file. step 2 : index.css * { : ; : ; : border-box; : cursive; } { : ; : auto; } { : center; : ; : ; : underline; } { : flex; : center; : center; } { : lightgrey; : solid black; : ; : ; : auto; : auto; : inline-block; : black; : ; : ; } { : center; : ; : ; } { : ; : ; } { : ; : uppercase; : bolder; } { : lightblue; : ease-out; } { : lleft; : ; : ; : ; : circle; } { :red; : ; : ease; : pointer; } padding 0 margin 0 box-sizing font-family body background #f2f2f2 overflow h1 text-align margin 5% font-size 3rem text-decoration .container display align-items justify-content .box background border 1px padding 3% width 50% height overflow display box-shadow 0px 5px 25px margin-bottom 3% border-radius 5% input text-align padding 4% border 0 input [type="text"] margin-left 5% width 70% input [type="button"] padding 4% 6% 4% 6% text-transform font-weight input [type="button"] :hover background transition 1s ul text-align padding-left 10% padding 7% font-size 2rem list-style li :hover color margin 4% transition 1.5s cursor edit index.js file to add some functionality step 3 : { item = .getElementById( ); list_item = .getElementById( ); (item.value != ){ make_li = .createElement( ); make_li.appendChild( .createTextNode(item.value)); list_item.appendChild(make_li); item.value= make_li.onclick = { .parentNode.removeChild( ); } } { alert( ); } } //function called while clicking add button ( ) function add_item //getting box and ul by selecting id; let document "box" let document "list_item" if "" //creating element and adding value to it let document "LI" document //adding li to ul //reset the value of box "" //delete a li item on click ( ) function this this else //alert msg when value of box is "" empty. "plz add a value to item" it is live at link
