Adding a 5-star rating component to a website or application is a common requirement in many projects. This component allows users to provide feedback and rate items based on their experience. In this step-by-step guide, we will walk through the process of building a 5-star rating component using HTML, CSS, and JavaScript.

Step #1: Set Up the HTML Structure

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback Form</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="feedback-form">
        <h2>Feedback Form</h2>
        <form id="feedbackForm">
            <div class="rating">
                <!-- Notice that the stars are in reverse order -->

                <input type="radio" id="star5" name="rating" value="5">
                <label for="star5">&#9733;</label>
                <input type="radio" id="star4" name="rating" value="4">
                <label for="star4">&#9733;</label>
                <input type="radio" id="star3" name="rating" value="3">
                <label for="star3">&#9733;</label>
                <input type="radio" id="star2" name="rating" value="2">
                <label for="star2">&#9733;</label>
                <input type="radio" id="star1" name="rating" value="1">
                <label for="star1">&#9733;</label>
            </div>
            <div class="comment">
                <label for="comment">Tell us more:</label><br>
                <textarea id="comment" name="comment"></textarea>
            </div>
            <button type="submit" class="submit-btn">Submit</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>

</html>

Step #2: Style the Rating Component with CSS

body {
	font-family: Arial, sans-serif;
  }
  
  .feedback-form {
	max-width: 400px;
	margin: 0 auto;
  }
  
  .rating {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row-reverse; // this is the magic
	justify-content: flex-end;
  }
  
  .rating input {
	display: none;
  }
  
  .rating label {
	font-size: 24px;
	cursor: pointer;
  }
  
  .rating label:hover,
  .rating label:hover ~ label { // reason why the stars are in reverse order in the html
	color: orange;
  }
  
  .rating input:checked ~ label {
	color: orange;
  }
  
  .comment {
	margin-bottom: 20px;
  }
  
  .comment textarea {
	width: 100%;
	height: 100px;
	resize: none;
  }
  
  .submit-btn {
	background-color: #007bff;
	color: #fff;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
  }

Step #3: Add JavaScript Functionality

document.getElementById("feedbackForm").addEventListener("submit", function (event) {
    event.preventDefault();
    var rating = document.querySelector('input[name="rating"]:checked').value;
    var comment = document.getElementById("comment").value;

    // Here you can handle the submission, for now just logging the values
    console.log("Rating: ", rating);
    console.log("Comment: ", comment);

    // You can send this data to the server using AJAX or other methods
    // For simplicity, I'm just logging it here
});

Output:-

Hopefully, It will help you…!!!!