@superschoolerSubmitted over 2 years ago
This was a fun one! My first real JavaScript project - I think it turned out great but my JavaScript is a mess. I used Tailwind CSS which complicated the class names a bit, so next time I'll use some Tailwind and some Vanilla CSS.
As far as my JavaScript goes - any suggestions on how to loop through resetting the buttons instead of doing it individually? There's no possible way this is the best solution:
function resetButtons() {
tip5.classList.remove(
"text-cyan-900",
"bg-teal-400",
"animate__animated",
"animate__swing"
);
tip5.classList.add("bg-cyan-900", "text-white");
tip10.classList.remove(
"text-cyan-900",
"bg-teal-400",
"animate__animated",
"animate__swing"
);
tip10.classList.add("bg-cyan-900", "text-white");
tip15.classList.remove(
"text-cyan-900",
"bg-teal-400",
"animate__animated",
"animate__swing"
);
tip15.classList.add("bg-cyan-900", "text-white");
tip25.classList.remove(
"text-cyan-900",
"bg-teal-400",
"animate__animated",
"animate__swing"
);
tip25.classList.add("bg-cyan-900", "text-white");
tip50.classList.remove(
"text-cyan-900",
"bg-teal-400",
"animate__animated",
"animate__swing"
);
tip50.classList.add("bg-cyan-900", "text-white");
tipCustom.classList.remove(
"text-cyan-900",
"bg-white",
"border-2",
"border-teal-400",
"animate__animated",
"animate__swing"
);
tipCustom.classList.add("bg-slate-100", "text-slate-500");
reset.classList.remove(
"text-cyan-900",
"bg-teal-400",
"cursor-pointer",
"hover:bg-rose-300"
);
reset.classList.add("bg-cyan-800", "text-cyan-900");
}
function activateResetButton() {
reset.classList.remove("bg-cyan-800", "text-cyan-900");
reset.classList.add(
"text-cyan-900",
"bg-teal-400",
"cursor-pointer",
"hover:bg-rose-300"
);
}
