XQA
Back to Python
2026-05-225 min read

Star Rating (Python Programming)

Learn Star Rating (Python Programming) step by step with clear examples and exercises.

Title: Star Rating (Python Programming)

Why This Matters

Star ratings are a common feature in many web applications, allowing users to rate products, services, or content with ease. In this lesson, we'll learn how to create a simple star rating system using Python and HTML/CSS. You might encounter situations where you need to implement a star rating system for your own projects, such as building an e-commerce platform or a review site.

By the end of this tutorial, you will have gained hands-on experience in creating a functional star rating system that can be easily integrated into your web applications.

Prerequisites

To follow this tutorial, you should have a basic understanding of:

  1. Python programming (variables, functions, loops)
  2. HTML/CSS basics (HTML form elements, CSS styling)
  3. Familiarity with web development concepts like HTTP requests and responses
  4. Basic understanding of Flask, a popular Python web framework

Core Concept

The star rating system will consist of an HTML form containing a series of `` elements representing the stars. We'll use JavaScript to capture the user's selection and send it to our Python server for processing. The Python server will calculate the average rating based on multiple selections, if available, and return the result as JSON.

HTML/CSS Setup

Create an index.html file with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Rating System</title>
<style>
/* CSS for styling stars */
...
</style>
</head>
<body>
<!-- HTML form for star ratings -->
<form id="star-rating-form">
...
</form>

<!-- JavaScript to handle form submission -->
<script src="app.js"></script>
</body>
</html>

Python Server Setup

Create a new Python file called server.py and install the Flask web framework using pip:

pip install flask

Now, modify server.py with the following code:

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/average', methods=['POST'])
def average_rating():
ratings = request.form.getlist('rating[]')
total = sum(ratings)
if len(ratings) > 0:
avg = total / len(ratings)
return jsonify({'average': round(avg, 2)})
else:
return jsonify({'error': 'No ratings provided.'})

if __name__ == '__main__':
app.run(debug=True)

JavaScript (app.js)

Now, create an app.js file and add the following code to handle form submission:

document.getElementById('star-rating-form').addEventListener('submit', function(e) {
e.preventDefault();

const ratings = [];
for (let i = 1; i <= 5; i++) {
if (document.querySelector(`input[name='rating[]'][value=${i}]`).checked) {
ratings.push(i);
}
}

fetch('/average', {
method: 'POST',
body: JSON.stringify({ratings}),
headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => {
if (data.error) {
alert(data.error);
} else {
alert(`Average rating: ${data.average}`);
}
});
});

HTML/CSS Styling

Update the CSS in the ` section of your index.html` file to style the stars:

/* CSS for styling stars */
input[type='radio'] { display: none; }
label { cursor: pointer; font-size: 24px; margin: 0 5px; }
label:hover, label.active { color: #ffcc00; }

Now, add the actual star elements to your form:

<!-- HTML form for star ratings -->
<form id="star-rating-form">
<label class="star" for="rating1"><i class="fa fa-star"></i></label>
<input type="radio" id="rating1" name="rating[]" value="1">
<!-- Repeat for other stars -->
...
</form>

Don't forget to include the Font Awesome library in your HTML file:

<!-- Add this at the end of your <head> section -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Worked Example

Now that you have the basic setup, open index.html in your browser and test the star rating system by selecting different stars. The average rating should be calculated correctly and displayed as an alert.

Common Mistakes

  1. Forgetting to install Flask: Make sure you've installed Flask using pip before running the server.py script.
  2. Incorrectly setting up the JavaScript event listener: Ensure that the event listener is set up correctly and prevents the form submission by default.
  3. Mismatched CSS selectors: Double-check that your CSS selectors match the HTML structure of your form elements.
  4. Not including Font Awesome library: Don't forget to include the Font Awesome library for the star icons in your HTML file.
  5. Missing Flask application import: Ensure that you have imported the Flask module at the beginning of your server.py script: from flask import Flask.
  6. Incorrectly setting up the Python server: Make sure to run the server.py script using a command prompt or terminal window, and not directly in an IDE.

Practice Questions

  1. Modify the star rating system to allow users to submit their ratings multiple times and display an updated average rating each time.
  2. Add validation to ensure that only one star can be selected at a time.
  3. Implement a reset button to clear all selections and start fresh.
  4. Style the form elements to better match your website's theme or design.
  5. Improve the user interface by adding visual feedback when a star is clicked, such as changing its color or adding an animation.
  6. Add error handling to the Python server to handle cases where invalid data is sent from the client-side JavaScript.
  7. Implement persistence for ratings, so that they are saved between sessions or across multiple users.
  8. Integrate the star rating system into a larger web application, such as an e-commerce platform or a content management system.

FAQ

Q: Why are my ratings not being calculated correctly?

A: Ensure that you have set up the JavaScript event listener correctly and that your CSS selectors match the HTML structure of your form elements. Also, double-check that the Python server is running without any errors.

Q: How can I style the stars to better fit my website's design?

A: You can customize the appearance of the stars by modifying the CSS properties for the label and i elements in the `` section of your HTML file, as well as the Font Awesome icons themselves.

Q: Why am I getting an error message when submitting the form?

A: Check that you have set up the JavaScript event listener correctly, and ensure that the server is running without any errors. If the problem persists, double-check that your Flask installation is working properly. Also, verify that the ratings are being sent as expected from the client-side JavaScript to the server.

Q: How can I make the star rating system persistent across sessions or users?

A: One approach is to store the ratings in a database and retrieve them when needed. You could also use cookies or local storage to save the user's ratings temporarily between sessions. For a more solid approach, consider integrating the star rating system with an authentication system to track individual user ratings.

Q: How can I integrate the star rating system into my existing web application?

A: To integrate the star rating system into your existing web application, you'll need to modify the HTML structure and CSS styling to match your application's design. You may also need to adjust the JavaScript event listener to work with your specific form elements. Additionally, ensure that the Python server is set up correctly to handle requests from your application and return the calculated average rating as JSON.

Star Rating (Python Programming) | Python | XQA Learn