Mastering Javascript: Building An Interactive Shopping List App.
Tags: javascript, tutorial, webdev, programming
Published: 2023-09-16 15:57:57

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](https://codepen.io/Pauline-Oraro/pen/ExOwVJL).

#### Table of contents

- [Setting up the project](#project)

- [HTML Structure](#htmlStructure)

- [CSS Structure](#cssStructure)

- [Javascript Structure](#jsStructure)

- [Conclusion](#conclusion)


## Setting up the project <a name="project"></a>
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 <a name="htmlStructure"></a>
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 <a name="cssStructure"></a>
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 <a name="jsStructure"></a>
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 <a name="conclusion"></a>
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](https://codepen.io/Pauline-Oraro/pen/ExOwVJL)