This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: (https://github.com/branalex94/interactive-rating-component)
- Live Site URL: (https://branalex94.github.io/interactive-rating-component/)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- [Vite] (https://vitejs.dev/) - JS Bundler
I learned how to create a multiple choice/unique choice selector using ReactJS.
const handleClick = (e) => {
setRating(e.currentTarget.textContent);
setIsRatingSelected(true);
};
useEffect(() => {
if (rating === selectedRating) {
setIsActive(true);
} else {
setIsActive(false);
}
}, [selectedRating]);
I'd like to focus on improving my code and maintaining it as clean as possible. As well as better use of frameworks and libraries features.
- GitHub - branalex94
- Frontend Mentor - @branalex94
- LinkedIn - Brandon Aray