Base Apparel coming soon page using HTML, CSS and JavaScript
Design comparison
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 theevent.preventDefault()
after theif
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 usemax-width
andmin-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 -0@Ax-cdPosted over 2 years agoHi @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 GitHubJoin 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