Age Calculator made using #Flexbox, ES6 JavaScript, Responsive.

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595Posted about 1 year ago

  Hi, @Oyasikelly

  I've few points for you -

  • Instead of width:40% for the main tag, you can provide it in some different value, so it'll be responsive for tab screens below <=900px.

  • Try to improve font sizes for the input fields, font-size: 1.3em; would be fine.

  • When you submit an empty form it shows the error messages but suddenly it gets hidden. Instead, you should show the error messages until the user fills the input again. Also, the font size and weight are quite big.

  • Although, you have the error message for negative input values. You can provide the min="1" attribute to the inputs so that user can't decrease them using the keyboard's arrow down and up key.

  • Instead of h1 tag for the input label you should use the <label for="<ID_OF_INPUT>"> tag, for example:

  <label for="day">Day</label>
  <input placeholder="DD" type="number" class="input--1" min="0" id="day">
  

  • Always around your inputs inside <form> tag wherever required. And use the button/input type="submit", and on form submit event listener call e.preventDefault() so it won't show the form data in the browser URL section.

  • For the arrow icon image you can keep the alt="" empty. Use alt with some unique values for main content images.

  I hope these points will help you.

  Happy Coding

  0

  ---

  

  Oyasi Kelly Ogheneoghagha•200

  @OyasikellyPosted about 1 year ago

  @KrishnaVishwakarma1595 thank you for these informations😊, I really appreciate them.

  1