https://github.com/wolfgunblood/interactive-rating
The Interactive Rating Card is a user interface component that allows users to rate and provide feedback on a particular item, such as a product, service, or experience. It provides a visually appealing and interactive way for users to express their opinions and experiences.
https://github.com/wolfgunblood/interactive-rating
css html react
Last synced: 4 months ago
JSON representation
The Interactive Rating Card is a user interface component that allows users to rate and provide feedback on a particular item, such as a product, service, or experience. It provides a visually appealing and interactive way for users to express their opinions and experiences.
- Host: GitHub
- URL: https://github.com/wolfgunblood/interactive-rating
- Owner: wolfgunblood
- Created: 2023-06-08T16:14:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-30T15:15:57.000Z (about 2 years ago)
- Last Synced: 2025-01-04T11:16:17.256Z (6 months ago)
- Topics: css, html, react
- Language: SCSS
- Homepage: https://wolfgunblood.github.io/interactive-rating/
- Size: 382 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Interactive rating component solution
This is a solution to the [Interactive rating component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
The Interactive Rating Card is a user interface component that allows users to rate and provide feedback on a particular item, such as a product, service, or experience. It provides a visually appealing and interactive way for users to express their opinions and experiences.
The rating card typically includes a visual representation of the rating scale, which can be represented by stars, thumbs up/down, smiley faces, or any other relevant symbols. Users can click or interact with these symbols to select their desired rating.
### The challenge
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
### Screenshot
### Links
- Solution URL: [Solution Repository](https://github.com/wolfgunblood/interactive-rating)
- Live Site URL: [Live Demo](https://wolfgunblood.github.io/interactive-rating/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
### What I learned
Throughout the code snippet provided, here's a summary of what you have learned:
- React JS: Enhancing your understanding of React's component-based architecture and state management.
- UI Design: Developing visually appealing rating cards and considering user experience.
- Event Handling: Implementing interactivity through event handling in React.
- Data Persistence: Learning about storing and retrieving user ratings and comments.
- User Engagement: Incorporating user feedback to improve the app's usability.
## Author
- Website - [Jalaj](https://wolfgunblood.github.io/portfolio/)
- Frontend Mentor - [@wolfgunblood](https://www.frontendmentor.io/profile/wolfgunblood)
- Twitter - [@jalaj_dorai](https://twitter.com/jalaj_dorai)
## Acknowledgments
I would like to express our gratitude to Frontend Mentor (https://www.frontendmentor.io) for providing the design and inspiration for this project. Frontend Mentor offers a vast collection of design challenges and projects that allow developers to enhance their skills by building real-world applications.