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

age-calculator

@AntonioMesquit

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

@aemrobe

Posted

Thanks for the explanation. I have done this challenge before and I have used a another method to calculate the age. I wanted to know the concept behind you have written the code specially the if else one

var years = presentDate.getFullYear() - userDate.getFullYear();
        var months = presentDate.getMonth() - userDate.getMonth();
        var days = presentDate.getDate() - userDate.getDate();
        const daysPreviousMonth = new Date(presentDate.getFullYear(), presentDate.getMonth(), 0).getDate();
        const daysPreviousPreviousMonth = new Date(presentDate.getFullYear(), presentDate.getMonth() - 1, 0).getDate();

        if (days < 0) {
            months--;
            days = daysPreviousMonth + days;
        }
        if (days < 0) {
            months--;
            days = daysPreviousPreviousMonth + days;
        }
        if (months < 0) {
            years--;
            months = 12 + months;
        }
        print(days, months, years);
    }
0

@AntonioMesquit

Posted

@aemrobe This code snippet calculates the difference between two dates (userDate and presentDate) to determine the age. It does this by separately calculating the years, months, and days of difference. The variables years, months, and days capture the raw difference in years, months, and days, respectively.

The if and else blocks handle cases where the days or months are negative, which can happen if the user's date (userDate) is later than the current date (presentDate). When the days are negative, the code subtracts one month from the total months and adjusts the number of days accordingly, taking into account the number of days in the previous months.

Furthermore, the code deals with the case where the difference in months is also negative by subtracting one year from the total years and adjusting the number of months to be a correct positive value.

The final result is printed using the print(days, months, years) function. This will result in the calculated age difference based on the provided dates.

1

@aemrobe

Posted

nice job, would you mind if you explaining how you calculate the age

0

@AntonioMesquit

Posted

@aemrobe

Hello aemrobe, thank you for the comment. I'll explain the way I did it and thought was best.

My first 7 lines are just for importing the CSS into JavaScript. Then I create the sending function and use e.preventDefault(); to send the entered result without resetting the site. Right after that, I create a variable called "status" with a true value to use in an if statement. Next, I create 3 constants: the first one is for getting the current date, the second is for getting the date the user inserted, and the third is for finding out the days in the month.

After that, I perform data verification to check if the user entered something incorrectly or left a box blank. Inside the if statements, I use two functions that I will create later, setError and removeError. Following this, I have another if statement in case the "status" is true, to calculate the time that has passed in the meantime. In this part, the most important is the constant used to get the days: const daysPreviousMonth = new Date(presentDate.getFullYear(), presentDate.getMonth(), 0).getDate(); const daysPreviousPreviousMonth = new Date(presentDate.getFullYear(), presentDate.getMonth() - 1, 0).getDate(); This function is used to determine the months that have fewer than 30 days. Then, I create a function to print the result, using the functions I had already created. Afterwards, I create another function using print and create 3 variables for days, months, and years. Then, I define a constant with a function to create the "animation" and the counter, using setInterval and clearInterval, with a delay in milliseconds of 25.

Finally, I create the setError and removeError functions.

1

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