Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
2
Comments
4

kimchiver

@kimchiver90 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Expenses chart component with dynamic bars

    #animation#jquery

    kimchiver•90
    Submitted almost 2 years ago

    0 comments
  • Interactive rating component challenge


    kimchiver•90
    Submitted almost 2 years ago

    0 comments

Latest comments

  • Cheosphere•1,040
    @Cheosphere
    Submitted almost 2 years ago

    Bookmark Landing Page (HTML | CSS | Vue JS Composition API + Vite )

    #vue#vite
    12
    kimchiver•90
    @kimchiver
    Posted almost 2 years ago

    Congratulations for the next level! The result is as always perfect.

  • Mateusz•180
    @matsta92
    Submitted almost 2 years ago

    Interactive rating component

    #sass/scss#accessibility
    2
    kimchiver•90
    @kimchiver
    Posted almost 2 years ago

    I might suggest using variables in css to declare colors, font sizes, etc

    I can't understand the meaning of ids and tabindexes in rating divs.

    But the js code is WOW! I assume, this is the best solution!

    Marked as helpful
  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkova
    Submitted almost 2 years ago

    Practice-9

    3
    kimchiver•90
    @kimchiver
    Posted almost 2 years ago

    Hello!

    Your coding of design is excellent. (I like your History Back style!)

    I'd like to add a few js issues to the above:

    -- "blur" event does not work properly with button elements, at least in Safari /Version 16.6/. I suggest to do inactive-button.classList.remove("selected") for all buttons inside a "click" callback-function of the active element (like @RalfiSlask noticed)

    -- it's better to use add/remove(class) instead of toggle(). When the user clicks the same number twice, toggle() switches off the active mode.

    It may seems overwhelming today, but don't give up and keep up! In case you get into this, I'd like to recommend a really good source for web-development learning - www.w3schools.com

    Marked as helpful
  • P
    Arianna Choza•430
    @unachoza
    Submitted almost 2 years ago

    Interactive Rating Component

    2
    kimchiver•90
    @kimchiver
    Posted almost 2 years ago

    document.querySelectorAll returns an array, so you can check each element of the array ( if document.querySelectorAll(".rating-value")[i].classList.contains("active") ). otherwise you can store a reference to the previous selected item in a global variable:

    let previousSelected = null
    
    ratingsContainer.addEventListener('click', (e) => {
      ...
      if ( previousSelected ) previousSelected.classList.remove('active');
      previousSelected = e.target;
      e.target.classList.add('active')
    
    ...
    }
    
    Marked as helpful

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub