@dylan-dot-c
Posted
Congratulations on completing this challenge, good job.
In terms of design, you did well, only issue is that you didn't add any padding to the input element and the website isn't responsive for smaller screens as well as the design is a different.
For functionality I like that you actually have a separate page for the success element, most people(including myself) used a framework and state to replace the whole container. But there is one issue on that side, the email you have is static and I believe that it should match whatever email that is entered into the input field. So what I suggest is that you find a way to send the email entered from the first page to the second one, and what better way to do so that htmlQueryParams and what makes it even easier on your side is when you did this:
<form action='success.html' id='form'>
This makes that when you submit your form it will go directly to that page and pass any information entered into your form to the success page through htmlQueryParams, but one small detail you missed out was to actually include a name property in your input field so thats how data is passed and thats why its good to have a name property. So your new code should now be:
<input placeholder="[email protected]" id="email" name="email">
and then you can just use URLQueryParams to get the email property and the use it to replace the default email that you have there.
const queryString = window.location.search
const params = new URLSearchParams(queryString)
const email = params.get('email')
And ofcourse you can do some extra checks to make sure everything is good like using the .has method to make sure it exists and you can reuse your isEmail function to make sure its actually good and if not show some kind of error message.
All the best.
