InteractiveRatingComponent

A small project that handles user interactions and updating the DOM with JavaScript from Frontend Mentor

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

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

Screenshot

Links

• Solution URL: x
• Live Site URL: x

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• JavaScript

What I learned

Thanks to my recent practice with JavaScript event listeners; the scripting portion of the assignment took very little time. My CSS skills are a bit rusty; however, and I spent far too long trying to get the circular elements the correct shape.

• 2023, January 23
  • Completed the project after about 4.5 hours.

Continued development

Since I spent way too long with CSS, I'm going to continue with the Frontend Mentor challenges. This will allow me to become better with JavaScript while maintaining my understanding of CSS.

Useful resources

• RGB to HSL - I found this super helpful for determining equivalents when trying to add a few extra colors
• W3Schools CSS Reference Sheet - Very handy resource! I'm going to continue with this one

Author

• Website - GitHub/ravenloue
• Frontend Mentor - @ravenloue
• Twitter - @ravenloue
• LinkedIn - Brandie Mallard