All comments

• 

  Ana Müller•20

  @ana-mulSubmitted 3 days ago

  

  Mortgage calculator

  1

  00
  

  Pdave-dcn•160

  @Pdave-dcnPosted 3 days ago

  In the app, after performing a calculation and the result is displayed correctly, clicking the "clear all" button clears all inputs except for the recently selected radio button. It should also reset the section that displays the result to its default state. Below is an example in TypeScript that resets the app to its default state. For more information on how to implement it in the project, please refer to my solution for this challenge.

  function clearAllInputs(form: HTMLElement) {
    form.querySelectorAll<HTMLInputElement>("input").forEach((input) => {
      if (input.type === "radio") {
        input.checked = false;
        const wrapper = input.closest(".js-radio-btn-wrapper");
        wrapper?.classList.remove("active-type");
      } else {
        input.value = "";
      }
  
      if (input.classList.contains("error-input"))
        input.classList.remove("error-input");
  
      const errorElement = fromUtilsGet.unitLabel(input);
      errorElement?.classList.remove("error-unit-label");
  
      document
        .querySelectorAll<HTMLElement>(".calculator__input--error")
        .forEach((element) => {
          element.innerText = "";
        });
    });
  
    const displayElement = document.querySelector<HTMLElement>(".js-display");
  
    if (displayElement) {
      const firstChild = displayElement.firstElementChild;
      if (
        firstChild instanceof HTMLElement &&
        firstChild.classList.contains("result")
      ) {
        const wrapperElement = document.createElement("div");
        wrapperElement.classList.add("wrapper");
  
        wrapperElement.innerHTML = `
        <img
            src="assets/images/illustration-empty.svg"
            alt="illustration"
            class="calculator__display--img"
        />
        <h1 class="calculator__display--title">Results shown here</h1>
        <p class="calculator__display--paragraph">
          Complete the form and click "calculate repayments" to see what
          your monthly repayments would be.
        </p>
        `;
  
        displayElement.replaceChild(wrapperElement, firstChild);
      }
    }
  
    document
      .querySelector<HTMLElement>(".js-calculator-display")
      ?.classList.remove("result-style");
  }
  

  0

  This comment has received 1 replyShow
• 

  Matheus Roberto Da Silva•150

  @matheusrobertodasilvaSubmitted about 1 month ago

  

  HTML,CSS and JAVASCRIPT

  1

  30
  

  Pdave-dcn•160

  @Pdave-dcnPosted about 1 month ago

  Your calculator is missing several features, including the validation of the day count according to the specified month. For instance, entering 31/02/1987 should result in an error message, as February does not have 31 days. I recommend reviewing my solution, which may offer some intriguing methods or advice.

  Marked as helpful

  0