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

Community feedback

• 

  Julian Ponsard•20

  @julian1665Posted 10 months ago

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

  4

  ---

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

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

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 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

  

  OrkhanIsmayill•70

  @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
• 

  Christian R•20

  @ChrisJRM92Posted 6 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

  ---

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 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
• 

  Davidson Aguiar•320

  @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

  ---

  

  Daniel 🛸•44,250

  @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

  

  Davidson Aguiar•320

  @davidsonaguiarPosted 9 months ago

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

  1
• 

  MOHAMAD•60

  @mohamad-hajiloPosted 10 months ago

  Excellent 👌👌👍

  1
• 

  P

  Jax Teller•670

  @piushbhandariPosted 10 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