Responsive landing page using HTML, SCSS and JavasScript

Community feedback

• 

  Austine Gomez•660

  @agomez99Posted over 1 year ago

  Hello great job!, I refactored your JavaScript a bit, changed your function to handle submit some to handle the form being submitted with out entering information.

  const subscribeButton =  document.querySelector('.form__button');
  const dismissButton = document.querySelector('.thanks-section__button');
  const principalContainer = document.querySelector('.main-content');
  const thanksSectionContainer = document.querySelector('.thanks-section');
  const emailInput = document.querySelector('.form__input');
  const emailErrorDiv = document.querySelector('.form__input--error');
  
  thanksSectionContainer.style.display = 'none';
  
  emailInput.addEventListener('input', handleEmailInput);
  
  subscribeButton.addEventListener('click', handleSubscribeClick);
  
  dismissButton.addEventListener('click', handleDismissClick);
  
  function handleEmailInput(e) {
  if (emailInput.value === '') {
  showError(emailInput, emailErrorDiv, 'Cannot be empty');
  } else {
  showError(emailInput, emailErrorDiv, '', false);
  }
  }
  
  function handleSubscribeClick(e) {
  e.preventDefault();
  console.log('click subscribe button');
  verifyFilled(emailInput, emailErrorDiv);
  if (emailInput.value.length > 0) {
  principalContainer.style.display = 'none';
  thanksSectionContainer.style.display = 'flex';
  showError(emailInput, emailErrorDiv, '', false);
  }
  thanksSectionContainer.style.display = 'grid';
  }
  
  function handleDismissClick() {
  if (window.innerWidth >= 1440) {
  principalContainer.style.display = 'flex';
  }
  thanksSectionContainer.style.display = 'none';
  }
  
  function showError(input, errorDiv, errorMessage, show = true) {
  if (show) {
  errorDiv.textContent = errorMessage;
  input.style.borderColor = 'hsl(4, 100%, 67%)';
  } else {
  errorDiv.textContent = errorMessage;
  input.style.borderColor = '#D3D3D3';
  }
  }
  
  function verifyFilled(input, errorDiv) {
  if (input.value.length > 0) {
  showError(input, errorDiv, '', false);
  } else {
  showError(input, errorDiv, 'This field cannot be empty');
  }
  }
  

  • Changed the variable name dimissButton to dismissButton for consistency.
  • Replaced anonymous arrow functions with named functions handleEmailInput, handleSubscribeClick, and handleDismissClick.
  • Moved the event listeners below the named functions for better readability.
  • Changed the error message when the email input is empty from "This field can be empty" to "This field cannot be empty" to align with the logic.

  Marked as helpful

  0