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