DEV Community

Cover image for Project Five: Star Rating

Posted on

Project Five: Star Rating

How many stars would you give to a rating component? I think it deserves all of them!

Think about it: from e-commerce websites to mood diaries those shiny little helpers make a day a little bit brighter.

Ready to take it on?

Star Rating: requirements and recipe

As a user I want to be able to see a visual representation of a rating, so that I can make a quick judgement just by glancing on it.

Here's an example of how it can look like: ⭐⭐⭐⭐⭐.

Though just emojis are unfortunately not enough to meet all the requirements:


  1. It should be possible to render 1,2,3,4 and 5 stars ratings
  2. It should be possible to render ratings in between, rounded to a half (e.g. 4.5)
  3. Both filled and empty stars should have sufficient contrast ratio
  4. Rating should have a title, label or a screen reader specific text
  5. Rating markup should include microdata for search engine snippets


  1. Create a star
  2. Create three versions of it: filled, empty and half-filled (or half-empty, depending on your preference 😁)
  3. Create a static markup for 2.5
  4. Make sure that markup matches all requirements, including accessibility ones
  5. Write a function that would round a rating to the nearest available value and render it
  6. Sprinkle with your favourite framework or leave it as is
  7. Give yourself a 5 star rating!


There are several ways to draw a star with HTML: for example one could use an image, inline SVG or pure CSS.

Hard mode: Star rating input

Now that you have a way to display a rating it would make sense to create an input so that you could get those ratings in when needed.

The hardest part about an input like this is to make it accessible and there's nothing better for it than a built-in HTML element. Unfortunately, there isn't one that would give the visual representation of lined up stars.

With accessibility in mind, think about all the visual feedback you'd like to give users: should you light the stars on hover? Maybe also handle the case when the user is changing one rating to another.

Have fun! And it if's not wild enough, you can join me in implementing a terminal-based star rating input (there's a special sequence of characters you could print to stdout to enable mouse input that I really want to try out 🤩).

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

Buy Me A Coffee

Top comments (4)

mneme profile image
Alex T

I have been trying to figure out on how to let my audience to put review on the travel blog post. or maybe tips

valeriavg profile image

What kind of tech stack are you running travel blog on?

mneme profile image
Alex T

Sorry for the delay. It has been few crazy weeks before holidays.
I have been using OctoberCMS. many ideas sprouting from it also other projects. would love to add in review with 1-5 stars on travel blog with different parameters like "Is it Family-friendly", "Will you go again?", "Will you recommend to Friends", "Worth for value",etc

Thread Thread
valeriavg profile image

I haven't worked with OctoberCMS, but I'm guessing you'd need to implement both frontend input field and some PHP code to submit that data somewhere.