Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewithalamin/interactive-rating-component
This is a solution to the Interactive rating component challenge on Frontend Mentor.
https://github.com/codewithalamin/interactive-rating-component
accessibility alamin beginner-friendly codepapa360 dom-manipulation event-listeners front-end-development frontendmentor interactive-web-development javascript rating-component responsive-design user-interface-design
Last synced: 5 days ago
JSON representation
This is a solution to the Interactive rating component challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/codewithalamin/interactive-rating-component
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-04-05T13:44:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-04-18T23:57:50.000Z (over 1 year ago)
- Last Synced: 2024-10-30T10:38:27.173Z (17 days ago)
- Topics: accessibility, alamin, beginner-friendly, codepapa360, dom-manipulation, event-listeners, front-end-development, frontendmentor, interactive-web-development, javascript, rating-component, responsive-design, user-interface-design
- Language: SCSS
- Homepage: https://interactive-rating-alamin.netlify.app/
- Size: 163 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Interactive Rating Component
This is my solution for the Interactive Rating Component challenge on Frontend Mentor. The challenge required me to create a responsive and interactive rating component using HTML, CSS, and JavaScript. Check out the live site!
### Screenshot
### 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
- **Bonus** Added a Back arrow button to go back and rate again.
#### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- Mobile-first workflow
- NPM
### What I learned
In this project, I was able to practice my JavaScript skills by creating an interactive rating component. I gained practical experience in working with event listeners and managing states in JavaScript. Through this challenge, I was able to apply my knowledge of JavaScript to build real-world applications. Overall, this project helped me improve my front-end development skills, specifically in JavaScript.
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/Interactive-rating-component.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Run command:
```sh
npm start
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Acknowledgments
I would like to express my gratitude to the team at Frontend Mentor for providing me with this engaging challenge. Their platform has been an invaluable resource for improving my front-end development skills. I also want to thank my fellow developers and the online community for their support and inspiration throughout this project.
## Show your support
Give a ⭐️ if you liked this project!
## License
This project is licensed under the [MIT](https://github.com/CodeWithAlamin/Interactive-rating-component/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!