up

iamsonukushwaha · Apr 7, 2024 · 14208ba · 14208ba
1 parent d8ea76a
commit 14208ba
Show file tree

Hide file tree

Showing 11 changed files with 255 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ https://singlebucks.blogspot.com/2021/08/birthday-countdown.html
 
 https://iamsonukushwaha.github.io/birthday-countdown/
 
-Sonu's Birthday Countdown: https://iamsonukushwaha.github.io/birthday-countdown/v2/
+Sonu's Birthday Countdown: https://iamsonukushwaha.github.io/birthday-countdown/sonu
 
 
 

diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,58 @@
+body {
+  background-color: rgb(231, 174, 153);
+  background-image: url("../bg.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  color: white;
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  padding-top: 15vh;
+}
+
+.container {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+input, button {
+  margin-bottom: 10px;
+  padding: 5px;
+  width: 100%;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+#result {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+
+h3{
+  color: darkgoldenrod;
+  position: fixed;
+  text-align: center;
+  bottom: 0;
+  margin: auto;
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
diff --git a/index.html b/index.html
@@ -1,29 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Birthday Countdown</title>
-        <link rel="stylesheet" href="./style.css">
-    </head>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Birthday Countdown</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
 
-    <body>
+<body>
+    <div class="container">
         <h1>Birthday Countdown</h1>
-        <div id="form">
-            <input type="text" id="name" placeholder="Enter your name" autocomplete="off" autofocus>
-            <input type="date" id="date" placeholder="Enter next Birthday e.g., mm/dd/yyyy" oninput="btnDisplay()"
-                autofocus>
-            <input type="button" value="Submit" onclick="changeDate()" id="btn">
+        <div>
+            <label for="personName">Person's Name:</label>
+            <input type="text" id="personName" placeholder="Enter Name">
         </div>
-        <div id="content">
+        <div>
+            <label for="birthMonth">Birth Month:</label>
+            <input type="number" id="birthMonth" min="1" max="12" placeholder="Month (1-12)">
         </div>
-        <h2 id="time-left"></h2>
+        <div>
+            <label for="birthDay">Birth Day:</label>
+            <input type="number" id="birthDay" min="1" max="31" placeholder="Day (1-31)">
+        </div>
+        <button onclick="calculateCountdown()">Calculate Countdown</button>
+        <div id="result"></div>
+    </div>
+    <h3>Built by <a href="https://singlebucks.blogspot.com" target="_blank" rel="noopener noreferrer">Sonu Kushwaha</a>
+    </h3>
 
-        <h3>Built by <a href="https://singlebucks.blogspot.com" target="_blank" rel="noopener noreferrer">Sonu Kushwaha</a></h3>
 
-        <script src="./app.js"></script>
-
+    <script src="../js/app.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,57 @@
+function calculateCountdown() {
+    const personName = document.getElementById('personName').value;
+    const birthMonth = parseInt(document.getElementById('birthMonth').value, 10);
+    const birthDay = parseInt(document.getElementById('birthDay').value, 10);
+    const today = new Date();
+
+    // Check if month and day are valid
+    if (isNaN(birthMonth) || isNaN(birthDay) || birthMonth < 1 || birthMonth > 12 || birthDay < 1 || birthDay > 31) {
+        alert('Please enter valid month (1-12) and day (1-31).');
+        return;
+    }
+
+    // Create a date object for the input birthdate
+    const birthdate = new Date(today.getFullYear(), birthMonth - 1, birthDay);
+
+    // Check if birthday is today
+    if (birthdate.getDate() === today.getDate() && birthdate.getMonth() === today.getMonth()) {
+        const resultElement = document.getElementById('result');
+        resultElement.innerHTML = `Happy Birthday ${personName}! 🎉🎂`;
+        return;
+    }
+
+    // If birthday has passed this year, set next birthday to next year
+    if (birthdate < today) {
+        birthdate.setFullYear(today.getFullYear() + 1);
+    }
+
+    // Calculate and update countdown every second
+    setInterval(function () {
+        const now = new Date();
+        const timeDifference = birthdate.getTime() - now.getTime();
+
+        // Calculate days, hours, minutes, seconds
+        let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+        let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+        let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
+
+        const resultElement = document.getElementById('result');
+
+        // Generate random RGB color values
+        const red = Math.floor(Math.random() * 256);
+        const green = Math.floor(Math.random() * 256);
+        const blue = Math.floor(Math.random() * 256);
+
+        // Set the text color to the random RGB value
+        resultElement.style.color = `rgb(${red}, ${green}, ${blue})`;
+
+        resultElement.innerHTML = `${personName}'s next birthday is in ${days} days, ${hours} hours, ${minutes} minutes, and ${seconds} seconds.`;
+
+
+
+
+
+
+    }, 1000);
+}
diff --git a/js/other.js b/js/other.js
@@ -0,0 +1,57 @@
+window.onload = function () {
+
+    const personName = document.getElementById('personName').innerText;
+    const birthMonth = parseInt(document.getElementById('birthMonth').innerText, 10);
+    const birthDay = parseInt(document.getElementById('birthDay').innerText, 10);
+    const today = new Date();
+
+
+    // Check if month and day are valid
+    if (isNaN(birthMonth) || isNaN(birthDay) || birthMonth < 1 || birthMonth > 12 || birthDay < 1 || birthDay > 31) {
+        alert('Please enter valid month (1-12) and day (1-31).');
+        return;
+    }
+
+    // Create a date object for the input birthdate
+    const birthdate = new Date(today.getFullYear(), birthMonth - 1, birthDay);
+
+    // Check if birthday is today
+    if (birthdate.getDate() === today.getDate() && birthdate.getMonth() === today.getMonth()) {
+        const resultElement = document.getElementById('result');
+        resultElement.innerHTML = `Happy Birthday ${personName}! 🎉🎂`;
+        return;
+    }
+
+    // If birthday has passed this year, set next birthday to next year
+    if (birthdate < today) {
+        birthdate.setFullYear(today.getFullYear() + 1);
+    }
+
+    // Calculate and update countdown every second
+    setInterval(function () {
+        const now = new Date();
+        const timeDifference = birthdate.getTime() - now.getTime();
+
+        // Calculate days, hours, minutes, seconds
+        let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+        let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+        let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
+
+        const resultElement = document.getElementById('result');
+
+        // Generate random RGB color values
+        const red = Math.floor(Math.random() * 256);
+        const green = Math.floor(Math.random() * 256);
+        const blue = Math.floor(Math.random() * 256);
+
+        // Set the text color to the random RGB value
+        resultElement.style.color = `rgb(${red}, ${green}, ${blue})`;
+
+        resultElement.innerHTML = `${personName}'s next birthday is in ${days} days, ${hours} hours, ${minutes} minutes, and ${seconds} seconds.`;
+
+
+
+    }, 1000);
+
+};
diff --git a/app.js → old/app.js b/app.js → old/app.js
diff --git a/old/index.html b/old/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Birthday Countdown</title>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+
+    <body>
+        <h1>Birthday Countdown</h1>
+        <div id="form">
+            <input type="text" id="name" placeholder="Enter your name" autocomplete="off" autofocus>
+            <input type="date" id="date" placeholder="Enter next Birthday e.g., mm/dd/yyyy" oninput="btnDisplay()"
+                autofocus>
+            <input type="button" value="Submit" onclick="changeDate()" id="btn">
+        </div>
+        <div id="content">
+        </div>
+        <h2 id="time-left"></h2>
+
+        <h3>Built by <a href="https://singlebucks.blogspot.com" target="_blank" rel="noopener noreferrer">Sonu Kushwaha</a></h3>
+
+        <script src="./app.js"></script>
+
+</body>
+
+</html>
diff --git a/style.css → old/style.css b/style.css → old/style.css
@@ -7,8 +7,7 @@ body {
   background-attachment: fixed;
   color: white;
   text-align: center;
-  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
-    "Lucida Sans", Arial, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
   padding-top: 15vh;
 }
 

diff --git a/sonu/index.html b/sonu/index.html
@@ -1,20 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
 
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Birthday Countdown</title>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Birthday Countdown</title>
+    <link rel="stylesheet" href="../css/style.css">
+</head>
 
-        <link rel="stylesheet" href="./style.css">
-    </head>
+<body>
+    <div class="container">
+        <h1>Birthday Countdown</h1>
+        <p id="personName">
+            Sonu Kumar Kushwaha
+        </p>
+        <p id="birthMonth" style="display: none;">
+            7
+        </p>
+        <p id="birthDay" style="display: none;">
+            17
+        </p>
+        <br><br>
 
-    <body>
-        <h1>Sonu Kushwaha</h1>
-        <h4>Birthday Countdown</h4>
-        <h2 id="time-left"></h2>
+        <div id="result"></div>
+    </div>
+    <h3>Built by <a href="https://singlebucks.blogspot.com" target="_blank" rel="noopener noreferrer">Sonu Kushwaha</a>
+    </h3>
 
-        <script src="./app.js"></script>
-    </body>
 
-</html>
+    <script src="../js/other.js"></script>
+</body>
+
+</html>
diff --git a/v2/app.js b/v2/app.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ https://singlebucks.blogspot.com/2021/08/birthday-countdown.html

		https://iamsonukushwaha.github.io/birthday-countdown/

		Sonu's Birthday Countdown: https://iamsonukushwaha.github.io/birthday-countdown/v2/
		Sonu's Birthday Countdown: https://iamsonukushwaha.github.io/birthday-countdown/sonu



Expand Down