11st challenge: Ping coming soon page

Community feedback

• 

  Luka•820

  @LukaKobaidzePosted over 2 years ago

  Hello!

  In your outputmessage(self) function

  var message;
  
  message = document.createTextNode(self);
  errormsg.appendChild(message);
  

  you can remove these lines and instead of that, add errormsg.textContent = self. This will change the text of that element.

  The reason why border color is not applying is because in this line var address = document.querySelector('[name="email"]').value you are getting value of the element instead of the actual element (remove .value), and then add address.style.borderColor = 'any color'

  Marked as helpful

  2
• 

  Abhik•4,840

  @abhik-bPosted over 2 years ago

  👋 Hello Drunken Neoguri , nice to see you complete another challenge with a great solution, well done 🤩🤩🤩

  If I have understood correctly your question then a easy solution is to add a change event listener to the email input & then check there if email matches then show error message else hide it. Another way to deal that is whenever the Notify Me button is clicked then check the & display/hide the error message. Here is the code for this approach (please change it according to your code):

  const emaiInput = document.querySelector("input");
  const emailChecker = /\S+@\S+\.\S+/;
  
  document.querySelector("button").addEventListener("click", () => {
    if (!emailChecker.test(emaiInput.value)) {
      emaiInput.classList.add("error");
  
      document.querySelector(".error-message").style.display = `block`;
      setTimeout(() => {
        document.querySelector(".error-message").style.transform = `scale(1)`;
      }, 100);
    } else {
      if (emaiInput.classList.contains("error")) {
        emaiInput.classList.remove("error");
        document.querySelector(".error-message").style.transform = `scale(0)`;
        setTimeout(() => {
          document.querySelector(".error-message").style.display = `none`;
        }, 300);
      }
    }
  });
  

  Hope this helps 🤞 and please code amazing solutions like this 👍

  0