Frontend Mentor - Interactive rating component solution

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.

Table of contents

• Frontend Mentor - Interactive rating component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

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: Click Me!
• Live Site URL: Click Me!

My process

Built with

• Semantic HTML5 markup
• SCSS/SASS
• Positioning and sizing of elements
• Form validation/submission
• JavaScript

What I learned

I've learned about URLSearchParams, and how to use them to pass data from one page to another. I've also learned about the use of the get method on the window object to get the URL parameters. Also use the @use directive to import components from other files.

const rating = document.querySelector(".rating");
const value = new URLSearchParams(window.location.search).get("ratings");
rating.textContent = `You selected ${value} out of 5`;

Continued development

I am looking forward to improve my JavaScript skills and learn more about the DOM. I am also looking forward to learning more about the use of the @use and @forward directives.

Useful resources

• MDN - MDN documentation for the URLSearchParams object
• Youtube - Web Dev Simplified - This video is about HTML forms but it helped me about the URLSearchParams object

Author

• Frontend Mentor - @subhajitroycode
• Twitter - @subhajitroycode
• LinkedIn - @subhajitroycode

Acknowledgments

I got a tip when submitting the form check if any of the radio buttons selected or show an error message. It was a great tip and I tried to find that account but couldn't find it.