How to do Simple Calculations in Javascript--like build a booking app

One of the exciting things about being a front-end developer is turning non-interactive page elements to ones the user can interact with. This is one of the reasons why I've stuck with the front end.

Let's say you have a list of movies and you want your simple JavaScript app to be able to retrieve data(such as the price) from that select field and display it somewhere on a page. Say you also have a list of 'taken seats', 'available seats' which will soon turn into 'taken seats'. You'll need to find a way to make the prices be connected somehow with those seats in order to reflect the true state of things. That is if a seat is taken and the movie selected is worth ten dollars, you'd want this to be reflected somewhere.

So, how do we do that?

First, say you have a select field that has values such as:

<select id="movie">
            <option value="10">Up North($10)</option>
            <option value="12">King of Boys $(12)</option>
            <option value="8">Merry Men ($8)</option>
       </select>

As you can see, each option has a value which corresponds to the text in between them(values 10,12,8 respectively).

To get the value, we'll need to store them somewhere in a variable.

We can start by targeting the select element and saving it somewhere like so:

const movieSelect = document.getElementById("movie");

Getting the value would then be a matter of saying:

let ticketPrice = +movieSelect.value;

The plus sign is added because the value is stored as a string and in JavaScript, you can change the string value by wrapping the value in a parseInt function or adding the plus sign in front of it.

Now, let's imagine that we have in our html created six row of seats. I used the font awesome seat code of

<i class="fas fa-chair"></i>

A sample seat code looks like this:

            <div class="seat">
                <i class="fas fa-chair available"></i>
            </div>

Now, say the yellow chairs represent occupied seats which you hardcode with CSS and that the blue chairs are from toggling the blue class when a user selects from one of the available white chairs, how would you go about achieving this?

In JavaScript, it is usually more efficient to target the parent elements or containers of the elements that we want to filter out. My rows are all in a container, so I can set up an event listener that listens on the container when it is clicked only for elements that are the chair and are not occupied:

container.addEventListener("click", (e) => {
  if (
    e.target.classList.contains("fa-chair") &&
    !e.target.classList.contains("occupied")
  ) {
    e.target.classList.toggle("selected");
    updateSelectedCount();
  
  }
});

Notice the updateSelectedCount function which will soon be created.

My chairs all had the class of 'fa-chair' and the class of 'occupied' were added already to the ones I wanted displayed as yellow once the page loaded. The class of 'selected' is what has the blue seat color.

So how then do we get the number of selected seats and the price we have selected to be displayed in say a

<p>  element 

that states 'You have selected [so and so] number of seats for a price of [so and so?]

Say our

 <p> element 

was written with the following classes and id's in the html:

<p class="text">You have selected <span id="number">0</span> seats for a price of $0</span></p>

And further targeted in the DOM with the following variable names:

const numberOfSelected = document.getElementById("number");
const total = document.getElementById("total");

We can create another function called updatedselectedCount like so:

function updateSelectedCount() {
  const selectedSeats = document.querySelectorAll(".row .fa-chair.selected");
  const selectedSeatsCount = selectedSeats.length;
  numberOfSelected.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount * ticketPrice;
}

But so far, the option values are not adjusted when the user changes them. They remain at whatever initial value we had, which in this case is:
Up North($10)

To change that we do the following:

 movieSelect.addEventListener("change", (e) => {
  ticketPrice = +e.target.value;
  updateSelectedCount();
});

And that's how to get a simple app running. This is without local storage included. Remember, local storage is where you can store data so it remains the same on page refresh. So far, our app will not retain any information if you refresh the page. I'll show you how to add local storage in the next article.

I wrote this after watching 20 Web Projects With Vanilla JavaScript
by Traversy Media on Udemy