Single Page Developer Portfolio

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted 8 months ago

  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 🥂🥂

  1

  ---

  

  P

  Jeremy Helsel•670

  @JIH7Posted 8 months ago

  @kabir-afk Thank you so much for this feedback! I was mostly focused on honing my CSS on this project so I phoned the form handling in a little bit. You're totally right, I can and should improve it. I'll look through and implement this feedback and maybe actually hook the form up to something. Thank you for the detailed writeup!

  0