codepapa360 / interactive-rating-component

This is a solution to the Interactive rating component challenge on Frontend Mentor.

Interactive Rating Component

🚀 Live Site | 💡 Solution

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:

git clone https://github.com/CodePapa360/Interactive-rating-component.git

• Install dependencies:

npm install

• Build command:

npm run build

• Run command:

npm start

Author

👤 Alamin

• Twitter - @CodePapa360
• LinkedIn - @CodePapa360
• Frontend Mentor - @CodePapa360
• Github: @CodePapa360

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 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!