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
- Semantic HTML5 markup
- SCSS/SASS
- Positioning and sizing of elements
- Form validation/submission
- JavaScript
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`;
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.
- 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
- Frontend Mentor - @subhajitroycode
- Twitter - @subhajitroycode
- LinkedIn - @subhajitroycode
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.