In this article, we will be creating an Age Calculator using HTML, CSS, and JavaScript.
In Age Calculator, we will take the date of birth as the date input on the page and print the age from that input. We will create the structure using HTML and design it with CSS. JavaScript will be used to implement and show the output.
Prerequisites:
Approach:
- Create the Calculator structure using an HTML input tag for date input and submit button.
- Style the structure with CSS using classes and elements.
- In JavaScript, get the current date using the built-in new Date() method and convert the input data into usable formats.
- If the current date is less than that of the birth date, then that month is not counted, and for subtracting dates we add a number of month days to the current date so as to get the difference in the dates.
- If the current month is less than the birth month, then the current year is not taken into count as this year has not been completed and for getting the difference of months, we subtract by adding 12 to the current month.
- In the end, we just need to subtract the days, months, and years to get the difference after the two conditions are dealt with.
- Calculate the age difference in the inputs dates and show the calculated output on the web page as below.
Example: This example describes the basic implementation of the Age Calculator using HTML, CSS, and Javascript.
HTML
<!DOCTYPE html> <html> <head> <title>Age Calculator</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="card"> <header> <h1>AGE CALCULATOR</h1> </header> <div> <label>Enter your Date of Birth</label> <input id="inputDob" type="date" value="2000-01-01" /> </div> <br /> <!-- Take the date from which age is to be calculated --> <div> <label>Current Date</label><br> <input id="cdate" type="date" value="" /> </div> <br /> <button type="button" onclick="getDOB()"> Calculate </button> <br /> <div id="currentAge"></div> <script src="script.js"></script> </div> </body> </html> |
CSS
/* Setting alignment and fonts */body { display: flex; text-align: center; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; } /* Defining card properties */.card { min-width: 30%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 5px; margin: auto; padding: 2%; padding-top: 0%; } header { font-size: larger; } header h1 { background-color: rgb(231, 231, 231); color: green; font-size: xx-large; padding: 1%; } /* Setting font and margin for text before input box */label { font-size: large; margin: 2%; } button { font-size: large; padding: 1%; } input { width: 200px; height: 50px; font-size: larger; font-family: Arial, Helvetica, sans-serif; text-align: center; } #inputDob { margin: 2%; } p { font-size: larger; margin: 5%; } #currentAge { min-width: 30%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 5px; margin: auto; margin-top: 5%; padding: 5%; padding-top: 7%; font-size: larger; } |
Javascript
// Define funtion to get calculated Age function getDOB() { // Getting input from html input element let data = document.getElementById("inputDob").value; // Convert input data to usable format // as day,month and year let dob = new Date(data); let day = dob.getDate(); let month = dob.getMonth(); let year = dob.getFullYear(); // Getting current date and calculating the difference let now = new Date(document.getElementById("cdate").value); console.log(now); let yearDiff = now.getFullYear() - year; let monthDiff = now.getMonth() - month; let dateDiff = now.getDate() - day; // Calculating the Age if (yearDiff < 0) console.log("invalid date"); else if (monthDiff > 0) { console.log(yearDiff); } else if (monthDiff === 0 && dateDiff >= 0) { console.log(yearDiff); } else { yearDiff = yearDiff - 1; if (monthDiff <= 0) if (dateDiff > 0) monthDiff = 12 + monthDiff; else monthDiff = 11 - monthDiff; } if (dateDiff < 0) { dateDiff = 30 + dateDiff; monthDiff -= 1; } // Show calculated age as output // and invalid if wrong input is given if (yearDiff < 0) document.getElementById("currentAge").innerHTML = "Invalid Date"; else document.getElementById("currentAge").innerHTML = "Your current Age is " + yearDiff + " years " + monthDiff + " months " + dateDiff + " days"; } // Function to provide default date value function currentDate() { console.log(formatted()); let d = document.getElementById("cdate"); d.value = formatted(); } function formatted(date = new Date()) { return [ date.getFullYear(), short(date.getMonth() + 1), short(date.getDate()), ].join("-"); } function short(num) { return num.toString().padStart(2, "0"); } // Calling current date function to set default date value currentDate(); |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
