Age calculator app

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Great job on completing the Frontend Mentor challenge! Your Age Calculator App shows off your coding skills nicely. Here are a few suggestions to further refine your project:

  1. Use Semantic HTML:

     • Replace <div> elements with more semantic tags where applicable. For example, use <section> for distinct sections of content, <header> for the header area, and <footer> for your attribution section. This improves accessibility and SEO.
     • Example: <div class="container"> could be <section class="container">.

  2. JavaScript Validation:

     • Implement more robust form validation in JavaScript. Currently, you're checking if the input dates are valid based on whether they are empty or not. Consider adding logic to validate the actual date values entered. For instance, check if the day is within 1-31, the month is within 1-12, and the year is a reasonable number.
     • You might also want to add more user feedback for invalid inputs, such as highlighting the input fields in red or showing a specific error message.

  3. CSS Refinements:

     • For improved readability, consider organizing your CSS properties alphabetically or by type (display, positioning, box model, typography, etc.). This makes it easier to find and edit specific properties as your CSS grows.
     • Utilize CSS variables for commonly used values like colors and font sizes. You've started this in the :root selector, which is great. Consistently using these variables throughout your CSS will make theme adjustments much easier in the future.

  Helpful Resources:

  • Semantic HTML: MDN Web Docs - HTML elements reference
  • Form Validation: MDN Web Docs - Client-side form validation
  • Organizing CSS: CSS-Tricks - Strategies for Keeping CSS Specificity Low

  Keep up the fantastic work, and continue challenging yourself. Each project you build strengthens your skills and portfolio. Happy coding! 🌟👨‍💻

  Marked as helpful

  0

  ---

  

  ilker•150

  @ilkerkarahanPosted 9 months ago

  hello there @petritnuredini

  Thank you for your feedback. Yes, I need to use semantic HTML, I will be careful about that.

  I checked whether the date entered during form validation was an existing date by assigning it to input:type'date'. I also used an error message and red border for incorrect date entries.

  1
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 9 months ago

  Hello there 👋 @ilkerkarahan.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Happy coding.

  Marked as helpful

  0

  ---

  

  ilker•150

  @ilkerkarahanPosted 9 months ago

  Hello there @Ezekiel225.

  Thank you for this nice feedback. This browser extension works really well. My best wishes are with you.

  0