Chrision Wynaar

Latest solutions

• 
  Submitted about 1 month ago

  Age Calculator App

  • HTML
  • CSS
  • JS

  0

  20

  ---

  If anyone has some time, I like some help on how I handled the errors and what should I do to fix them completely. (95% done as anticipated)

      // For all errors
      resetErrors();
      const daysInMonth = getMonthsFromDays(yearInput, monthInput - 1);
  
       // Check if all fields are empty or invalid
       if (!dayInput && !monthInput && !yearInput) {
          showError("All fields are required", [errorD, errorM, errorY], [days, months, years]);
          return;
      }
  
      if (monthInput < 1 || monthInput > 12 &&
          dayInput < 1 || dayInput > daysInMonth &&
          yearInput > currentDate.getFullYear()
      ) {
          showError("Must be a valid month", [errorM], [months]);
          showError("Must be in the past", [errorY], [years]);
          showError("Must be a valid day", [errorD], [days]);
          return;
      }
  
      if (monthInput < 1 || monthInput > 12) {
          showError("Must be a valid month", [errorM], [months, years, days]);
          return;
      }
  
      if (dayInput < 1 || dayInput > daysInMonth) {
          showError("Must be a valid day", [errorD], [days, months, years]);
          return;
      }
  
      if (yearInput > currentDate.getFullYear()) {
          showError("Must be in the past", [errorY], [years, months, days]);
          return;
      }
  
  function showError(message, errorElements, inputElements) {
      inputElements.forEach(element => element.classList.add("error"));
      inputTitle.forEach(element => element.classList.add("error-color"));
      errorElements.forEach(errorElement => {
          errorElement.classList.remove("hidden");
          errorElement.textContent = message;
      });
      days.value = "";
      months.value = "";
      years.value = "";
  }
  
  // Function to reset error messages and input styles
  function resetErrors() {
      [errorD, errorM, errorY].forEach(errorElement => errorElement.classList.add("hidden"));
      [days, months, years].forEach(input => input.classList.remove("error"));
      inputTitle.forEach(element => element.classList.remove("error-color"));
  }
  
  
  
  

• 
  Submitted 2 months ago

  Article Preview Component

  • HTML
  • CSS
  • JS

  1

  30

  ---

  Any thing that I can improve on for next time. Maybe even if it has to do with relative units and how i used widths inside of the solution. Im trying to execute the feedback that AlexKMarshall told me on the discord in terms of using them appropriately. With this approach, it makes the design more responsive depending on the viewport.

• 
  Submitted 2 months ago

  QR Code Component

  • HTML
  • CSS

  1

  20
• 
  Submitted 4 months ago

  Mortgage Repayment Calculator Solution

  • HTML
  • CSS
  • JS

  2

  20

  ---

  clearBtn.addEventListener("click", () => {
  
      // redefining due to scoping. Global placement didnt reference these variables
  
      let amountError = document.querySelector(".amount-error");
      let mortgageAmount = document.getElementById("mortgage-amount");
      let poundSign = document.querySelector(".input-text-m");
  
      let termError = document.querySelector(".error-term");
      let mortgageTerm = document.getElementById("mortgage-term");
      let yearSign = document.querySelector(".input-year");
  
      let interestError = document.querySelector(".error-rate");
      let interestField = document.getElementById("interest-rate");
      let percentSign = document.querySelector(".input-percent");
  
      let radioError = document.querySelector(".error-radio");
  
      const resultDiv = document.querySelector(".result-container");
      const resultPending = document.querySelector(".potential-results");
      const monthPlan = document.querySelector(".month-plan");
      const overTerm = document.querySelector(".over-term");
  
      // referencing the form to clear it.
      document.getElementById("mortgager").reset();
      resultDiv.style.display = "none";
      resultPending.style.display = "flex";
      monthPlan.textContent = "";
      overTerm.textContent = "";
  
      amountError.style.display = "none";
      mortgageAmount.classList.remove("error-input");
      poundSign.classList.remove("error-span");
  
  
      termError.style.display = "none";
      mortgageTerm.classList.remove("error-input");
      yearSign.classList.remove("error-span");
  
      interestError.style.display = "none";
      interestField.classList.remove("error-input");
      percentSign.classList.remove("error-span");
  
      radioError.style.display = "none";
  
      document.getElementById("repayment").checked = false;
      document.getElementById("interestO").checked = false;
  
  });
  
  

  If anyone has spare time, I need some assistance on how to not reference the inputs again when handling the clear button on all input fields. I tried putting all references inside of the global scope but then it started to affect the calculations for the main card. I referenced the variables again and it worked but I know this is not the most efficient thing to do.

  Thank you for your time!

• 
  Submitted 4 months ago

  Newsletter Sign-Up Form Design

  • HTML
  • CSS
  • JS

  1

  20

  ---

  I would like some help on how I can use margining and padding more efficient in this design. I acknowledged that my small absence in designing designs in HTML and CSS has caused me to be a little rusty when it comes to these fundamentals and would like some guidance to make my design more identical then how it looks.

  If anyone can, in their free time, to look at my code and tell me what I can do for next time would be greatly appreciated.

• 
  Submitted 6 months ago

  Testimonial Grid Section

  • HTML
  • CSS

  0

  20

  ---

  I need help with being able to implement this design in a more optimal way. Always room for improvement!