age-calculator-app-main

Please log in to post a comment
Log in with GitHubCommunity feedback
- @HA3IK
You don't need to listen to the same event on the same element for each function (DRY). You can call an anonymous function for all the functions you need:
button.addEventListener("click", e => { newYear(); newMonths(); newDays(); });
Marked as helpful - @HA3IK
Hello,
A few recommendations for your JS code.
- To insert simple text do not use
innerHTML
, for this task useInnerText
ortextContent
. - No need to create
hidden
class, use[hidden]
attribute. - DRY (Don't repeat yourself) - You have large chunks of repetitive code. Lines 21-24 and 26-29, 46-49 and 51-54, 69-73 and 75-77,79 are absolutely identical. In this case, it is necessary to create functions that will perform the same task, and pass references to input, output, error, etc. tags as arguments:
const showError = (label, input, output, msg) => { msg.hidden = true; // instead of: msg.classList.remove("hidden"); label.classList.replace("text-SmokeyGrey", "text-LightRed"); input.classList.replace("border-LightGrey", "border-LightRed"); output.textContent = "--"; // instead of: output.innerHTML = "--"; } // showError(yearsText, inputYear, years, errorMsg3); // showError(monthText, inputMonth, months, errorMsg2); // showError(dayText, inputDay, days, errorMsg1);
The same for
hideError()
Marked as helpful - To insert simple text do not use
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord