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

agecalculator

Diekololaoluwaβ€’ 290

@SOULBRODA023

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Mohammed Fakihβ€’ 1,590

@javascriptor1

Posted

Hello Diekololaoluwa ,

I just completed this challenge today. Here is my feedback on your solution :

1- Javascript logic is broken and not working right. try to input 1 day 1 month 1 year and you will get wrong result. 2- If used enter 31/04/2023 , it will not show any error message despite date is not valid. 3- Empty fields error is not showing when you don't submit any values. 4- background color is not set. 5- the arrow svg icon is not shown in the button. 6- The labels are not colored in red when there is an error.

I hope this help.

Keep coding πŸš€

0

Diekololaoluwaβ€’ 290

@SOULBRODA023

Posted

@javascriptor1 I will try work on that But I have a problem with the validation actually

0
Mohammed Fakihβ€’ 1,590

@javascriptor1

Posted

Hi @SOULBRODA023 ,

In programming, Always keep this in mind before you start: β€œFirst, solve the problem. Then, write the code. ” – John Johnson

"Solve the problem first, then write the code" is a principle commonly followed in software development. It emphasizes the importance of thoroughly understanding and defining the problem before jumping into writing code. This approach involves analyzing the problem, breaking it down into smaller manageable tasks, designing a solution, and then implementing it using code.

In our case for this challenge, we can break the challenge into 2 parts :

1- Validation Part. 2- Calculation and display result.

The second part should not execute before the first part passes with valid inputs.

To solve the validation part, you need to understand the problem and take into consideration all restraints given in the challenge in the readme file :

Receive validation errors if:

  • Any field is empty when the form is submitted

We can solve this by checking if the input is === "" or by checking if string input length === 0.

  • Note : be careful here - the input from the user is a string not a number.

  • The day number is not between 1-31

This can be achieved easily [ if input > 31 || input < 1 ]

  • The month number is not between 1-12

This can be achieved easily [ if input > 12 || input < 1 ]

  • The year is in the future

This can be achieved easily [ if input > current year ]. you can hard-code the year 2023, but this is not a good solution. The best way to go is to get current year by Javascript so it reads current year instead of 2023. Imagine you run the code in 2024, it will read current year 2024. but if you hard code 2023, your app will not work properly next year.

  • The date is invalid e.g. 31/04/1991 (there are 30 days in April)

This might sound not easy at the beginning. However, we can solve it by following steps : 1- get the number of days for the month that the user enters into the app. This can be achieved via getDate() method. below is the code from my solution:

//find max allowed days in a month function
function findMaxDayInMonth(month, year) {
return new Date(year, month, 0).getDate();
}

2- after you get Max Day In Month ( say April ) , add a check condition to the day input field and make sure the input day is not bigger than max Day in month.

=====================================================

The validation part was solved. move to the second part after you add a condition that gives you a signal that all input fields are valid.

I hope this answer will help you to solve and understand the problem. You may check my code also.

Good luck and keep coding.

Marked as helpful

0
Diekololaoluwaβ€’ 290

@SOULBRODA023

Posted

@javascriptor1 oh Hi Thank you so much, I am actually new to Js ... "First, solve the problem. Then, write the code".Hmmmn, I do understand now Thank you so much

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