JS DOM manipulation

Community feedback

• 

  

  Mike Hayden-Moore•1,005

  @mickyginger

  Posted about 3 years ago

  Hey Hunter this looks great!

  Since it's your first JS project, I thought I'd give you some feedback on your JavaScript.

  You've set out all your global variables at the top of the file, which is great, and initialized some sensible defaults. I think perhaps cardOne and cardTwo are not particularly descriptive variables, so I would probably recommend calling them ratingCard and successCard or similar. This helps to reason about the code.

  You've misspelled rating which is very minor, but is probably worth changing for clarity.

  Since 0 is falsey in JavaScript you can tidy up your submit button click handler a little:

  submitBtn.addEventListener("click", () => {
    if (!ratting) return error.classList.remove("hidden");
  
    selectedRatting.innerHTML = `You selected ${ratting} out of 5`;
    cardOne.classList.add("hidden");
    cardTwo.classList.remove("hidden");
  })
  

  The return keyword will prevent the rest of the function logic from running so you don't need an else clause in that case.

  You have named your removeActive function, but used anonymous arrow functions elsewhere. Personally I prefer named functions since you get more specific error messaging, and you can more easily add and remove event handlers that way. Something like:

   function handleSubmit() {
    if (!ratting) return error.classList.remove("hidden");
  
    selectedRatting.innerHTML = `You selected ${ratting} out of 5`;
    cardOne.classList.add("hidden");
    cardTwo.classList.remove("hidden");
  }
  
  submitBtn.addEventListener("click", handleSubmit)
  

  Finally you don't really need to use data attributes here because the value is stored as the text content of the button albeit a string, but that's quite easy to convert to a number:

  ratting = Number(rattingBtn.textContent); // or +rattingBtn.textContent
  

  It's worth mentioning these are all very minor style points and should be considered suggestions and not the "correct" way to write JavaScript. What you have written is easy to read, and is not overly complex in its solution, so very well done!

  21

  Marked as helpful