Skip to content
OverviewSolutions
33
Comments
13

Austine Gomez

@agomez99San Antonio, TX660 points

Web Developer with a passion for creating engaging and user-friendly web applications.

Latest solutions

View more solutions

Latest comments

  • Austine Gomez•660
    @agomez99

    Awesome work!!

    Marked as helpful
  • Austine Gomez•660
    @agomez99

    Looks Great, I use Flexbox alot mostly for simplicity. Flexbox provides a straightforward and easy-to-understand way to center content both horizontally and vertically, reducing the need for complex CSS rules. Using Flexbox for centering content offers a powerful and flexible solution that saves development time.

  • Austine Gomez•660
    @agomez99

    Hello! great work removing the extra dot should show your image

     <img src="../images/image-qr-code.png" alt="">
  • Austine Gomez•660
    @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
  • Austine Gomez•660
    @agomez99

    hello looks great, a suggestion would be if you want to utilize Flexbox more to position your container you can change from absolute position to center it to:

    .container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;  
background-color: hsl(0, 0%, 95%);
border-radius: 8px;
}

    This would stretch the width of the whole page, so then you want to place height and width on your divs

    .sedan {
background-color:  hsl(31, 77%, 52%);
font-family: 'Big Shoulders Display';
font-weight: 700;
font-size: 20px;
width:20rem;
height:28rem;

}

    You may also have to adjust your container height for mobile query as well.

  • Austine Gomez•660
    @agomez99

    Hello great work, your path to your image is from images folder src="images/image-qr-code.png

    Should be ./image-qr-code.png

    Marked as helpful
View more comments