Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Age Calculator built with Bem, SASS/SCSS, Javascript and Vite

#accessibility#bem#sass/scss#vite
Johnny 470

@johnnysedh3lllo

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The Javascript was so much fun to write. Well, mainly the algorithm.

  • what do you guys think of my code?

Community feedback

@petritnuredini

Posted

Congratulations on completing the Age Calculator App project! Your project shows a great combination of HTML, CSS, and JavaScript skills. Here are some best practices to consider for further improvement:

  • Semantic HTML: Good job on using semantic tags like <article> and <form>. Ensure to use semantic elements wherever possible for better accessibility and SEO. More on semantic HTML can be found here.

  • CSS Best Practices: Your CSS is well-structured. Consider using a consistent naming convention like BEM for CSS classes to improve readability and maintainability. Learn about BEM here.

  • JavaScript Validation: It's great that you've implemented custom validation. Enhance this by providing real-time feedback as the user types, rather than on form submission only. More on form validation here.

  • Responsive Design: Ensure that the app is fully responsive on various devices. Test across different screen sizes and make necessary adjustments using media queries. More on responsive design here.

  • Accessibility: Focus on making your website accessible. This includes proper use of ARIA roles and ensuring that all interactive elements are keyboard accessible. More about web accessibility can be found here.

  • Performance Optimization: Optimize your application for performance, especially if you plan to scale it up. This includes optimizing images, minifying CSS and JavaScript files, and reducing HTTP requests. More on web performance here.

Great work on this project! Your dedication to learning and applying web development concepts is commendable. Keep exploring and experimenting with new ideas and technologies to further enhance your skills.

1

Johnny 470

@johnnysedh3lllo

Posted

Thanks for the feedback @petritnuredini

0

Please log in to post a comment

Log in with GitHub
Discord logo

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