{"id":67837,"date":"2019-08-14T16:39:52","date_gmt":"2019-08-14T11:09:52","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=67837"},"modified":"2019-08-16T08:55:53","modified_gmt":"2019-08-16T03:25:53","slug":"javascript-project-to-do-list","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/","title":{"rendered":"JavaScript Project &#8211; How to Create a To-do List using JavaScript Code"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1449,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/LOOP_(programming_language)&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250927062939\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/LOOP_(programming_language)&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:14:25&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-12-19 19:32:20&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-08 15:44:19&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-19 03:14:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-23 03:50:13&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-05 15:08:46&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-10 14:23:57&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-25 03:28:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-06 20:09:43&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-24 12:32:59&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-04-03 06:21:59&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-06 17:59:29&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-30 09:53:28&quot;,&quot;http_code&quot;:429},{&quot;date&quot;:&quot;2026-05-06 06:01:45&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-06-05 08:13:49&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-05 08:13:49&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p style=\"text-align: center\"><span style=\"color: #ff6600\"><em><strong>\u201cRename your &#8216;To-do&#8217; list to your &#8216;Opportunities&#8217; list. Each day is a treasure chest filled with limitless opportunities; take joy in checking many off your list\u201d<\/strong> <\/em><\/span><\/p>\n<p style=\"text-align: right\">&#8211; Steve Maraboli<\/p>\n<p>After completing the <em><strong><a href=\"https:\/\/data-flair.training\/blogs\/javascript-project-countdown-timer\/\">JavaScript project on countdown timer<\/a><\/strong><\/em>, we will work on a more significant project than we have before. We will create a beautiful page that works with a To-do list. It is one of the most common projects for developers, and you must know how to build one. There are many ways to create a To-do list using JavaScript, but I am going to discuss the best approach that I feel is the most efficient. So let\u2019s begin the 3rd project of the JavaScript tutorial series designed by DataFlair with understanding what this JavaScript project is all about.<\/p>\n<h2>JavaScript Project on To-do List<\/h2>\n<p>The project is a single webpage containing different list items and a text area to add custom tasks. The \u201cAdd\u201d button lets the user add an object to the list. We have the facility to check the items from the list or remove them if we want. If we wish, we can clear all the list items with a single button. It is a very user-friendly and user-interactive project that makes the work of a user a lot easier.<\/p>\n<h3>1. Getting Started with HTML<\/h3>\n<p>The first step of our JavaScript project (as always\ud83d\ude1d) is adding HTML. The HTML file will contain all the elements we need to show on our page when it loads. The document also includes the location of our CSS and JavaScript files that we will create in the further sections. The following is the content of your HTML file. You can edit these elements as you like and get the result in the browser.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\\to do list.css\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n\r\n    &lt;div class=\"header\"&gt;\r\n      &lt;h2 style=\"margin:5px\"&gt;To Do List&lt;\/h2&gt;\r\n      &lt;input type=\"text\" id=\"myInput\" placeholder=\"Title...\"&gt;\r\n      &lt;span onclick=\"newElement()\" class=\"addBtn\"&gt;Add&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;ul id=\"myUL\"&gt;\r\n      &lt;li class=\"checked\"&gt;Go through DataFlair's JavaScript tutorials&lt;\/li&gt;\r\n      &lt;li&gt;Practise the codes&lt;\/li&gt;\r\n      &lt;li&gt;Read a book on JavaScript&lt;\/li&gt;\r\n      &lt;li class=\"checked\"&gt;Organise my notes&lt;\/li&gt;\r\n      &lt;li&gt;Create JavaScript projects&lt;\/li&gt;\r\n      &lt;li&gt;Take quiz&lt;\/li&gt;\r\n      &lt;li&gt;Comprehend interview questions&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;button type=\"button\" id=\"clear-list\" onclick=\"removeAll()\"&gt;Clear Items&lt;\/button&gt;\r\n\r\n    &lt;script type=\"text\/javascript\" src=\"js\\to do list.js\"&gt;&lt;\/script&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67894\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code.jpg\" alt=\"JavaScript project to-do list HTML Code\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>The webpage will look as follows with the HTML file:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67895\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output.jpg\" alt=\"JavaScript project to-do list HTML Output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-HTML-Output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>2. Making the webpage attractive<\/h3>\n<p>The next step is adding CSS in the webpage. To do that, create a new file in the text editor, copy the code below in the file, then save it with the name \u2018to do list.css\u2019. You can vary the file location of the file, but remember, it is standard procedure to save the CSS and JavaScript files in separate folders to avoid confusion.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">body {\r\n  margin: 10px auto;\r\n  min-width: 250px;\r\n  max-width: 50%;\r\n  background-color: silver;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\nul li {\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding: 12px 8px 12px 40px;\r\n  list-style-type: none;\r\n  background: #eee;\r\n  font-size: 18px;\r\n  transition: 0.2s;\r\n\r\n  \/* make the list items unselectable *\/\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n\/* Set zebra-stripes: all odd list items to a different color *\/\r\nul li:nth-child(odd) {\r\nbackground: #f9f9f9;\r\n}\r\nul li:hover {\r\n  background: #ddd;\r\n}\r\nul li.checked {\r\n  background: teal;\r\n  color: white;\r\n  text-decoration: line-through;\r\n}\r\nul li.checked::before {\r\n  content: '';\r\n  position: absolute;\r\n  border-color: #fff;\r\n  border-style: solid;\r\n  border-width: 0 2px 2px 0;\r\n  top: 10px;\r\n  left: 16px;\r\n  transform: rotate(45deg);\r\n  height: 15px;\r\n  width: 7px;\r\n}\r\n\r\n\/* Style the close button *\/\r\n.close {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\r\n  padding: 12px 16px 12px 16px;\r\n}\r\n\r\n.close:hover {\r\n  background-color: crimson;\r\n  color: white;\r\n}\r\n.header {\r\n  background-color: crimson;\r\n  padding: 30px 40px;\r\n  color: white;\r\n  text-align: center;\r\n}\r\n.header:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\ninput {\r\n  margin: 0;\r\n  border: none;\r\n  border-radius: 0;\r\n  width: 75%;\r\n  padding: 10px;\r\n  float: left;\r\n  font-size: 16px;\r\n}\r\n.addBtn {\r\n  padding: 10px;\r\n  width: 25%;\r\n  background: #d9d9d9;\r\n  color: #555;\r\n  float: left;\r\n  text-align: center;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n  transition: 0.3s;\r\n  border-radius: 0;\r\n}\r\n.addBtn:hover {\r\n  background-color: #bbb;\r\n}\r\n#clear-list{\r\n  width: 30%;\r\n  font-weight: bold;\r\n  font-style: italic;\r\n  font-size: xx-large;\r\n  font-family: \"Times New Roman\";\r\n  margin: 40px 35%;\r\n  background-color: darkblue;\r\n  color: white;\r\n}\r\n#clear-list:hover{\r\n  background-color: blue;\r\n  color: white;\r\n}<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67896\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code.jpg\" alt=\"JavaScript project to-do list CSS code\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67897\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output.jpg\" alt=\"JavaScript project to-do list CSS output\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-CSS-output-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>3. Implementing the Complete JavaScript code<\/h3>\n<p>The styling of the webpage is perfect. It is time to change the page from static to dynamic. We will achieve this task with the help of JavaScript. First of all, let\u2019s create a JavaScript file \u2018to do list.js\u2019 and save the following code in the file.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">\/\/ Create a \"close\" button and append it to each list item\r\nvar myNodelist = document.getElementsByTagName(\"LI\");\r\nvar i;\r\nfor (i = 0; i &lt; myNodelist.length; i++) {\r\n  var span = document.createElement(\"SPAN\");\r\n  var txt = document.createTextNode(\"\\u00D7\");\r\n  span.className = \"close\";\r\n  span.appendChild(txt);\r\n  myNodelist[i].appendChild(span);\r\n}\r\n\r\n\/\/ Click on a close button to hide the current list item\r\nvar close = document.getElementsByClassName(\"close\");\r\nvar i;\r\nfor (i = 0; i &lt; close.length; i++) {\r\n  close[i].onclick = function() {\r\n  var div = this.parentElement;\r\n  div.style.display = \"none\";\r\n  }\r\n}\r\n\r\n\/\/ Add a \"checked\" symbol when clicking on a list item\r\nvar list = document.querySelector('ul');\r\nlist.addEventListener('click', function(ev) {\r\n  if (ev.target.tagName === 'LI') {\r\n  ev.target.classList.toggle('checked');\r\n  }\r\n}, false);\r\n\r\n\/\/ Create a new list item when clicking on the \"Add\" button\r\nfunction newElement() {\r\n  var li = document.createElement(\"li\");\r\n  var inputValue = document.getElementById(\"myInput\").value;\r\n  var t = document.createTextNode(inputValue);\r\n  li.appendChild(t);\r\n  if (inputValue === '') {\r\n  alert(\"You must write something!\");\r\n  } else {\r\n    document.getElementById(\"myUL\").appendChild(li);\r\n  }\r\n  document.getElementById(\"myInput\").value = \"\";\r\n\r\n  var span = document.createElement(\"SPAN\");\r\n  var txt = document.createTextNode(\"\\u00D7\");\r\n  span.className = \"close\";\r\n  span.appendChild(txt);\r\n  li.appendChild(span);\r\n\r\n  for (i = 0; i &lt; close.length; i++) {\r\n    close[i].onclick = function() {\r\n        var div = this.parentElement;\r\n        div.style.display = \"none\";\r\n    }\r\n  }\r\n}\r\n\r\n\/\/Clearing the list\r\nfunction removeAll(){\r\n  var lst = document.getElementsByTagName(\"ul\");\r\n    lst[0].innerHTML = \"\";\r\n}<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67898\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code.jpg\" alt=\"JS project to-do list JavaScript Code\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-JavaScript-Code-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Run the HTML file after adding the JavaScript file. See what happens and what features you have. Next, we will break this code in small, understandable functions. We will master the concepts used and learn how to achieve different tasks. All the functions are easy to understand; you only need to be attentive. Work with the individual functions with me to get the hang of what\u2019s happening.<\/p>\n<h3>4. Working with the close (x) button<\/h3>\n<p>The first loop in the code (used with the <strong>myNodelist<\/strong> variable) creates a close button, works through every list item, and appends the button at the end of each item. It uses the JavaScript method <strong>appendChild()<\/strong> to achieve this task. The button provides us with the facility to remove any list item from the browser\u2019s display.<\/p>\n<p>The second <a href=\"https:\/\/en.wikipedia.org\/wiki\/LOOP_(programming_language)\">loop<\/a> in the code (used with the <strong>close<\/strong> variable) removes the list item from the browser window. If you search the browser\u2019s Elements tab, you will find that the item is still there. The reason is that we cannot delete an item from the code until we modify the DOM tree. But you need to be careful when you use DOM manipulation because it can slow down your program\u2019s execution. Thus, in this program, we only set the <strong>display<\/strong> of the element as \u201c<strong>none<\/strong>\u201d. This property of an element prevents it from being displayed in the browser window.<\/p>\n<p>In the webpage, the user can add or remove the <strong>text-decoration<\/strong> from the text with a single click. The conditional statement monitors the proper working of the <strong>checked<\/strong> class.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67900\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button.jpg\" alt=\"JavaScript project to-do list close x button\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-close-x-button-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Notice that the close button changes color when I hover over it. Also, I removed the check from \u201c<strong>Organise my notes<\/strong>\u201d and checked out \u201c<strong>Create JavaScript projects<\/strong>\u201d.<\/p>\n<p><em><strong>Not able to recall the JavaScript DOM concept? Don&#8217;t worry, revise it from <a href=\"https:\/\/data-flair.training\/blogs\/javascript-dom\/\">JavaScript DOM Tutorial<\/a><\/strong><\/em><\/p>\n<h3>5. Adding a new element<\/h3>\n<p>The user can add a new element to our list by using the \u201cAdd\u201d button on the page. We used the JavaScript function<strong> newElement()<\/strong> for that purpose. Let us say I want to add a new item in the list: \u201cResearching JavaScript libraries and frameworks\u201d. After I type the text in the text area and click the \u201cAdd\u201d button, the browser will display a page like this:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67899\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element.jpg\" alt=\"JavaScript project to-do list add element\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Notice that the Add button added the new list item at the end of the list. You can add a code that allows you to add your elements at a specific position, but it isn\u2019t always necessary. But what if I clicked the Add button without writing anything in the list? Will it add an empty list item? No, the <a href=\"https:\/\/data-flair.training\/blogs\/javascript-conditional-statements\/\"><em><strong>JavaScript<\/strong><strong> conditional statement<\/strong><\/em><\/a> in the function helps us with that. The browser will show this if we try to set an empty element:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-67901 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2.jpg\" alt=\"JavaScript project to-do list add element 2\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-project-to-do-list-add-element-2-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p style=\"text-align: center\"><em><strong><span style=\"color: #ff6600\">\u201cSubtracting from your list of priorities is as important as adding to it.\u201d<\/span> <\/strong><\/em><\/p>\n<p style=\"text-align: right\">&#8211; Frank Sonnenberg<\/p>\n<h3>6. Removing all the elements<\/h3>\n<p>The user can empty the list if he\/ she wishes to with the help of the \u201c<strong>Clear Items<\/strong>\u201d button at the end of the list. This button will not only remove the items from the browser window but also the Elements window. This button works with the help of the <strong>removeAll()<\/strong> function that empties the &lt;ul&gt; tag, that is, it sets the content of the tag to null. If we use the button, the output will look something like this:<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67902\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll.jpg\" alt=\"JS project to-do list removeAll\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JS-project-to-do-list-removeAll-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<p>Notice that the &lt;ul&gt; tag is empty when you inspect the element using the shortcut <strong>Ctrl + Shift + I<\/strong> in the Elements window.<\/p>\n<h2>Summary<\/h2>\n<p>In this JavaScript tutorial, we made a beautiful project on To-do list. We used various functions to achieve different outcomes in our program. Now that you have a better understanding of the procedures you need to follow to create a webpage, you are ready to build more advanced projects.<\/p>\n<p><em><strong>Get your dream job by practicing these <a href=\"https:\/\/data-flair.training\/blogs\/javascript-interview-questions\/\">Top JavaScript Interview Questions<\/a><\/strong><\/em><\/p>\n<p><em>Questions regarding\u00a0To-do List in JavaScript? Share your views in the comment section. Keep visiting <strong>DataFlair<\/strong> for regular updates.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cRename your &#8216;To-do&#8217; list to your &#8216;Opportunities&#8217; list. Each day is a treasure chest filled with limitless opportunities; take joy in checking many off your list\u201d &#8211; Steve Maraboli After completing the JavaScript project&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":67956,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20845,20868,20869],"class_list":["post-67837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript-project","tag-javascript-to-do-list","tag-to-do-list-from-javascript-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Project - How to Create a To-do List using JavaScript Code - DataFlair<\/title>\n<meta name=\"description\" content=\"Wondering, how to design To-do list with JavaScript? Here is JavaScript project defining the best &amp; efficient way to create To-do list using JavaScript code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Project - How to Create a To-do List using JavaScript Code - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Wondering, how to design To-do list with JavaScript? Here is JavaScript project defining the best &amp; efficient way to create To-do list using JavaScript code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-14T11:09:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-16T03:25:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Project - How to Create a To-do List using JavaScript Code - DataFlair","description":"Wondering, how to design To-do list with JavaScript? Here is JavaScript project defining the best & efficient way to create To-do list using JavaScript code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Project - How to Create a To-do List using JavaScript Code - DataFlair","og_description":"Wondering, how to design To-do list with JavaScript? Here is JavaScript project defining the best & efficient way to create To-do list using JavaScript code.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-14T11:09:52+00:00","article_modified_time":"2019-08-16T03:25:53+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Project &#8211; How to Create a To-do List using JavaScript Code","datePublished":"2019-08-14T11:09:52+00:00","dateModified":"2019-08-16T03:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/"},"wordCount":1111,"commentCount":4,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg","keywords":["JavaScript Project","JavaScript To-do list","To-do list from JavaScript Code"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/","url":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/","name":"JavaScript Project - How to Create a To-do List using JavaScript Code - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg","datePublished":"2019-08-14T11:09:52+00:00","dateModified":"2019-08-16T03:25:53+00:00","description":"Wondering, how to design To-do list with JavaScript? Here is JavaScript project defining the best & efficient way to create To-do list using JavaScript code.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Project-To-do-List-.jpg","width":802,"height":420,"caption":"JavaScript Project - How to create To-do List using JavaScript Code"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Project &#8211; How to Create a To-do List using JavaScript Code"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=67837"}],"version-history":[{"count":6,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67837\/revisions"}],"predecessor-version":[{"id":67957,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/67837\/revisions\/67957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/67956"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=67837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=67837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=67837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}