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
Desktop | Mobile |
---|---|
- Solution URL: Solution URL here
- Live Site URL: Live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- BEM Methodology
- Surrounding where to insert value of selected button with a span
<p class="success__value">You selected <span class="span__value"></span> out of 5</p>
- Use CSS flex
outline:none
,cursor:pointer
,border:none
andflex-direction:column
properties.container { display: flex; justify-content: center; align-items: center; }
- Use
addEventListener
to remove or add classes to the elements when element is clicked
- Use more of CSS flexbox in future projects to be more proficient with its concepts
- kenneth0417 - His solution helped me understand how to implement the requested behavior.
- Frontend Mentor - @kareemadesola
- Twitter - @kareemadesola
I would like to give a hat tip to kenneth0417 as his solution gave an insight on how to build my project