Build a dynamic star-rating system using vanilla JavaScript
Wondering how possible?
Now, borrow me your 4 minutes for a ride.
What you need to know to build this simple system;
html, css, Javascript, DOM manipilation.
We will start by creating a simple html document or page.
In this simple html page, apart from the document basic structure, there’s unorder list and list items in it that contains html entity characters for printing a star-shape within the text content of the list items.
A division to hold the output from user interactions and a script tag that will aid me point to my external javascript file.
our HTML is ready and set for our system.
Now let’s move quickly and style our page for a better layout and look.
If you were keen enough, you learnt that we added class attribute to the elements in our html page. I have used classes to style my page as shown in this snippet. I have used html style tag in the head section to style my html page but you may also decide to create an external css and link link using the link element.
That said and done, Let’s move to the script for functionality.
On the script above, We only want to perform an action on the page once the DOM content is loaded so we start by listening to the DOMContentLoaded event of the document object.
Once loaded, It calls my callback function which is passed as an argument to the event listener. In the function ratingStars, we have a for loop that is looping over the html collection of elements with a class of star.
Notice we are calling a function ratingStarElement in the for loop with length property because we have ratingStarElement function that returns HTMLCollenction which looks like an array and have a length property just like an array and it’s iterable.
Inside the for loop, we are adding an event listener that listen for any click event on each element with a star-shape which invokes a ratingStarClickHander function and binds the arguments when there’s any click action.
The function takes two parameters, index and event :-
index — the position of the li item clicked in the collection (zero based indexing)
event — action from user, click action for our case.
The first if statement checks if the event is true — event can only be true when it happened, then we identify the element clicked, we get the parent then get all it’s children , the target element siblings. The parent siblings returns an HTMLCollection.
We loop through all the childrent and remove the class orange if the have.
In the second if statement, we’re checking if the target element clicked does not have a previous sibling — you may not have a previous sibling only if you’re the first.
If it’s not the first child, then we’ll add orange class to all the sibling elements that came before the target element and the target element itself.
Otherwise, we’ll just add the class to the target element alone.
— target element:— this is the html element on which an action occurred.
Becasue we said that index in the HTMLCollection is 0-based, and rating starts from 1 through 5, we must add 1 to the index of the item that is clicked every time to get the expected result.
Finaly, We call addTextContent function that takes two arguments: — classname, and text.
This function returns text content added to the HTML element of the specified class and it also invokes another function that returns an html element with a specified class.
Now were done and we can finaly test our code: —
Thank you for reading this beginner blog and that’s all I had for you today, until next time.
