Skip to content
OverviewSolutions
6
Comments
1
Joshua Kelly
@hewhodevs

All comments

  • Achintya Keskar•40
    @SanePieSubmitted over 2 years ago

    Hey guys, I recently started learning frontend dev and this is my first project involving HTML CSS and JS. Please look through the site and the code and advice me on how I could've done things better. Open to any and all suggestions.

    Questions :

    1. I could get the background to match exactly as given in the design so any ideas on how I could've done that?

    2. The first time that someone clicks on a rating, it selects the rating, but the "selected" class is not added to that number for some reason. It works just fine from the second time onwards. So please look through the code and tell me why does that happen.

    Interactive Rating Card

    1
    Joshua Kelly•70
    @hewhodevsPosted over 2 years ago

    Hi Achintya, well done on your submission.

    I had a look at the code regarding point 2, and believe I've found the issue, and it's fix.

    • You have initially defined a "selectedNumber" value of 0 at the top of your index.js file.
    • The first click calls your "click" event listener successfully, and passes 0 as the "previousNumber" argument to your selectNumber() function
    • The first line of selectNumber function then tries to find the element at (0 - 1) i.e. index -1, which does not exist, throwing an uncaught exception error, and preventing your function from moving onto it's second line of code.
    • Every subsequent click works fine, as you are then no longer passing a 0 value to the selectNumber function, and the exception no longer occurs, so things work as expected from then on.

    To fix the issue, include an if statement to catch the initial 0 case. Since nothing is selected initially when the page loads, nothing needs to have .selected removed initially.

    function selectNumber(num1,num2){
  if (num1!== 0) {
    document.querySelectorAll(".number")[num1-1].classList.remove("selected");
  }
  document.querySelectorAll(".number")[num2-1].classList.add("selected");
}
    Marked as helpful
    1