Responsive landing page using HTML, SCSS and JavasScript

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.