Responsive landing page using CSS grid, flexbox & Vanila Js

Solution retrospective
This is the first Challenge for me. I Can't make the form alert message(if the user give an invalid email) and I have no idea how to do it. how can i do this? all feedback will be appreciate 😊😊
Please log in to post a comment
Log in with GitHubCommunity feedback
- @benjoquilario
Hi Nasim Reja
You did a great job on this one. It looks good and response rather well.
Some suggestion to fix your
A11y
orACCESSIBILITY ISSUES
to ensure that all link names are accessible you need to add thearia-label
on your logo defining where the link would take them. Eg.<a href="#section1" style="width: 17rem;" aria-label="Bookmark - Home Page">
As for the email validation you can add this on your script file.
form.addEventListerner('submit', function(e) { e.preventDefault(); const email = document.querySelector('#email'); let re = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/; if (re.test(email.value)) { // Will check if there a value of the re variable success.classList.add('success'); } else { success.classList.remove('success'); } })
Keep coding and Good Luck!
- @optimusprime202
Hey @nasim67reja, I knew you could do it.
- @LucasBargas
Congrats! But the mobile menu can be 'position: fixed' and close when click on the links.
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