Newsletter sign-up master

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";
  }
}

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 .