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:

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

Recipe

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!

Hints

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?