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 $<span id="total">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:
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
Good luck with your Java Learning dear
Thank you))
Sweet!!!!Sensei teach meeeee!
😀😀 sure thing
Upvoted by GITPLAIT!
We have a curation trial on Hive.vote. you can earn a passive income by delegating to @gitplait
We share 80 % of the curation rewards with the delegators.
To delegate, use the links or adjust 10HIVE, 20HIVE, 50HIVE, 100HIVE, 200HIVE, 500HIVE, 1,000HIVE, 10,000HIVE, 100,000HIVE
Join the Community and chat with us on Discord let’s solve problems & build together.
Thank you for sharing this amazing post on HIVE!
Your content got selected by our fellow curator @tibfox & you just received a little thank you via an upvote from our non-profit curation initiative!
You will be featured in one of our recurring curation compilations and on our pinterest boards! Both are aiming to offer you a stage to widen your audience within and outside of the DIY scene of hive.
Join the official DIYHub community on HIVE and show us more of your amazing work and feel free to connect with us and other DIYers via our discord server!
If you want to support our goal to motivate other DIY/art/music/homesteading/... creators just delegate to us and earn 100% of your curation rewards!
Stay creative & hive on!