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.

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Live Site URL

• Semantic HTML5 markup
• CSS
• Flexbox
• JavaScript

Hiding elements

• Previously I was hiding HTML elements with CSS by setting the visibility: "hidden". I read that the best way to hide an element so that the space created by the element is also hidden (removed from the document layout) is to instead use display: "none".

Storing state

• A effective way of storing state especially in a simple app like this one is to use local storage. Possibly for this use case, session storage would have been better since it expires when the session ends (page is closed).

Media queries range syntax

• Rather than using the typical media query as such:

@media only screen and (min-width: 768px) and (max-width: 991px) {
  ...
}

• A range can be provided for the media query as such:

@media (768px <= width <= 991px) {
  ...
}

• New syntax for range media queries - This helped me learn the new range syntax for media queries.
• Local storage - A great article that helped me understand the purpose and use of localStorage and sessionStorage.

• GitHub - ianwilk20