Heyyy, its been a while , you wrote some amazing css btw , like it flew over my head since I havent used those practices in a while, altho I did want to comment on your JS.
1. Font-family inside input tags : Your input.target.value dont seem to inherit the font-family as rest of the elements making it look awkward wrt rest of the page...you must've forgotten , nvm , a simple font-family:inherit would have accounted for that easily.
2.User Form Validation: Nothing happens when we click on Send Message btn , like you could have added a success page as an indicator to make sure the message has been submitted . Even if it is not given in the design , some form of indication would have been nice . . . would have made for a good UX. You could have simply reset the state values and added a toast notification with a message Message Sent when the user submits the form , instead of hanging user in the middle.
I AM SURE YOU ARE AWARE OF THINGS I AM GOING TO SAY DOWN BELOW,BUT IF NOT THEN . . .
3. Validation Logic : I am not really good in regex , but I'd still recommend that if you find it difficult to write valid regex , just copy it from the net , its ABSOLUTELY FINE. Because there will always be cases you didn't account for/ escaped your mind at the moment. For example in
function validateName(name) {
return name.length > 0;
}
you are just checking the length of name , when you should have accounted for other cases as well like the user's name doesn't contain numbers/special characters . . . or simply saying it contains only letters. Something like /[a-zA-Z]/ would have been better . . . this is not the exact regex , but I hope that you get my point .Also it's not like these things came in my mind when I first did them , but the exp I gained after googling what a valid name/email regex should look like allowed me to use it later in the future as well . . .google/GPT the regex when you can.
function validateEmail(email) {
const re = /\S+@\S+\.\S+/;
return re.test(email);
}
Here as well , you are not checking whether the extension is correct or not, so something like [email protected] turns out to be a valid email address. For extension you should have limited to 2-3 characters.
Disclaimer: This might not be right , since I have forgotten as well
Something like : /\S+@\S+\.\S+{2,3}/ would have been appropriate . . .again google it
Why should we do all this? Because it allows us to validate user in a better way and also makes for a good user experience. Everything else was great , again great CSS, seemed reusable , also you avoided use of unnecessary declaration of classNames . . . . cheers 🥂🥂
