Refactor age calculator layout and improve form structure

HadiVahidi20 · HadiVahidi20 · commit 78b6a33de9f7 · 2025-09-29T18:37:37.000+01:00
diff --git a/Sprint-1/prep/Age/myAge.html b/Sprint-1/prep/Age/myAge.html
@@ -14,7 +14,7 @@
         #age{
             margin: auto;
             width: 50%;
-            height: 300px;
+            height: max-content;
             border: var(--main-color) 2px solid;
             border-radius: 10px;
             display: flex;
@@ -24,6 +24,15 @@
             margin-top: 20%;
             background-image: linear-gradient(45deg, #58dbb4 10%, #138f13 100%);
 
+        
+        }
+        form{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-top: 20px;
+            margin-bottom: 20px;
         }
         input{
             margin: 10px;
@@ -50,14 +59,43 @@
             height: 45px;
             font-size: 1rem;
         }
+        #result{
+            margin-bottom: 20px;
+            display: none;
+        }
     </style>
 </head>
 <body>
-    <div id="age">
+<div id="age">
+  <h1>Welcome to Age Calculator</h1>
+  <p>Please enter your year of birth:</p>
+<form id="ageForm">
+
 
-    <h1>Welcome to Age calculator </h1>
-    <p>please Enter your year of birth:</p>
-    <input type="number" id="yeateOfBirth" min="1980" max="2025" >
-    <button id ="btn">calculate</button>
+  <label for="yearOfBirth">Year of Birth:</label>
+  <input type="number" id="yearOfBirth" min="1980" max="2025" required>
+
+  <button id="btn" type="submit">Calculate</button>
+</form>
+<div id="result">
+    <h2>Your Age is: <span id="ageDisplay"></span></h2>
+
+</div>
 </div>
+
+
+<script>
+    const btn = document.getElementById("btn");
+    const form = document.getElementById("ageForm");
+
+    form.addEventListener("submit", function(event) {
+        event.preventDefault();
+        const yearOfBirth= document.getElementById("yearOfBirth").value;
+        const currentYear= new Date().getFullYear();
+        const age= currentYear - yearOfBirth;
+        document.getElementById("result").style.display = "block";
+        document.getElementById("ageDisplay").textContent = `${age} years old`;
+    });
+        
+</script>
 </body>
