CODEWITHSUNDEEP
javascript
James Kurd
James Kurd

Reputation: 57

using javascript for putting range

I want to create an age calculator where the user enters a year and the year is subtracted from 2018 and a message displays "Your age in 2018 is..". So if the user enters the year 2000, then the alert message should display Your age in 2018 is 18 years old.However the year inserted should be between 1970 and 2017. This i am unable to do. In addition, i am unable to display the "years old" after the age.How to solve these 2 problems. These are the codes i've tried.

  <html>
<head>
<script type="text/javascript">
function age(){
let x = document.getElementById('txtYear').value;
if(x.length == 0) {
alert("Numbers should be between 1970 and 2018");
return;
}

if(isNaN(x)){
alert("Value entered is not numeric");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age;
}
</script>
</head>
Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>
</body>
</html>

Upvotes: 1

Views: 84

Answers (5)

user6250770
user6250770

Reputation: 690

var calculateAge = function(birthday) {
    var now = new Date();
    var past = new Date(birthday);
    if(past.getFullYear() < 1970 || past.getFullYear() > 2018) {
		alert("Numbers should be between 1970 and 2018");
		return;
    }else{
    var nowYear = now.getFullYear() -1;
    var pastYear = past.getFullYear();
    var age = nowYear - pastYear;
    return age;
    }
};

$('#age').submit(function(e) {
    e.preventDefault();
    var $birthday = $('#birthday').val();
    alert('you are ' + calculateAge($birthday) + ' years old');
});
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<form action="#" method="post" id="age">
    <label for="birthday">Birthday (yyyy-mm-dd)
        <input type="text" name="birthday" id="birthday" />
    </label>
    <input type="submit" name="submit" value="Calculate your age"/>
</form>

Upvotes: 0

Constantin Trepadus
Constantin Trepadus

Reputation: 503

Best way is to use moment js. you can either use cdn from here https://cdnjs.com/libraries/moment.js/ or just download it

Here is a "dirty" simple snippet so you can understand it better:

var todayYear = moment(); // getting todays date as moment object

var input = "1980" //your sanitized string input from page
var inputYear = moment(input); // converterting string to moment object
var yearDifference = moment.duration(todayYear.diff(inputYear)); // moment does the math for you
var result = Math.floor(yearDifference.asYears()); // flooring moment object
alert(result);

Upvotes: 0

igg
igg

Reputation: 2250

You could change the type of the input tag to "number" and set the min and/or max properties on it.

Instead of:

<input type="text" id="txtYear" />

Use:

<input type="number" min="1970" max="2017" id="txtYear" />

Upvotes: 1

Johnson Lee
Johnson Lee

Reputation: 179

you can use >/< to detect the number user inputed; and you can use + to concat strings continuously

and actually the year user inputed can not be greater than current year, so you can use (new Date()).getFullYear()

function age(){
let x = document.getElementById('txtYear').value;
if(x < 1970 || x > (new Date()).getFullYear()) {
alert("Numbers should be between 1970 and " + (new Date()).getFullYear());
return;
}

if(isNaN(x)){
alert("Value entered is not numeric");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age + " years old";
}
Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>

Upvotes: 1

developerKumar
developerKumar

Reputation: 1796

Find the code below, I just parsed the entered input to an integer and added a check that value should be between 1970 & 2018 inclusive. I also added the string as you asked.

function age(){
let x = document.getElementById('txtYear').value;
if(isNaN(x)){
alert("Value entered is not numeric");
return;
}
let num = parseInt(x)
if(x.length == 0 || num < 1970 || num > 2018) {
alert("Numbers should be between 1970 and 2018");
return;
}

var age = 2018-parseInt(x);
document.getElementById('age').innerText="Your age in 2018 is "+age+" years old";
}
<html>
<head>
</head>
Enter Year of Birth: <input type="text" id="txtYear" />
 <button onClick="age(txtYear.value)">Calculate Age</button>
 <br><br>
 <div id="age">
 </div>
</body>
</html>

Upvotes: 3

Related Questions