Categories
PHP

Aplikasi Age Calculator (Cek Umur) Menggunakan Javascript

age calculator

Kali ini kami akan share aplikasi age calculator menggunakan javascript. Aplikasi ini akan menghitung usia seseorang dengan memasukkan tanggal lahir seseorang di kotak teks. Acript pada aplikasi ini menggunakan fungsi new Date () untuk menghitung usia dengan mendapatkan perbedaan antara hari ini dan tanggal yang dimasukkan.

Langsung saja mar kita masuk kedalam pembahasan inti

Buat file dengan nama index.html file ini sebagai form utama aplikasi sederhana ini.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="contriner-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo/">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Aplikasi Age Calculator Menggunakan Javascript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<div class="form-inline">
				<input type="date" id="birthday"/>
				<button class="btn btn-primary" onclick="getAge();">Calculate</button>
				<h2>Umur Anda adalah : <span id="result" class="text-primary"></span></h2>
			</div>
		</div>
	</div>
<script src="js/script.js"></script>	
</body>	
</html>

Buat file dengan nama script.js script pada file ini akan secara otomatis menghitung umur sesuai dengan tanggal, bulan dan tahun yang di input.

function getAge() {
	var date = document.getElementById('birthday').value;
	
	if(date === ""){
		alert("Please complete the required field!");
    }else{
		var today = new Date();
		var birthday = new Date(date);
		var year = 0;
		if (today.getMonth() < birthday.getMonth()) {
			year = 1;
		} else if ((today.getMonth() == birthday.getMonth()) && today.getDate() < birthday.getDate()) {
			year = 1;
		}
		var age = today.getFullYear() - birthday.getFullYear() - year;
		
		if(age < 0){
			age = 0;
		}
		document.getElementById('result').innerHTML = age;
	}
}

Kalian bisa mendownload filenya langsung dengan menekan button download dibawah ini.

Sekian share bagaimana membuat aplikasi age calculator sederhana menggunakan javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *