Mastering Javascript: Building An Interactive Shopping List App.

#javascript #tutorial #webdev #programming

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.

Setting up the project
HTML Structure
CSS Structure
Javascript Structure
Conclusion

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>

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;
    }
  } 
}

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"
} );

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>

It performs the following actions;

The variable named value

 var value=document.getElementById("inputText").value;

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";
  }

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"
} );

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