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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
One of the my major learnings in this project was how to interact and manipualte the DOM. One of the things that stood out for me was why event delegation is important and how you can achieve it in your project.
img.parentNode.insertBefore(textDiv, img.nextSibling); // Proud of this as a way to insert an element after another element
I want continue learning about the DOM as well as mobile responsiveness.
- Frontend Mentor - @Jonyango