From 006d4e4c93ced2762f223d24276f133a6449dde8 Mon Sep 17 00:00:00 2001 From: Himanshu Sharma Date: Sun, 19 Oct 2025 09:14:10 +0530 Subject: [PATCH] Added a Age Calculator --- web/pages/Himanshu1.html | 22 ++++++++++ web/scripts/Himanshu1.js | 46 ++++++++++++++++++++ web/stylesheet/Himanshu1.css | 81 ++++++++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+) create mode 100644 web/pages/Himanshu1.html create mode 100644 web/scripts/Himanshu1.js create mode 100644 web/stylesheet/Himanshu1.css diff --git a/web/pages/Himanshu1.html b/web/pages/Himanshu1.html new file mode 100644 index 0000000..623ddbc --- /dev/null +++ b/web/pages/Himanshu1.html @@ -0,0 +1,22 @@ + + + + + + Age Calculators + + + +
+
+

JavaScript
Age Calculator

+
+ + +
+

+
+
+ + + \ No newline at end of file diff --git a/web/scripts/Himanshu1.js b/web/scripts/Himanshu1.js new file mode 100644 index 0000000..43782df --- /dev/null +++ b/web/scripts/Himanshu1.js @@ -0,0 +1,46 @@ +let userInput = document.getElementById("date"); +userInput.max = new Date().toISOString().split("T")[0]; +let result = document.getElementById("result"); + +function calculateAge(){ + let birthDate = new Date(userInput.value); + + let d1 = birthDate.getDate(); + let m1 = birthDate.getMonth() + 1; + let y1 = birthDate.getFullYear(); + + let today = new Date(); + + let d2 = today.getDate(); + let m2 = today.getMonth() + 1; + let y2 = today.getFullYear(); + + let d3, m3, y3; + + y3 = y2-y1; + + if(m2 >= m1){ + m3 = m2 - m1; + }else{ + y3--; + m3 = 12 + m2 - m1; + } + + if(d2 >=d1){ + d3 = d2 - d1; + }else{ + m3--; + d3 = getDaysInMonth(y1,m1) + d2 - d1; + } + if(m3 < 0){ + m3 = 11; + y3--; + } + result.innerHTML = `You are ${y3} years, ${m3} months, and ${d3} days old.`; + + +} + +function getDaysInMonth(year, month){ + return new Date(year, month, 0).getDate(); +} \ No newline at end of file diff --git a/web/stylesheet/Himanshu1.css b/web/stylesheet/Himanshu1.css new file mode 100644 index 0000000..37ab49f --- /dev/null +++ b/web/stylesheet/Himanshu1.css @@ -0,0 +1,81 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +.container{ + width: 100%; + min-height: 100vh; + background: linear-gradient(135deg, #4203a9, #90bafc); + color: #fff; + padding: 10px; +} + +.calculator{ + width: 100%; + max-width: 600px; + margin-left: 10%; + margin-top: 10%; +} + +.calculator h1{ + font-size: 60px; +} + +.calculator h1 span{ + color: #ffff76; +} + +.input-box{ + margin: 40px 0; + padding: 35px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.3); + display: flex; + align-items: center; +} + +.input-box input{ + flex: 1; + margin-right: 20px; + padding: 14px 20px; + border: 0; + outline: 0; + font-size: 18px; + border-radius: 5px; + position: relative; +} + +.input-box button{ + background: #ffff76; + border: 0; + outline: 0; + padding: 15px 30px; + border-radius: 5px; + font-weight: 600; + color: #333; + cursor: pointer; +} + +.input-box input::-webkit-calendar-picker-indicator{ + top: 0; + left: 0; + right: 0; + bottom: 0; + width: auto; + height: auto; + position: absolute; + background-position: calc(100% - 10px); + background-size: 30px; + cursor: pointer; +} + +#result{ + font-size: 20px; +} + +#result span{ + color: #ffff76; +} \ No newline at end of file