Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base Apparel coming soon page using HTML, CSS and JavaScript

Ax-cd• 310

@Ax-cd

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


(updated) Hi! This is my solution for this challenge. There is a point I'm not sure how to fix:

For the email validation in JavaScript: I can make it work with the "button.addEventListener("click", etc....)" but for some reason it doesn't work with "form.addEventListener("submit", etc....), any idea why?

Feedback on this point, and any other you might notice, is welcome! thank you :)

Community feedback

Account Deleted

Hey 👋,

Great work on this challenge. The design and form validation is working fine, good job! The reason why the submit event is not working is because in your function submitEmail you have placed the event.preventDefault() after the if statement. The function is not able to reach that line of code because of the default behaviour of the form submission so perhaps placing it at the top might help resolve the issue.

Your second issue regarding object-fit: cover - The property itself is used to contain the image within its parent container. As the parent container resizes so does the image. You can use max-width and min-width to control the sizing of the image through media queries or use a responsive unit like REM or % to have the image resize accordingly. Here are some useful articles that might help clarify things -

Delftstack GeeksForGeeks TutorialRepublic

0

Ax-cd• 310

@Ax-cd

Posted

Hi @ktra99 ! I tried to place event.preventDefault() at the top as you said, unfortunately it doesn't work either :/ And for object-fit:cover - The <picture> wasn't placed within a landmark and it caused an accessibility issue, so I ended up using the position:absolute and changed the media-queries; but thanks for the articles they clarify a few things that I will use for future projects :) Thank you for the feedback!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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