https://github.com/tanya22bose/star-rating
A simple, interactive Star Rating UI built using HTML, CSS, and Vanilla JavaScript. Users can click on stars to give a rating between 1 and 5, with visual feedback.
https://github.com/tanya22bose/star-rating
css3 html-entity html5 js star-rating
Last synced: about 1 month ago
JSON representation
A simple, interactive Star Rating UI built using HTML, CSS, and Vanilla JavaScript. Users can click on stars to give a rating between 1 and 5, with visual feedback.
- Host: GitHub
- URL: https://github.com/tanya22bose/star-rating
- Owner: Tanya22bose
- Created: 2025-06-12T12:07:39.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-12T12:15:46.000Z (12 months ago)
- Last Synced: 2025-06-12T13:26:50.208Z (12 months ago)
- Topics: css3, html-entity, html5, js, star-rating
- Language: HTML
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⭐ Star Rating Component
A simple, interactive Star Rating UI built using HTML, CSS, and Vanilla JavaScript. Users can click on stars to give a rating between 1 and 5, with visual feedback.
### 🖼️ Preview
A simple 5-star rating system with hover and click effects.
https://github.com/user-attachments/assets/55f9615c-9dfa-4760-99d7-4ea745501358
### 📁 Features
- Clickable star icons to set a rating from 1 to 5.
- Real-time display of selected rating.
- Gold color highlight on hover and selection.
- Clean, centered layout using flexbox.
- No external libraries – fully vanilla JavaScript.
### 🛠️ Technologies Used
- HTML5 for structure
- CSS3 for styling and transitions
- JavaScript (ES6) for DOM manipulation
### 🚀 How to Run
1. Clone or download this repository.
2. Open the index.html file in any modern web browser.
3. Click on the stars to select your rating.
### 📌 Code Highlights
- Uses the data-value attribute to track star value.
- Adds or removes the filled class dynamically based on selected rating.
- Updates the displayed rating (0/5, 3/5, etc.) in real-time.
### 📂 File Structure
```
star-rating/
├── index.html # Main HTML file with inline CSS and JavaScript
```
### 📄 License
This project is open-source and free to use for learning and personal projects.