Skip to content
Submitted about 1 year ago

Responsive Age calculator app with SAAS, JS and BEM technology

Maksym•210
@Maksio07
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi, there is my solution for this challange. I hope, that the code is easy to reading, becouse I'm still learning. Thanks for your freedback.

Community feedback

  • Better5afe•850
    @better5afePosted about 1 year ago

    Hi Maksym!

    Firstly, congrats on completing this project! I hope you had fun while making it and you gained a lot of new experiece!

    Please find some minor suggestions on what can be improved below:

    • If you enter a future date but still within 2023, the form is submitted sucessfully and the result shows up in negative numbers (I tried it with 27.09.2023).
    • In BEM technology, double dash -- suggest that the element is a modification. Therefore, instead of app-body__inputs__box--label-day I would use app-body__inputs__box-label--day and the same for app-body__results__box--result-years > app-body__results__box-result--years.
    • Please change the lang attribute inside the <html> tag to en since the app is written in English.
    • For better semantic, I would suggest using a <form> tag instead of a standard section as a container for inputs.
    • An optimal font size set inside the html selector should be 62.5% if you want to later use it to adjust elements' font size with rem or em units.
    • Instead of using separate margin-top and margin-bottom for the same element (the same goes with padding), you can use a shorthand property: margin: 6rem 0 4rem.
    • Since you are working with SASS, you can use variables to store the colors. It makes them easier to use throughout the code and adjust if needed.

    Overall, good job and the project is pretty solid as it is. Still, I hope you find my comment helpful.

    Happy Coding! 🎃

    P.S. Pozdrowienia z Polski 😉

    0
    Maksym•210
    @Maksio07Posted about 1 year ago

    Hi @better5afe,

    Thank you for your freedback, it was very helpful. I used all your sugestions and fixed errors in my solution and it looks much better.

    P. S. Pozdrawiam serdecznie 😉

    1

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