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.
- <span>☆</span>
- <span>☆</span>
- <span>☆</span>
- <span>☆</span>
- <span>☆</span>
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.
