CSS, HTML and not-that-well-working JavaScript

Community feedback

• 

  James Mitchell•295

  @iamjmitch

  Posted over 4 years ago

  Hi there,

  Ill do my best to try and explain some stuff

  To answer your reset question, try form.reset(). this worked for me.

  the other issue you are having is that the JS is not actually capturing the value of the input. const email = document.getElementById('email').value.trim() is running at page load, not when you hit the notify button so the inputted email address is never actually being captured and passed to the checkInputs() function for validation. Try declaring email on load const email = document.getElementById('email') and then inside your eventListener have something that looks like

  form.addEventListener('submit', (e) => {
    e.preventDefault();
   var inputtedValue = email.value.trim();
    checkInputs(inputtedValue);
  })
  

  this will make sure that the most up to date value is always passed to your check function when the user hits the notify button

  Then with your actual check function, if(!email) is checking to see if the variable doesn't exist which, as you are declaring it on page load, email will never not exist and the first block of code will never run. What you want to do is check whether that value is an empty string or ""

    function checkInputs(inputtedValue) {
    if (inputtedValue  === "") {
      message.classList.remove('valid')
      message.classList.add('invalid')
      message.innerText = 'You forgot to enter your address'
      message.style.display = 'inline-block'
    } else if (inputtedValue.match(emailPattern)) {
      message.classList.add('valid')
      message.classList.remove('invalid')
      message.innerText = 'Your email address is valid'
      message.style.display = 'inline-block'
    } else {
      message.classList.remove('valid')
      message.classList.add('invalid')
      message.innerText = 'Oops, something went wrong'
      message.style.display = 'inline-block'
    }
  }
  
  

  Have a look at the above modified function and see if you can work out whats going on. All the above put together should result in the functionality that your after. Hopefully this somewhat explains some stuff. Please let me know if you still dont understand and I can see how I can help

  14
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey there, Katrien S! 👋

  It's great to see you complete another challenge! 😀 Good work on this one! 🙌 Your solution looks good and is responsive! 👍

  I noticed that when the input element is focused, the rest of the content below the input element "jumps" down a bit due to the 2px border being added to the input element (which slightly increases its height and width). You can get rid of that and make the focused state appear more smoothly by adding an invisible 2px border to the input element (by setting the border-color to transparent) and simply changing the color of the border to a blue color when the input element is focused. 😉

  Keep coding (and happy coding, too)! 😁

  01