Simple Shopping List In Vanilla Javascript (Free Source Code)

Welcome to a tutorial on how to create a simple shopping list in vanilla Javascript. Nope, I totally did not get the idea for this tutorial from a certain Javascript challenge. It’s original content. 😆 Anyway, a shopping list is totally possible these days with modern Javascript, using the local storage API – That is what we will be using in this guide. Read on to find out!

ⓘ I have included a zip file with all the example 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 The HTML The Javascript
Useful Bits & Links 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.

 

SHOPPING LIST DEMO

 

 

THE HTML

All right, let us now touch on the HTML for the shopping list itself.

 

SHOPPING LIST HTML

shop-list.html
<h1>SHOPPING LIST</h1>
<div id="shop-wrap">
  <!-- (A) ADD NEW ITEM -->
  <form id="shop-form">
    <input type="text" id="shop-item" placeholder="Item Name" required disabled/>
    <input type="submit" id="shop-add" value="Add" disabled/>
  </form>
 
  <!-- (B) SHOPPING LIST -->
  <div id="shop-list"></div>
</div>

The HTML is very straightforward, and we only have 2 sections in the interface:

  1. <form id="shop-form"> – Just a simple, single text field HTML form that we will use to add items to the list.
  2. <div id="shop-list"> – We will use Javascript to dynamically generate the shopping list in this empty container.

That’s all to the HTML page, the rest of the mechanics will be driven by Javascript.

 

 

THE JAVASCRIPT

So far so good? Let us deal with the Javascript next – Not going to explain line-by-line, but let’s walk through the important mechanics.

 

A) SHOPPING LIST INITIALIZATION

shop-list.js
// (A) INITIALIZE SHOPPING LIST
items : [], // current shopping list
hform : null, // html add item <form>
hitem : null, // html add item <input> field
hadd : null, // html add item submit button
hlist : null, // html <div> shopping list
init : () => {
  // (A1) GET HTML ELEMENTS
  slist.hform = document.getElementById("shop-form");
  slist.hitem = document.getElementById("shop-item");
  slist.hadd = document.getElementById("shop-add");
  slist.hlist = document.getElementById("shop-list");
 
  // (A2) "ACTIVATE" HTML ADD ITEM FORM
  slist.hitem.setAttribute("autocomplete", "off");
  slist.hform.onsubmit = slist.add;
  slist.hitem.disabled = false;
  slist.hadd.disabled = false;
 
  // (A3) RESTORE PREVIOUS SHOPPING LIST
  if (localStorage.items == undefined) { localStorage.items = "[]"; }
  slist.items = JSON.parse(localStorage.items);
 
  // (A4) DRAW HTML SHOPPING LIST
  slist.draw();
}
window.addEventListener("load", slist.init);

The first thing that we do on page load is to run the slist.init() function to set up the shopping list. What this function does is very straightforward –

  • (A1 & A2) Get all the related HTML elements, initialize the “add item” form.
  • (A3) Load the previously saved shopping cart from localstorage.items and restore it into slist.items.
  • (A4) Finally, draw the HTML shopping list.

Yep, that’s all. The only thing to take extra here is the slist.items array – This is where we save the raw shopping list data and use it to draw the HTML.

 

 

B & C) ADD ITEM & SAVING INTO LOCAL STORAGE

shop-list.js
// (B) SAVE SHOPPING LIST INTO LOCAL STORAGE
save : () => {
  if (localStorage.items == undefined) { localStorage.items = "[]"; }
  localStorage.items = JSON.stringify(slist.items);
}
 
// (C) ADD NEW ITEM TO THE LIST
add : (evt) => {
  // (C1) PREVENT FORM SUBMIT
  evt.preventDefault();
 
  // (C2) ADD NEW ITEM TO LIST
  slist.items.push({
    name : slist.hitem.value, // item name
    done : false // true for "got it", false for "not yet"
  });
  slist.hitem.value = "";
  slist.save();
 
  // (C3) REDRAW HTML SHOPPING LIST
  slist.draw();
}

Moving on, the slist.add() function is fired whenever the user adds a new item.

  • (C1) Captain Obvious, to stop the HTML form from submitting and reloading the entire page.
  • (C2) Take note of how the new item is being pushed as an object into the slist.items array – { name:"ITEM NAME", done:true/false }
  • (B & C2) Update the localstorage.
  • (C3) Lastly, redraw the updated list.

 

D) DELETE ITEM

shop-list.js
// (D) DELETE SELECTED ITEM
delete : (id) => { if (confirm("Remove this item?")) {
  slist.items.splice(id, 1);
  slist.save();
  slist.draw();
}}

Yep – This should be self-explanatory. Remove a specified item from slist.items, update the localstorage, then update the HTML.

 

 

E) TOGGLE ITEM STATUS

shop-list.js
// (E) TOGGLE ITEM BETWEEN "GOT IT" OR "NOT YET"
toggle : (id) => {
  slist.items[id].done = !slist.items[id].done;
  slist.save();
  slist.draw();
}

This function toggles the “status” of the item between “got it” and “not yet” – Don’t think it needs explanation.

 

F) DRAW SHOPPING LIST HTML

shop-list.js
// (F) DRAW THE HTML SHOPPING LIST
draw : () => {
  // (F1) RESET HTML LIST
  slist.hlist.innerHTML = "";
 
  // (F2) NO ITEMS
  if (slist.items.length == 0) {
    slist.hlist.innerHTML = "<div class='item-row item-name'>No items found.</div>";
  }
 
  // (F3) DRAW ITEMS
  else {
    for (let i in slist.items) {
      // ITEM ROW
      let row = document.createElement("div");
      row.className = "item-row";
      slist.hlist.appendChild(row);
 
      // ITEM NAME
      let name = document.createElement("div");
      name.innerHTML = slist.items[i].name;
      name.className = "item-name";
      if (slist.items[i].done) { name.classList.add("item-got"); }
      row.appendChild(name);
 
      // DELETE BUTTON
      let del = document.createElement("input");
      del.className = "item-del";
      del.type = "button";
      del.value = "Delete";;
      del.onclick = () => { slist.delete(i); };
      row.appendChild(del);
 
      // COMPLETED/NOT YET BUTTON
      let ok = document.createElement("input");
      ok.className = "item-ok";
      ok.type = "button";
      ok.value = slist.items[i].done ? "Not Yet" : "Got It";
      ok.onclick = () => { slist.toggle(i); };
      row.appendChild(ok);
    }
  }
}

Lastly, don’t let this slist.draw() function intimidate you. It may look massive, but all it does is loop through slist.hlist and create the HTML – Which we already went through in all of the above sections.

 

 

EXTRA) SHOPPING LIST HTML

<div class="item-row">
  <div class="item-name">1 bag of sugar</div>
  <input type="button" class="item-del" value="Delete"/>
  <input type="button" class="item-ok" value="Got It"/>
</div>

If you are wondering – This is an example of what the above slist.draw() generates into <div id="shop-list">.

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

This shopping 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 want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Simple Shopping List In Vanilla Javascript (Free Source Code)”

Leave a Comment

Your email address will not be published. Required fields are marked *