Interactive rating component - Frontend Mentor

Welcome! 👋

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.

Quick video demonstration 👩‍💻

Zaznam.obrazovky.2022-08-01.v.10.23.52.mov

Table of contents

• Overview
  • Links to the solution
  • Screenshot
• My process
  • Built with
  • What I learned
  • Lessons to remember
• Author

Overview

Links to solution

• Solution: Solution on Frontend Mentor
• Live site: here

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavsaScript basic knowladge

What I learned

This was the first Frontend Mentor challenge where I used JS, and honestly, I have to say I thought it would be more complicated. After doing, in my opinion, way more complex solo challenges on Scrimba, this was just like a bit of fun. But it wasn't all that easy. I had to google how to make a button to stay active and then figure out how to log it out. But it wasn't that difficult.

I am pleased that I remembered to start with the mobile version this time. It is so much easier that way.

I also struggled with a gradient blur drop shadow on an element, but thankfully with help from the wonderful members of Frontend mentor, I learned how to do that. It should have been as the code below. I completely forgot I could add a four parameter into the styling.

box-shadow: 0px 0px 100px 20px rgba(0, 0, 0, 0.1)

This is also the fun new JavaScript I have learned.

let current = document.getElementsByClassName("active")
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "")
        }
        
        this.className += " active"

        selectedRating = this.value

Lessons to remember

• box-shadow had 4 parameters! 🐶
• Mobile first pays off 😌
• JS is fun 👩‍💻

Author

• Frontend Mentor - @terka-codes
• Twitter: @TerkaCodes