Newsletter sign-up master

Community feedback

• 

  Roselin Y•330

  @Vanillatte68Posted 4 months ago

  Good job on completing the challenge! This is not an easy challenge for beginner but you did a good job to make it as close to the design. There are few suggestion i could give:

  • Try to use media query in the CSS to build mobile view. E.g. use @media screen and (max-width: 768px) to adjust any elements to fit in display with 768px width and below. MDN
  • You can change list style by using ::before in the CSS by filling the content with the checkmark icon, then adjust the alignment by using padding. MDN
  • Try to make image container to contain the image. Place the container outside the sign-up content, then adjust how the overall content flow using flexbox in the CSS.
  • For the javascript, try to make function to check if the input value is empty/invalid. In my case this is how i build the script:

  function validateForm() {
    let email = document.getElementById("email");
  
    // if email empty/invalid
    if (!email.value.match(/^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/)) {
      errorMsg.style.display = "block";
      email.classList.add("inavlid");
    } 
      //if email valid
      else {
      errorMsg.style.display = "none";
      email.classList.remove("inavlid");
      emailValue.innerHTML = email.value;
      form.reset();
      mainForm.style.display = "none";
      successForm.style.display = "flex";
    }
  }
  

  0
• 

  Manish Sindur•190

  @manishsindurPosted 4 months ago

  The best way to learn js is by writing more and more JS. Remember consistency is the key.

  • At least make it responsive.
  • Do a bit research on Form Validation and apply it.
  • Email entered by user should be displayed on the success message, that gives assurance to the users .

  0