age-calculator-app-main

Community feedback

• 

  Nazar Holubovskyy•190

  @HA3IKPosted about 1 year ago

  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

  0
• 

  Nazar Holubovskyy•190

  @HA3IKPosted about 1 year ago

  Hello,

  A few recommendations for your JS code.

  1. To insert simple text do not use innerHTML, for this task use InnerText or textContent.
  2. No need to create hidden class, use [hidden] attribute.
  3. 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

  0