Responsive landing page using HTML, SCSS and JavasScript

Please log in to post a comment
Log in with GitHubCommunity feedback
- @agomez99
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
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord