comment

ctrlabhi · May 5, 2024 · 25dc953 · 25dc953
commit 25dc953
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 0 deletions.
diff --git a/age.htm b/age.htm
@@ -0,0 +1,49 @@
+<!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> 
+		<!-- footer section start -->
+		<footer>
+			<span>Created By <a href="https://ctrlabhi.netlify.app/">Abhishek Kumar</a> | <span class="far fa-copyright"></span> 2024 All rights reserved</span>
+		</footer>
+
+		<script src="script.js"></script> 
+	</div> 
+</body> 
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,69 @@
+// 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();
diff --git a/style.css b/style.css
@@ -0,0 +1,85 @@
+/* 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; 
+}
+
+/* footer section styling */
+footer{
+    background: #ffffff;
+    padding: 15px 23px;
+    color: #000000;
+    text-align: center;
+}
+footer span a{
+    color: crimson;
+    text-decoration: none;
+}
+footer span a:hover{
+    text-decoration: underline;
+}