Design comparison
Solution retrospective
Hey there 👋
I did this challenge long time ago ,I found it's repository and decided to publish it:)
Features 🎯
- Responsive
- 100% functionality in desktop and mobile
- Dom (document object model ) and ES6
- success and error state
Built with 💥
- Html5 and Css3
- Javascript
Your feedbacks help me to write more clean code so Don't hesitate to write it 😉
Community feedback
- @petritnurediniPosted 10 months ago
Congratulations on completing your Age Calculator App project! 🎉 Your effort in creating a user-friendly and functional application is truly admirable. Here are some best practices recommendations to further enhance your project:
-
HTML & Accessibility:
- Great job using semantic HTML. To enhance accessibility, consider adding
aria-label
attributes to inputs for better screen reader support. - Use
label
elements withfor
attributes matching theid
of the respective input fields for improved form accessibility.
- Great job using semantic HTML. To enhance accessibility, consider adding
-
CSS Styling:
- Excellent use of CSS variables for easy maintenance of color schemes. Consider using variables for common spacing units (margin, padding) for consistency.
- For responsive design, use media queries to ensure the app looks good on all devices. Consider using relative units like
em
orrem
for font sizes and layout dimensions.
-
JavaScript Best Practices:
- Good structure and clean code. For better readability, consider separating your logic into functions with single responsibilities.
- Use
const
for variables that don't change andlet
for variables that do. This helps to avoid accidental reassignments.
-
Performance and Optimization:
- Optimize your images and assets to reduce load times.
- Minify your CSS and JavaScript files in the production version to improve performance.
-
General Suggestions:
- Consider adding more interactive elements, like a date picker for input fields.
- Implement client-side validation for the date input to ensure user convenience and data integrity.
-
Learning Resources:
- For Accessibility: Web Accessibility Initiative (WAI)
- CSS Tricks and Tips: CSS-Tricks
- JavaScript Best Practices: MDN Web Docs
Your journey so far is impressive, and your commitment to learning and improving is evident in your work. Keep exploring new concepts and technologies to further enhance your skills. Looking forward to seeing your future projects! Keep coding and keep growing! 💻🌱
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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