Submitted 9 months ago

Age Calculator - SASS and (a lot of) JavaScript 😅

Daniel 🛸• 44,230

@danielmrz-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello! I'm Daniel and this is my solution for this challenge! 😊

This project took my Javascript skills to the next level. The design is very simple, but the many different validations were definitely a great challenge. At least for a Javascript Newbie like me. For the first time I had the opportunity to use switch case on a project. My index.js file is a huge monster 😅! But in the end I managed to add all the required features.

I also added some extra features like a counter up animation for the age result and changed the colors.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

Julian Ponsard• 20

@julian1665

Posted 9 months ago

My friend, it looks very nice. But it seems buggy, I inputted my birthdate and put out an inaccurate number.

Marcos Travaglini• 4,920

@Blackpachamame

Posted 9 months ago

@julian1665 I agree, I think the problem is in the months.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

@julian1665

Yeah, I know. I couldn't make all the validations work properly... most dates are working just fine, but others return an inaccurate answer.

This was the best I could with my current knowledge, but I intend to submit a new answer when I learn how to fix it 😊

OrkhanIsmayill• 70

@OrkhanIsmayill

Posted 8 months ago

@danielmrz-dev bro,i have written the validations for this program. If you want, you can take a look at my code :)

Christian R• 20

@ChrisJRM92

Posted 5 months ago

Excellent work, I want to add that there is also an error with leap years (February 29) but it is an excellent challenge to practice! 👌

Daniel 🛸• 44,230

@danielmrz-dev

Posted 5 months ago

@ChrisJRM92 Yeah you're right. When I posted this project a few months ago I was just starting to study javascript and it turned out full of bugs... I am planning to revisit it soon to fix all the issues. Thanks for checking it out 😊

Davidson Aguiar• 320

@davidsonaguiar

Posted 7 months ago

Muito bom, parabéns. Dica: Teu js ficou muito grande dá pra simplificar. O resultado deu errado quando coloquei minha data de nascimento. Eu transformeu a data atual e data informada em milisegundos e subtrair e depois convertir em anos, meses e dias.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 7 months ago

@davidsonaguiar

Valeu pelas dicas, Davidson! Eu sei que ficou maior do que o necessário, além de ter alguns bugs que eu não sabia como resolver. Na época que postei essa solução, eu não sabia fazer de outra forma e esse resultado aí foi o máximo que eu consegui fazer com o conhecimento que eu tinha quando fiz o desafio. Tô fazendo uma primeira rodada com todos os desafios, e depois vou fazer uma segunda aprimorando cada um deles 😁

Davidson Aguiar• 320

@davidsonaguiar

Posted 7 months ago

@danielmrz-dev Massa, acho que vou fazer isso também, vou fazer todos e depois revisar (refatorar).

MOHAMAD• 60

@mohamad-hajilo

Posted 9 months ago

Excellent 👌👌👍

Jax Teller• 670

@piushbhandari

Posted 9 months ago

nice work.

some suggestions:

i would make these <h2 class="text-day" style="color: rgb(113, 111, 111); transition: all 0.2s ease 0s;">Day</h2> into a label and hook it up to the number inputs. like so: <label for="day" class="text-day" style="color: rgb(113, 111, 111); transition: all 0.2s ease 0s;">Day</label> then add in name/id attributes that have the same value as the for attribute to the input. this way when you click on the label it auto focuses on the input. this is good for accessibility
your .text-day element has an inline style. is there a reason why it's not in a separate stylesheet?
it's best practice + good for accessibility if you add type="button" on your button elements
you can set the alt tag from the icon inside the button to be empty "" as it's useless information for screen reader users. when you have icons, having alt="" is good enough as it's being used as a decorative image
im not sure if there's a tablet design, but when you start to scale the design, the component starts hugging the edges of the screen. i would add side paddings ie. padding-left: 24px; padding-right: 24px; on the body element for example.
may need a 2nd opinion on this but those years/months/days text can just be regular <p> tags instead of <h2>s

Please log in to post a comment

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