Skip to content

lucaso-silva/age-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

Age calculator

Age.Calculator.-.Lucas.Oliveira.mp4

See in the link

Overview

This project was developed with the intent to practice JavaScript programming.

It was based on a challenge from the website Frontend Mentor

Status: Concluded ✔️


Objectives

  • View an age in years, months, and days after submitting a valid date through the form ✅
  • Receive validation errors if:
    • Any field is empty when the form is submitted ✅
    • The day number is not between 1-31 ✅
    • The month number is not between 1-12 ✅
    • The year is in the future ✅
    • The date is invalid e.g. 31/04/1991 (there are 30 days in April) ✅
  • View the optimal layout for the interface depending on their device's screen size ✅
  • See hover and focus states for all interactive elements on the page ✅
  • Bonus: See the age numbers animate to their final number when the form is submitted ⚠️

Built with

  • Semantic HTML5 markup
  • Mobile-first workflow
  • CSS custom properties
  • Flexbox
  • JavaScript

What I learned 💡

In this project, I practiced using the JavaScript Date object.

It was necessary to create two variables, one to assign the current date and the other variable to assign the date inputted.

let currentDate = new Date();

function validInputs(day, month, year) {
  let pastDate = new Date(year, month - 1, day);
  let diffDates = Math.floor(currentDate - pastDate);
///(...)
}

The difference between the two periods is expressed in milliseconds, so they were necessary to convert the result into the number of years, months, and days.

function showResults(value) {
  let oneDay = 1000 * 60 * 60 * 24;
  let totalDays = Math.floor(value / oneDay);
  let totalMonths = Math.floor(totalDays / 30.41);
  let totalYears = Math.floor(totalMonths / 12);

  if (value > 0) {
    let numMonths = totalMonths - totalYears * 12;
    let numDays = Math.floor(
      totalDays - (365 * totalYears + numMonths * 30.41)
    );

🛠️ Continued development

The next steps will be focused on :

  • See the age numbers animating to their final result
  • Turn the design as similar as possible to the model

Useful resources