Base Apparel Coming Soon using Sass

Community feedback

• 

  Aruj Joshi•290

  @gtalinPosted over 1 year ago

  Congratulations on completing the challenge. The solution looks beautiful.

  I have a small feedback. In your submitted solution, the image for the background pattern cannot be loaded. I had encountered a similar problem in one of the challenges I had submitted where the image was loading fine for me on localhost but was not loading in the live url.

  For background image, the path specified in url should be with respect to the final compiled css file. Right now it is trying to find the url in https://base-apparel-coming-soon-anerpeco.vercel.app/dist/images/bg-pattern-desktop.svg. The location should be background-image: url(../images/bg-pattern-desktop.svg); rather than background-image: url( /dist/images/bg-pattern-desktop.svg);

  I hope you don't mind the feedback.

  1

  ---

  

  Aner Peco•390

  @anerpecoPosted over 1 year ago

  Thanks @gtalin I changed on other pictures but I missed that one. I will fix it.

  0
• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  Fixed code and explanation:

  const submitBtnEl = document.querySelector(".form_btn");
  const emailInputEl = document.querySelector(".email_input");
  const errorImgEl = document.querySelector(".error_img");
  
  let emailValue = "";
  
  let submitMessage = "";
  let messageClass = "";
  let messageContainer = document.createElement("div");
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
  const writeMessage = (mes, cl) => {
    messageContainer.innerHTML = `<p class="${cl}">${mes}</p>`;
    submitBtnEl.parentNode.insertBefore(messageContainer, submitBtnEl.nextSibling);
  };
  
  const validEmail = () => {
    submitMessage = "Thanks for your interest!";
    messageClass = "valid_email";
    writeMessage(submitMessage, messageClass);
    emailInputEl.style.borderColor = "hsla(0, 36%, 70%, 0.5)";
    errorImgEl.style.visibility = "hidden";
  };
  
  const invalidEmail = () => {
    submitMessage = "Please provide a valid email";
    messageClass = "invalid_email";
    writeMessage(submitMessage, messageClass);
    emailInputEl.style.borderColor = "hsl(0, 50%, 63%)";
    errorImgEl.style.visibility = "visible";
  };
  
  submitBtnEl.addEventListener("click", (e) => {
    emailValue = emailInputEl.value;
  
    if (regex.test(emailValue)) {
      validEmail();
      submitBtnEl.disabled = true;
    } else {
      invalidEmail();
      e.preventDefault();
    }
  });
  

  Explanation:

  The insertAdjacentElement method called on submitBtnEl has been changed to parentNode.insertBefore, which places the message container element right after the submit button.

  emailInputEl.style.border has been changed to emailInputEl.style.borderColor, because only the color of the border was being changed, not its width or style.

  The match method called on emailValue in the if statement has been changed to a test method call on the regex expression, which returns a boolean value indicating whether the email is valid. This is a more concise and efficient way of achieving the same result.

  The border color for invalid email has been changed to a lighter shade to match the mockup's requirements.

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  1

  ---

  

  Aner Peco•390

  @anerpecoPosted over 1 year ago

  Hay @Trueboss Thanks for your suggestion

  1