-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (91 loc) · 3.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find Birthday, Age, Gender from NIC number</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500;600;700&display=swap" rel="stylesheet">
<style type="text/css">
body{
background: rgb(237,237,237);
background: linear-gradient(0deg, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%);
width: auto;
height: 100vh;
box-sizing: border-box;
font-family: 'DynaPuff', cursive;
}
.divBox{
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 3px 10px 0px;
border-radius: 15px;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-xs-12">
<div class="divBox">
<div class="text-center">
<h3>Find Birthday, Age, Gender from NIC number</h3>
<p>This form supports only the old format of NIC for Sri Lankan citizens.</p>
</div>
<form>
<div class="mb-2">
<label for="txtNIC" class="form-label">Enter NIC Number</label>
<input type="text" class="form-control" id="txtNIC" onblur="mouseLeave()">
</div>
<div class="mb-2">
<label for="dteBirthday" class="form-label">Birthday</label>
<input type="date" class="form-control" id="dteBirthday" disabled>
</div>
<div class="mb-2">
<label for="cmbGender" class="form-label">Gender</label>
<select class="form-select" aria-controls="cmbGender" id="cmbGender" disabled>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="mb-2">
<label for="txtAge" class="form-label">Age</label>
<input type="text" class="form-control" id="txtAge" disabled>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-M2QjK9nV7Q/G3BqSzV7NfTtlnuV7gCrTlT1Htj+bNOt9X7V/YQq3d3sK1clPXxuH" crossorigin="anonymous"></script>
<script type="text/javascript">
function mouseLeave(){
var nic = document.getElementById("txtNIC").value;
if(nic.length == 10){
var year = nic.substr(0,2);
var days = parseInt(nic.substr(2,3));
var gender = "";
if(days > 500){
gender = "Female";
days = days - 500;
}else{
gender = "Male";
}
var dob = new Date((1900+parseInt(year)), 0, days);
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
document.getElementById("dteBirthday").valueAsDate = dob;
document.getElementById("cmbGender").value = gender;
document.getElementById("txtAge").value = age;
}else{
alert("Please enter valid NIC number.");
}
}
</script>
</body>
</html>