Merge pull request #26 from huzaifaazim0/main

Add Next Birthday Countdown

index.html

@@ -13,6 +13,30 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
 <title> Age Calculator app</title>
 
+<style>
+  #nextBirthdayDays,
+  #nextBirthdayHours,
+  #nextBirthdayMinutes,
+  #nextBirthdaySeconds {
+    font-family: Arial, sans-serif;
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin: 5px;
+  }
+
+  /* Optional: Add additional styling */
+  #nextBirthdayDays::before{
+    content: "Time until next birthday: ";
+    font-weight: normal;
+    color: #666;
+  }
+
+  .nextBirthdayResults{
+    display: none;
+  }
+</style>
+
 
 </head>
 
@@ -38,6 +62,12 @@ <h2>Age In</h2>
         <p>Seconds: <span id="seconds"></span></p>
         <p>Minutes: <span id="minutes"></span></p>
         <p>Hours: <span id="hours"></span></p>
+        <div>
+          <p class="nextBirthdayResults"><span id="nextBirthdayDays"></span> Days
+          <span id="nextBirthdayHours"></span> Hours
+          <span id="nextBirthdayMinutes"></span> Minutes
+          <span id="nextBirthdaySeconds"></span> Seconds</p>
+        </div>
       </section>
     </main>
     <section id="milestones">

main.js

@@ -1,3 +1,5 @@
+var countdownInterval;
+
 function calculateAge() {
   let userDate = document.getElementById('birthdate').value
 
@@ -63,6 +65,28 @@ function calculateAge() {
             document.getElementById('age21').textContent = age21;
             document.getElementById('age30').textContent = age30;
             // Add more milestones as needed
-};
+  if(countdownInterval){
+    clearInterval(countdownInterval)
+  }
+  countdownInterval = setInterval(() => calculateNextBirthday(birthdate), 1000);
+  document.getElementsByClassName('nextBirthdayResults')[0].style.display = 'block';
+}
+
+function calculateNextBirthday(birthdate) {
+  currentDate = new Date();
+  const nextBirthday = new Date(currentDate.getFullYear(), birthdate.getMonth(), birthdate.getDate());
+  if (nextBirthday < currentDate) {
+    nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
+  }
+  const timeUntilNextBirthday = nextBirthday - currentDate;
 
+  const daysUntilNextBirthday = Math.floor(timeUntilNextBirthday / (1000 * 60 * 60 * 24));
+  const hoursUntilNextBirthday = Math.floor((timeUntilNextBirthday % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutesUntilNextBirthday = Math.floor((timeUntilNextBirthday % (1000 * 60 * 60)) / (1000 * 60));
+  const secondsUntilNextBirthday = Math.floor((timeUntilNextBirthday % (1000 * 60)) / 1000);
 
+  document.getElementById('nextBirthdayDays').textContent = daysUntilNextBirthday;
+  document.getElementById('nextBirthdayHours').textContent = hoursUntilNextBirthday;
+  document.getElementById('nextBirthdayMinutes').textContent = minutesUntilNextBirthday;
+  document.getElementById('nextBirthdaySeconds').textContent = secondsUntilNextBirthday;
+}