What are ratings abc (Simple Guide to Understanding)

Alright, so I wanted to mess around with creating a simple rating system, like you see on e-commerce sites. I figured I’d call it “ratings abc” just to keep it simple for myself. I’ve seen a few different approaches, but I wanted to try building one from scratch to really understand how it works.

Getting Started

First, I thought about the basic elements I’d need. Obviously, I needed some stars! I decided to go with a five-star system because, well, that’s pretty standard. I also needed a way to store the rating value. I decided to keep things in memory, for now, just focused on it.

Building the Stars

To actually show the stars, I used simple HTML elements. I created five `span` elements, each representing a star. Then used a simple “★” character to display star, and also used “☆” to represent a empty star.

☆
☆
☆
☆
☆

The Logic

The core of it is pretty straightforward.

When a user clicks on a star, I grab that star’s position (1 to 5).

Then, I iterate through all the star elements, and update, if its position is less than or equal to the clicked star’s position, I fill it in (change the star from empty to filled):

For example, if star’s position less then 3, then display ★★★☆☆.

Putting It All Together

I ended up with a basic, functional rating system. It’s not super fancy, but it works! I can click the stars, and it visually updates to reflect the selected rating. I’ve got a way to get the rating value, I can display the current rating when the page first * might not win any design awards, but it’s a solid starting point.