<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="age-calculator"> <h2>Age Calculator</h2> <div class="input-box"> <p> <input type="text" class="form-control" id="dob_year" placeholder="Enter Your DOB Year"> </p> <span id="error1"></span> <p> <input type="text" class="form-control" id="dob_month" placeholder="Enter Your DOB Month(Number or Name)"> </p> <span id="error2"></span> <button type="submit" class="btn btn-info" onclick="myAge()">Go</button> </div> <!-- <button type="button" class="btn btn-info" onclick="myAge()">Go</button> --> </div> <div class="result-box"> <h2>We Calculate Your Age</h2> <p>Your Age is <b><span id="year"></span></b> <b><span id="month"></span></b></p> </div>

.age-calculator, .result-box { max-width: 500px; box-shadow: 0 0 5px #ddd; margin: 10px auto; padding: 10px 20px; } .age-calculator h2, .result-box h2 { text-align: center; }

//Age calculating Apps function myAge() { let current_year = new Date().getFullYear(); let dob_year = document.getElementById('dob_year').value; let current_month = new Date().getMonth() + 1; let dob_month = document.getElementById('dob_month').value; let age,month; if (isNaN(dob_year)) { alert("Opps invalid input! Please Enter a year"); } if (typeof dob_month === 'string') { //current_month = month_name; if (dob_month === 'january') { dob_month = 1; } else if (dob_month === 'february') { dob_month = 2; } else if (dob_month === 'march') { dob_month = 3; } else if (dob_month === 'april') { dob_month = 4; } else if (dob_month === 'may') { dob_month = 5; } else if (dob_month === 'june') { dob_month = 6; } else if (dob_month === 'july') { dob_month = 7; } else if (dob_month === 'august') { dob_month = 8; } else if (dob_month === 'september') { dob_month = 9; } else if (dob_month === 'october') { dob_month = 10; } else if (dob_month === 'november') { dob_month = 11; } else if (dob_month === 'december') { dob_month = 12; } else { dob_month = dob_month; } } console.log(Number(dob_month)); age = current_year - Number(dob_year); month = current_month + Number(dob_month); document.getElementById('year').innerHTML = age + ' years and'; document.getElementById('month').innerHTML = month + ' months'; }