From 1937173a70fc52021f4fe62ba8ef7691ac39ab9f Mon Sep 17 00:00:00 2001
From: solangeihirwe03 <solangeduhimbazeihirwe@gmail.com>
Date: Thu, 14 Mar 2024 00:05:03 +0200
Subject: [PATCH] new changes

---
 age.css            |  5 +++++
 age.js             | 14 +++++++++++++-
 ageCalculator.html |  5 +++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/age.css b/age.css
index d50a203..3989d2d 100644
--- a/age.css
+++ b/age.css
@@ -43,3 +43,8 @@ body{
     font-size: 15px;
     border-radius: 8px;
 }
+.display{
+    padding: 5px 0;
+    font: 20px;
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/age.js b/age.js
index 0a0a80d..0c3cfc7 100644
--- a/age.js
+++ b/age.js
@@ -1 +1,13 @@
-const date = document.getElementById('date');
\ No newline at end of file
+const date = document.getElementById('date');
+let btn = document.getElementById('btn')
+let dob = new Date();
+let display = document.querySelector('.display');
+btn.addEventListener('click', (e)=>{
+    e.preventDefault();
+    const enteredDate = date.value;
+    let currentYear = dob.getFullYear();
+    let dateOfBirth = new Date(enteredDate);
+    let getYear = dateOfBirth.getFullYear();
+    let age = currentYear - getYear;
+    display.textContent = `Your age is ${age} years old`
+})
\ No newline at end of file
diff --git a/ageCalculator.html b/ageCalculator.html
index 545ddd8..f04c076 100644
--- a/ageCalculator.html
+++ b/ageCalculator.html
@@ -14,9 +14,10 @@ <h2>Age Calculator</h2>
         <div class="dob">
             <h2>Enter your date of birth</h2>
             <input type="date" name="date" id="date">
-            <button>Calculate Age</button>
+            <button id="btn">Calculate Age</button>
         </div>
-        <div class="display"></div>
+        <div class="display" id="display"></div>
     </div>
+    <script src="./age.js"></script>
 </body>
 </html>
\ No newline at end of file