Email sign-up form with thanks message HTML CSS TailwindCSS JS
Design comparison
Solution retrospective
Hope can be good just added this any extra advice on improving and if worth compliment would be kind thank you take care gn gm frens.
Community feedback
- @kaiser-sbPosted 12 months ago
Hey Ryoshi,
Great job on completing this challenge! Just some minor things which I find you may have a look at -
- The confirmation message is supposed to show the Email ID that user entered in the field and not a default ID. A minor fix will achieve that.
- The
input
field is normally not for a cursor pointer - although it's just your choice. - You can improve the validation by putting in a real-time validation while the user is entering their Email (just to be more realistic - it's totally fine just the way it is though)
Thanks and happy coding!
Marked as helpful1@Ryoshi1001Posted 12 months ago@kaiser-sb
Hello Sunetra very kind of you to take the time and find some extra things for the form. I was so into the building of the design did not notice the email connecting with the input email I will work on that part and for cursor pointer just went by the design images it had a cursor I didnt want to add it but wanted to make something similar to the designs. Real time validation would be very good I will learn how to add this feature when there is time. Nice of you to take the time and share some very useful things that will help me be a better developer take care.
1@Ryoshi1001Posted 12 months ago@kaiser-sb hope these corrections you added are ok and it is fine to put code here on this website take care am practicing extra things here already
The confirmation message is supposed to show the Email ID that user entered in the field and not a default ID. A minor fix will achieve that.
~1. fixed: modalEmail.innerText = emailInput.value;
The input field is normally not for a cursor pointer - although it's just your choice.
~ 2. fixed: emailInput:hover { cursor:pointer; } erased
You can improve the validation by putting in a real-time validation while the user is entering their Email (just to be more realistic - it's totally fine just the way it is though)
~3. fixed:
CSS .email-input-ok { color: #383131; border: 1px solid hsla(139, 70%, 30%, 0.2); background-color: hsla(139, 66%, 71%, 0.2); }JS Real-time Email Validation with colors for form input emailInput.addEventListener("input", function () {
if (emailValidation(emailInput.value)) { emailInput.classList.add('email-input-ok'); removeErrors();
} else { addErrors(); } });
1@kaiser-sbPosted 12 months ago@Ryoshi1001 Thank you so much for such a detailed reply. I've checked your project once again and it's wonderful that you could learn and fix things in such a little time! The only thing that remained is the pointer cursor for the input. That is because it's mentioned in the
.cursor-pointer
class. It's getting default state - not really hover state. Just as a side note, I noticed a lot of stylings in your CSS file - and I guess you can downsize it a bit while refactoring. You can combine similar styles for different components, adding all the targeted attributes for one element under one class etc. This will help you maintain your code and understand the same later on. Hope this helps. Thanks!1
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