DEV Community

Cover image for Mastering Javascript: Building An Interactive Shopping List App.
Pauline Oraro
Pauline Oraro

Posted on

Mastering Javascript: Building An Interactive Shopping List App.

Javascript is the backbone of modern web development. It empowers developers to create dynamic and interactive web applications that can engage users in various ways. In this blog post we will embark on a journey to master Javascript by building a practical web application: an interactive shopping list app. Whether you are a beginner or an experienced developer looking to enhance your Javascript skills, this project will help you gain valuable insights into the language core concepts. You can view the live demo here.

Table of contents

Setting up the project

Before diving into coding ensure that you have;

  • A code editor (codepen, visual studio code or any of your choice).

  • A web browser.

  • A basic understanding of HTML, CSS and Javascript.

HTML Structure

Start by building the foundation of your shopping list app with HTML. A typical structure might include;

<div id="header">
  <h1>Shopping List &#128221;</h1>
  <h2>Add what you will buy</h2>
  <input id="inputText" type="text">
  <button onclick="addToList()">ADD</button>
  <ul id="list"></ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling with CSS

Make your app visually appealing by styling it with CSS. You can design your shopping list however you like, but here is an example, I used SCSS.

body{
  background-color: #171515;
  font-size: 1.35em;
  #header{
    background-color: #6F5B3E;
    margin: 30px auto;
    padding: 20px 20px 30px;
    text-align: center;
    h1{
      font-family: cursive;
      text-decoration-line: underline;
    } 
    h2{
      font-family: cursive;
    } 
    #inputText{
      font-size: 1.15em;
      font-family: monospace;
      padding: 8px;
      width: 50%;
      background-color: #F9F6F0;
      border: 3px solid #F9F6F0;
      border-radius: 10px; 
    } 
    button{
      font-size: 1.15em;
      font-family: monospace;
      font-weight: bolder;
      padding: 5px;
      margin-left: 20px;
      border: 3px solid #F9F6F0;
      border-radius: 10px;
      background-color: #F9F6F0;
    } 
    #list{
      list-style-type: none;
      margin: 20px auto;
      padding:0;
      font-family: monospace;
      font-size: 1.15em;
    } 
    li{
      font-weight: bold;
      padding: 10px;
    } 
    li:nth-child(even) {
      background-color: #C4AE78;
    } 
    li:nth-child(odd) {
      background-color: #F9F6F0;
    } 
    span.close{
      position: absolute;
      right: 0;
      padding-right: 30px;
      cursor: pointer;
    }
  } 
} 
Enter fullscreen mode Exit fullscreen mode

Javascript Structure

This Javascript code defines a function named "addToList()" and adds an event listener to the "document.body" to handle the removal of items from a shopping list when the "X" button is clicked. Let us break down the code;

//add value to list item 
function addToList() {
  //get value from input
  var value=document.getElementById("inputText").value;
  //alert that the text box is empty 
  if(value === "") {
    alert("To add an item type its name into the box") 
  } else {
    //create list item element
    var li=document.createElement("li");
    var textNode =document.createTextNode(value);
    //append value to the list element
    li.appendChild(textNode);
  document.getElementById("list").appendChild(li);
    li.className="item";
    //add X to each list element
    var close=document.createElement("span");
    var closeNode=document.createTextNode("X");
    close.appendChild(closeNode);
    li.appendChild(close);
    close.className="close";
  } 
} 
//have X remove list item when clicked
document.body.addEventListener("click", function(event){
  if(event.target.className == "close") 
    event.target.parentElement.style.display="none"
} );
Enter fullscreen mode Exit fullscreen mode

Function addToList()
This function is called when the "ADD" button is clicked as indicated by the onclick attribute in the HTML code below.

<button onclick="addToList()">ADD</button>
Enter fullscreen mode Exit fullscreen mode

It performs the following actions;

  • The variable named value
 var value=document.getElementById("inputText").value;
Enter fullscreen mode Exit fullscreen mode

This line retrieves the value entered in the input field with the id "inputText" and stores it in the value variable.

  • if structure
if(value === "") {
    alert("To add an item type its name into the box") 
  } else {
    //create list item element
    var li=document.createElement("li");
    var textNode =document.createTextNode(value);
    //append value to the list element
    li.appendChild(textNode);
  document.getElementById("list").appendChild(li);
    li.className="item";
    //add X to each list element
    var close=document.createElement("span");
    var closeNode=document.createTextNode("X");
    close.appendChild(closeNode);
    li.appendChild(close);
    close.className="close";
  } 
Enter fullscreen mode Exit fullscreen mode

It checks if the "value" is an empty string. If the input is empty it displays an alert message instructing the user to type the name of the item into the input box.
If the input is not empty, the function proceeds to create a new list item "(<"li">)" element, appends the entered text to it, adds a close button represented by an "X" and appends this list item to the unordered list "(<"ul">)" with the id called list.

Event listener

document.body.addEventListener("click", function(event){
  if(event.target.className == "close") 
    event.target.parentElement.style.display="none"
} );
Enter fullscreen mode Exit fullscreen mode

It listens for clicks anywhere on the page and executes the provided function when a click event occurs. The function takes an "event" object as a parameter.

  • It checks if the clicked element has a class name equal to "close" which corresponds to the "X" button.

  • If the clicked element has the "close" class, it sets the "style.display" property of the parent element (the list item) to none effectively hiding the list item from view.

Conclusion

In summary this Javascript code allows users to add items to a shopping list by entering text in an input field and clicking the "ADD" button. Each item is added as a list item with a corresponding "X" button to remove it. The event listener on the document body ensures that when the "X" button is clicked the corresponding list item is hidden from view. You can view the live demo here

Top comments (2)

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

Good Job , keep going

Collapse
 
paulineoraro profile image
Pauline Oraro

I will, thank you.