Responsive Age Calculator with Validation Using JavaScript and CSS
Design comparison
Solution retrospective
I’m most proud of completing the entire project with pure JavaScript and implementing error validation for user inputs effectively. It feels great to see the app handle invalid dates and empty fields without breaking!
Next time, I would focus more on optimizing the structure of my code to make it more modular and reusable, especially by using functions more effectively.
What challenges did you encounter, and how did you overcome them?Validation Challenges: Ensuring user inputs were within valid ranges (e.g., day between 1-31). I overcame this by writing custom logic to check conditions and give feedback. Styling Dynamic Error Messages: Positioning the error messages dynamically below each input field was tricky. I resolved it by using CSS .error-text with margin and display properties. Input Behavior: Handling empty inputs and ensuring the calculator didn’t crash. I added clear checks for NaN values in JavaScript to prevent issues.
What specific areas of your project would you like help with?I’d love feedback on how I could better structure my validation logic for scalability. Suggestions for improving the UI design and making it more visually appealing are welcome! Any tips on code readability and best practices for JavaScript projects.
Community feedback
- @IonCatanaPosted 4 months ago
Hey Nelly, i like to give you some feedback.
- HTML (index.html) Positive Points: Proper use of semantic HTML tags. External stylesheet and font-awesome are included for styling. Improvements: Add a <title> tag for better SEO and accessibility. Include descriptive alt attributes for all images if any are present (couldn't confirm due to limited preview). Use a <label> element for input fields to improve accessibility for screen readers. Organize meta tags and external links in a logical order.
- CSS (style.css) Positive Points: CSS is structured and uses consistent formatting. Box-sizing is set globally, which is a good practice. Improvements: Consider using CSS variables for repeated values like colors and padding to make the code easier to maintain. Use a mobile-first approach by starting with styles for smaller screens and adding media queries for larger devices. Avoid hardcoding height values like height: 100vh in certain sections, which might cause issues on smaller screens or mobile devices. Include hover and focus states for all interactive elements, ensuring better user experience.
- JavaScript (script.js) Positive Points: Variables are clearly named, reflecting their purpose. Code includes basic structure for validation. Improvements: Use addEventListener instead of directly binding events in HTML for better separation of concerns. Include comments explaining key functions and logic. Validate the date input more comprehensively (e.g., using libraries like date-fns or moment.js for better reliability). Optimize repetitive error-handling logic by creating reusable functions. Consider using try-catch blocks for error-prone operations like date calculations.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord