Age Calculator - SASS and (a lot of) JavaScript 😅
Design comparison
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
- @julian1665Posted 11 months ago
My friend, it looks very nice. But it seems buggy, I inputted my birthdate and put out an inaccurate number.
4@BlackpachamamePosted 11 months ago@julian1665 I agree, I think the problem is in the months.
1@danielmrz-devPosted 11 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 😊
1@OrkhanIsmayillPosted 10 months ago@danielmrz-dev bro,i have written the validations for this program. If you want, you can take a look at my code :)
0 - @ChrisJRM92Posted 7 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! 👌
1@danielmrz-devPosted 7 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 😊
1 - @davidsonaguiarPosted 9 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.
1@danielmrz-devPosted 9 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 😁
0@davidsonaguiarPosted 9 months ago@danielmrz-dev Massa, acho que vou fazer isso também, vou fazer todos e depois revisar (refatorar).
1 - @piushbhandariPosted 11 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
1 -
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