Simple Javascript To Do List (Free Download)

Welcome to a tutorial and example on how to create a simple Javascript to-do list. Looking to create a web application without the use of server-side scripts? Yep, you read that right – This is a pure vanilla Javascript to-do list that uses local storage only. No PHP and no database required. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
 

TABLE OF CONTENTS

Download & Demo To-Do List Useful Bits
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

TO-DO LIST DEMO

 

 

PURE JAVASCRIPT TO-DO LIST

All right, let us get into the details of how the Javascript to-do list is being built.

 

PART 1) HTML PAGE

todo.html
<div id="todo-wrap">
  <h1>TO DO LIST</h1>
 
  <!-- (B) ADD NEW ITEM -->
  <form id="todo-add">
    <input type="text" id="todo-item" placeholder="New Item" required/>
    <input type="submit" id="todo-save" value="&#10010;"/>
  </form>
 
  <!-- (B) LIST ITEMS -->
  <div id="todo-list"></div>
 
  <!-- (C) ITEM TEMPLATE -->
  <template id="todo-template">
  <div class="todo-row">
    <input type="button" class="todo-del" value="&#10006;"/>
    <div class="todo-item"></div>
    <input type="button" class="todo-done" value="&#10004;"/>
  </div>
  </template>
</div>

This can be a little “scary” for beginners, but keep calm and look carefully.

  1. Just a simple “add item” HTML form.
  2. An empty <div> to generate the list items.
  3. The template for the items.

Easy.

 

 

PART 2) THE JAVASCRIPT

2A) INITIALIZE TO-DO LIST

todo.js
// (A) INITIALIZE TO DO LIST
data : [], // todo list data array
hAdd : null, // html add item text field
hTemplate : null, // html item row template
hList : null, // html to do list
init : () => {
  // (A1) INIT LOCALSTORAGE
  if (localStorage.todo == undefined) { localStorage.todo = "[]"; }
 
  // (A2) RESTORE PREVIOUS SESSION
  todo.data = JSON.parse(localStorage.todo);
 
  // (A3) GET HTML ELEMENTS
  todo.hAdd = document.getElementById("todo-item");
  todo.hTemplate = document.getElementById("todo-template").content;
  todo.hList = document.getElementById("todo-list");
 
  // (A4) "ENABLE" ADD ITEM FORM
  document.getElementById("todo-add").onsubmit = todo.add;
 
  // (A5) DRAW TO DO LIST
  todo.draw();
},
 
// (G) PAGE INIT
window.addEventListener("load", todo.init);

On window load, todo.init() will run to initialize the to-do list. What it does is straightforward once you trace through it –

  • Get the HTML elements, “enable” the add item form.
  • Load the previous session from localStorage.todo, parse back it into todo.data.
  • By the way, todo.data is an array of arrays to keep our to-do list, in the format of ["ITEM", true if done, false if not].
  • Don’t worry, an easy example to illustrate this – [["Feed doge", true], ["Play with doge", false]]

 

 

2B) DRAW LIST

todo.js
// (B) DRAW TO DO LIST
draw : () => {
  // (B1) RESET LIST
  todo.hList.innerHTML = "";
 
  // (B2) LOOP & GENERATE ROWS
  if (todo.data.length>0) { for (let id in todo.data) {
    let row = todo.hTemplate.cloneNode(true);
    row.querySelector(".todo-item").textContent = todo.data[id][0];
    row.querySelector(".todo-done").onclick = () => { todo.toggle(id); };
    row.querySelector(".todo-del").onclick = () => { todo.del(id); };
    if (todo.data[id][1]) {
      row.querySelector(".todo-item").classList.add("todo-ok");
    }
    todo.hList.appendChild(row);
  }}
}, 

Not much of a mystery here. We are just looping through todo.data and using the HTML template to quickly generate the rows.

 

2C) SAVE, UPDATE, DELETE

todo.js
 // (C) HELPER - SAVE DATA INTO LOCAL STORAGE
save: () => {
  localStorage.todo = JSON.stringify(todo.data);
  todo.draw();
},
 
 // (D) ADD A NEW ITEM TO THE LIST
add : () => {
  todo.data.push([todo.hAdd.value, false]);
  todo.hAdd.value = "";
  todo.save();
  return false;
},

 // (E) UPDATE TODO ITEM DONE/NOT YET
toggle: (id) => {
  todo.data[id][1] = !todo.data[id][1];
  todo.save();
},
 
 // (F) DELETE ITEM
del: (id) => { if (confirm("Delete task?")) {
  todo.data.splice(id, 1);
  todo.save();
}}

Lastly, these series of functions are what drive the data behind the scene. Remember that todo.data is an array that contains all list data? To update, we simply have to push/pop/splice it. Of course, remember to save it into the localStorage, so that it can be retrieved later.

 

 

USEFUL BITS & LINKS

That’s it for all the code, and here are a few small extras that may be useful to you.

 

COMPATIBILITY CHECKS

This to-do list will work on all modern browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Simple Javascript To Do List (Free Download)”

    1. Sorry, I don’t catch your question. todo.data is only an array.

      • todo.add() Pushes a new item into the array.
      • todo.del() Removes the selected item from it.
      • todo.list() Reads the array and constructs the HTML.
      • todo.save() Takes the array and stores it into localStorage.
      • todo.load() Takes data from localStorage and reconstructs the array.

Leave a Comment

Your email address will not be published.