Age Calculator App using BEM methodology

Community feedback

• 

  P

  Erine Natnat•160

  @rinsterPosted over 1 year ago

  Amazing job on the animation and in vanilla JS too! I did mines in Vue.js and used Moment.JS library to handle the date logic.

  For handling errors, I recommend having a global object to hold your error states and update it accordingly:

  const errors = {
  	'errorsPresent' : 'false',
  	'dayError': "",
  	'monthError': "",
  	'yearError': ""
  }
  

  I use an errorsPresent key so I don't have to check the entire object. A sample validation logic can look like this:

  
  // Year
  let currentYear =  new  Date().getFullYear();
  if (yearInput === "") {
  	errors.yearError = "This field is required";
  	errors.errorsPresent = true;
  } else if (isNaN(Number(yearInput))) {
  	errors.yearError = "Must be a valid year";
  	errors.errorsPresent = true;
  } else if (Number(yearInput) > currentYear) {
  	errors.yearError = "Must be in the past";
  	errors.errorsPresent = true;
  }
  

  So if errors.errorsPresent === true you can update the DOM by inserting css style classes and the error messages from your errors object.

  .is-danger--border {
  	border: 1px solid hsl(0, 100%, 67%);
  }
  
  .is-danger--text {
  	color: hsl(0, 100%, 67%);
  }
  

  Don't forget to clear your error states and messages if the user updates the date again. Hope this helps :)

  Marked as helpful

  1

  ---

  

  Deivisson Lisboa•190

  @DeivissonLisboaPosted over 1 year ago

  Thank you, @rinster, for your helpful feedback. With your suggestion, I was able to overcome my struggle of trying to come up with some clever way to dynamically retrieve all small tags and display the error message. I now understand that in the end, simpler is better.

  0