@mickyginger
Posted
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!
Marked as helpful
@huntoor
Posted
@mickyginger That's a valuable feedback. Thank you for reaching out I appreciate it.