Email sign-up form with thanks message HTML CSS TailwindCSS JS

@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.

@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(); } });

@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!