Newsletter sign up form using Flex, absolute Position

Community feedback

• 

  _SabijaThor_•355

  @SasaVaticPosted about 1 year ago

  Hi Thi Lam, you have done nice work. I will give you some hints in improving your solution which you can use on any project you encounter. First thing I noticed is that page refresh when you submit the form. This is default behavior with forms which can be prevented using javascript. Also I excluded some of javascript code that is not necessary.

  let emailError = document.querySelector('#email-error');
  let emailField = document.querySelector('#email-field');
  let form = document.querySelector('form');
  
  // No need for this emailFiled.value property holds value from the input field
  // let inputValue = "";
  // emailField.addEventListener("input", function(event) {
  //     inputValue = event.target.value;
  // });
  
  // Prevent form submit so that page does not refresh
  form.addEventListener('submit', (e) => {
      e.preventDefault()
  })
  
  function emailCheck(e){
      if (!emailField.value.match((/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/))){
          emailError.innerHTML = "Valid email required";
      } else {
          emailError.innerHTML = "";
          document.querySelector('#sign-up').classList.add('hidden');
          document.querySelector('#success-popup').classList.remove('hidden');
          // Remove line under since we use emailField.value now
          // document.querySelector('span').innerHTML = inputValue;
          document.querySelector('span').innerHTML = emailField.value;
      }
  }
  
  document.querySelector('#dismiss').addEventListener('click', function(){
      document.querySelector('#sign-up').classList.remove('hidden');
      document.querySelector('#success-popup').classList.add('hidden');
  })
  

  Whole submit logic can be written inside form submit event callback function. But if I modify code to much it wont be so clear. Also I have created JSFiddle example of responsive div which uses max-width CSS property. It is much better to use max-width in this case then width because width is more strict and not responsiveness friendly when it is set up using px units. There are some comments in the example so you can more clearly understand why and what. If you want to learn to make more responsive solutions there is Conquering Responsive Layouts course by Kevin Powell. You can find it on Frontend Mentor. It helped me to improve my html and css code. Happy coding Thi Lam 🙂

  Marked as helpful

  0

  ---

  

  Thi Lam•140

  @zoetlamPosted about 1 year ago

  @SasaVatic Hi SabijaThor, Thank you so much! Your feedback is incredibly helpful to me, and I will definitely try out your suggestions. I really appreciate it.

  1