Responsive Age Calculator App

Hi Madhav 👋. Well done on completing this challenge. To improve your code I've got some feedback

HTML:

• Use Semantic elements like <section>, article> instead of using <div>. Use the <main> tag to wrap all the main content in your HTML file to improve the accessibility of your page.

• You must include one heading 1 (h1). Even though there is no use of the h1 you should create an <h1> element in your HTML file that is inclusively hidden but readable to screen readers. You can copy this style to do that. e.g: <h1 class="sr-only">Age Calculator App</h1>.

• Use <label> tag above <input> instead if using <div> for more accessablity. e.g: <label for="day">Day</label> <input placeholder="DD" type="number" id="day" />.

CSS:

• Use relative units like rem or em instead of using pixels in the font size. The absolute units like pixel do not scale according to the user's browser settings, which can cause inaccessibility for users who uses large font size on their browser. You can read more about that here.

I hope you find this feedback useful 😄.

Great job! Overall everything looks pretty good.

BUT I noticed a few things...

• If I enter a date and one of the inputs it invalid, the output for the other two dates is still calculated. Maybe you could update this so that nothing gets calculated if any of the inputs are invalid.

• When the user updates an invalid input, the error styles persist although there are no errors

• You could also add a bit more error handling.

• For leap years- Feb 29, 2000 should be valid and Feb 29, 2001 should be invalid

• For various month lengths - April 31,2023 should be invalid because April only has 30 days

• Dates that are later in this month or later in this year - tomorrows date should be invalid, May 18, 2023; and any date later this year should be invalid, June 18,2023.

• For the HTML you used <div>'s for most elements. Consider using other HTML elements for semantic purposes. This is a great article that explains why this is important https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/

• The JavaScript code could be more concise. There is some repetitive code that could be condensed and combined into reusable functions. This is a great resource to learn about DRY code https://www.educative.io/answers/how-to-build-a-counter-application-with-javascript

• Your CSS looks really good, I like that you made it responsive by using media queries.

I hope that helps!