Responsive Age Calculator App

Community feedback

• 

  Shahjahan Sarfraz•270

  @Jahan-ShahPosted over 1 year ago

  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 😄.

  Marked as helpful

  2

  ---

  

  Madhav•50

  @Madhav3198Posted over 1 year ago

  Hi @Jahan-Shah 👋,

  Thank you so much for taking the time to review my work and provide valuable feedback. I truly appreciate your effort and suggestions for improving the code.

  I am grateful for the specific recommendations you mentioned regarding the HTML and CSS aspects of my project. Your advice to use semantic elements like <section>, <article>, and the <main> tag makes perfect sense, and I will definitely incorporate them in my future projects to enhance accessibility.

  I also appreciate the suggestion to include an <h1> element with the class "sr-only" for screen readers. This will ensure that the content is inclusive and accessible to all users.

  Regarding CSS, I understand the importance of using relative units like rem or em instead of pixels for font sizes. I will make sure to adopt this practice moving forward to ensure better scalability and accessibility for users who adjust their browser settings.

  Once again, thank you for your valuable feedback and guidance. I will take these points into consideration and apply them in my future challenges. Your input is truly useful and appreciated!

  0
• 

  Chanda•800

  @Chanda-AbdulPosted over 1 year ago

  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!

  Marked as helpful

  1

  ---

  

  Madhav•50

  @Madhav3198Posted over 1 year ago

  Hi @Chanda-Abdul ma'am,

  Thank you for taking the time to review my project and provide me with feedback. I really appreciate your input, and I am grateful for the constructive criticism. Your suggestions are valuable, and I will definitely keep them in mind as I work to improve my project. Once again, thank you for your time and your insights.

  0