Age Calculator App with happy birthday message

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello Joseph, your project turned out incredibly well, it's close to the proposed design, and has a very unique theme. I also found it interesting that you already created a link between it and your Portfolio.

  I also noticed that you used a neo-brutalism aesthetic for your homepage button, so it would be interesting to add this aesthetic to the calculator as well, to make it more cohesive. But that's just a suggestion.

  Regarding your code, it's clean, but it doesn't seem to be correct because, for example, I entered 14/07/2001, and the result returned to me was "23 years, -3 months, 16 days". In this way, only the days are correct, while the month and year are not. What you can do is add a way so that when the month has a negative value, the year is reduced by 1.

  Also, in your logic, you didn't include leap years, you can do this using the modulo operator to see if the year is divisible by 4.

  Below is the code you can use to make the correct calculation (Note that only a small portion has been changed for this, and it was in the calculateAge function):

  
    let yyyy = todaysYear - birthDate.getFullYear();
    let mm = todaysMonth - birthDate.getMonth();
    let dd = todaysDay - birthDate.getDate();
  
    if (dd < 0) {
      mm--;
      dd += daysPerMonth[birthDate.getMonth()];
    } else if (mm < 0) {
      yyyy--;
      mm += 12;
    }
  

  And again, congratulations, if you have any questions please comment below and I'll try to help as best as possible, and if something goes wrong with the code I provided, let me know as well.

  Marked as helpful

  0

  ---

  

  Joseph Reyes•440

  @JreyIVPosted 7 months ago

  @R3ygoski

  thanks for letting me know about the bug. I fixed it shortly after posting this so it should be working now. And yeah I honestly just had to be somewhere but wanted to get this up already so I didn't bother with the leap year. I'll definitely give it a shot some other time!

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE BUTTON :

  • Your solution's button markup for Mobile devices is not accessible, that's simply because those elements does not have any text content or an aria-label attribute that describes its purpose or function. The alt attribute on the <img> element inside the button is not an adequate replacement for an accessible name.

  ---

  • Incorrect use of <img> inside <button>: While it is possible to have an <img> element inside a <button>, the <button> must want to have an aria-label attribute to provide an accessible name for the button.

  ---

  • Here's an example:

  <button aria-label="Click to calculate your age" type="submit" id="submitBtn">
     <img src="./assets/images/icon-arrow.svg" alt="arrow icon">
  </button>
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0

  ---

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  @0xabdulkhalid

  Hello. I always see you provide feedback. You gave me feedback earlier and you were correct. It's better to vertically center with align items, it's just for me my attribution was causing issues. This was the source of my confusion. I figured it out. Keep up the great work.

  0