This is my 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://www.frontendmentor.io/solutions/interactive-rating-component-built-with-react-07fgl5nyLd
- Live Site URL: https://rating-component-9fb0b9.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
This is another project where I wanted to practice my React skills. I am currently in the middle of Scrimba.com's 'React Basics' course, but I felt I need a little extra practice.
This project gave me the opportunity to reinforce the concepts of useState() and props.
I'm particuarly proud of using a ternary operators in this project. For example, I used one to change the CSS styles of the labels when a user selects a choice:
className={formData.formValue === '1' ?
'form--label selected' :
'form--label'}If the user has selected an option, then the state is updated with that value. Since the value is stored in state, I made use of it by letting it determine which CSS classes to the label so that the color of the label would change to match the user's selection.
- Vite documentation on assets - This documentation helped me resolve the issue of the images not loading properly during deployment. Special thanks to Bob Ziroll for sharing this in the Scrimba Discord community when someone else had the same issue.