Skip to content
OverviewSolutions
2
Comments
4
kimchiver
@kimchiver

All comments

  • kimchiver•90
    @kimchiverPosted about 1 year ago

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

    3
  • kimchiver•90
    @kimchiverPosted about 1 year 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
    0
  • kimchiver•90
    @kimchiverPosted about 1 year 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
    0
  • kimchiver•90
    @kimchiverPosted about 1 year 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
    0