
Design comparison
Solution retrospective
Things I've tried
- Tried Hover animation & transition
- Used regular expressions for email form validation
- Scored 99% on Google PageSpeed Insights
- Considered web accessibility
- Responsive for Mobile, Tablet, Desktop devices
Things I should improve
- Code refactoring : I should study more about reducing duplication when writing JavaScript🤣
- Image Flickering : Image is flickering near desktop breakpoint. 😂 If anyone knows a solution, please let me know! It's gonna be a huge help :D
Community feedback
- @tuhamworldPosted about 1 month ago
Well done on the solution. I noticed some errors which are quite important to fix:
-
The mobile view submit button is overlapping. I attached a screenshot of the submit button overlapping here: overlapping here
-
Success Message is now showing up: After filling in the email address, the success message is meant to show up but I noticed yours wasn't showing up - even after filling in the correct email address.
-
Error messages are not showing as well : Validations for the correct email address such that when an incorrect email address is inserted, it should show an error message with the color
Marked as helpful1@zeeguPosted about 1 month ago@tuhamworld
OMG Thank you so much for the detailed feedback🤩👍Thank you so much for letting me know! I was able to learn about the important mistakes I missed.
- Screen capture! Amazing. I didn't know there was such a smart way! I should use it, too🤣
- Originally, I tried to locate the Submit button at the bottom of the page, but I didn't expect overlapping errors to occur.
- From a user experience point of view, I should modify the button to be located under the email input.
- (&3) What a huge mistake 😂 I noticed that I left out an important part!
- When loading jacascript, I had to write
defer
together to be in the head area, but I missed it. Maybe that's why javascript didn't work properly.
0@zeeguPosted about 1 month ago@tuhamworld
I updated the code after checking the feedback you said. Again, thank you soooo much for your sharp feedback, my friend😁 Hope you have a great day! And happy coding💪
0@tuhamworldPosted about 1 month ago@zeegu
Well done. I have checked it again, and it works really nice.
Two things you did awesomely well:
-
Adding the email validation upon users input (instead of onSubmit)
-
Using display: none and flex for the success design box up.
Well done once again
Marked as helpful1 -
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