Skip to content

Latest commit

 

History

History
76 lines (49 loc) · 2.78 KB

README.md

File metadata and controls

76 lines (49 loc) · 2.78 KB
Raw

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 solution

Screenshot

NTF card Component NTF card Component (1)

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