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

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• 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

Links

• Solution URL: Github Source Code
• Live Site URL: Live Site URL

My process

The important thing for me in this challenge was to 1) Approach it with a mobile-first approach, which I haven't done before and 2) figure out the javascript (since I haven't done anything from scratch before with Javascript outside of tutorials and walk throughs up to this point). The design itself was easy enough to implement for me and I had fun creating it. I did have some trouble at one point with getting everything to appear the way I wanted and getting as close to the image as possible, but that was solved by simply playing around with things I thought would work. The hardest part, of course, was the Javascript and was the thing I tackled last. After some time, I reached out for some ideas and realized, when I was given a direction, that the ideas I had about how to tackle it was pretty close, I just couldn't fully connect all the pieces (referring to looping through the rating numbers). The last thing I tackled in this project was the dynamic part. I was more concerned about just getting the code to work, so once this was done, I set out to make it more dynamic.

Built with

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

What I learned

During this project, I learned a lot more about how Javascript works with the webpage and how loops can help in implementing simple ideas, such as clicking on a rating point vs another one.

Continued development

I think this project was a good starting point in building full webpages with HTML, CSS, and JavaScript. I still have a long way to go in figuring out best practice and solutions when tackling problems in Javascript. It's easy to break it down to see what I need to do, but harder to figure out how to do it. For example, I didn't know how to highlight just one rating number (the one clicked) while leaving the others untouched, and if the user changed their choice, to highlight the new one and return the old choice back to the original state it was in. Admittedly, I didn't figure out how to do much of the JS on my own. I did have help and ideas on how to tackle it from others like me which was extremely useful and amazing!

Author

• Frontend Mentor - @JabaDUDE
• Twitter - @JabasMEOW

Acknowledgments

A huge thank you to twitch streamer, MetalAndCoffee_, for helping me figure out the problem described above in my "Continued development" section. Without her help, I'm not sure if I would've been able to figure out how to do it.