DEV Community

Cover image for Star Rating System in HTML CSS & JavaScript
CodingNepal
CodingNepal

Posted on

2 1

Star Rating System in HTML CSS & JavaScript

A star rating is a rating question that gives people rate a product or service with several stars. The number of stars can range from 5 to 10 stars. A star rating question is a type of rating question that permits users to rank attributes on a scale represented with stars, instead of radio buttons or checkboxes.

In this program (Star Rating System) at first, there are only five stars without any description box. And when you click on the particular star then the review text (a text with emoji) and a description box will visible. The review text is shown in the image as "It is awesome with emoji" is a dynamic text that means this text will change according to your rating or review. And when you give a rating and write some description and click on the post button...the rating system container will be hidden and a fixed text will be appeared as "Thanks for rating us!" with the edit button on the right top corner. And when you click on that edit button, it'll redirect you to previous steps where you can edit your rating and message.

You can also download the source code files through the given link. Click here to download source code files.

Image of Bright Data

Overcome Captchas with Ease – Keep your data flow uninterrupted.

Our Web Unlocker smoothly handles captchas, ensuring your data scraping activities remain productive.

Solve Captchas

Top comments (2)

Collapse
 
indusschoolb profile image
Shantanu Jana

Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. Best Preschools in Koramangala. Would love to see more examples like this for other types of elements. Keep up the good work!

Collapse
 
nguyenconghb profile image
Nguyễn Công

not working, not save :(( help me

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay