Added Next Birthday Calculator (#617)

Rakesh9100 · Mar 1, 2024 · 80933d2 · 80933d2
1 parent 18dc255
commit 80933d2
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 0 deletions.
diff --git a/Calculators/Next-Birthday-Calculator/README.md b/Calculators/Next-Birthday-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Next Birthday Calculator</p>
+
+## Description :-
+
+This website provides a user-friendly calculator that determines the time remaining until your next birthday.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/146326636/3e25d6fe-9e09-48dd-adf7-4e7636fd0dad)
diff --git a/Calculators/Next-Birthday-Calculator/index.html b/Calculators/Next-Birthday-Calculator/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Next Birthday Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Birthday Calculator</h1>
+        <label for="birthday">Select your birthday: &nbsp;</label>
+        <input type="date" id="birthday" required>
+        <br><br>
+        <button onclick="calculateTimeUntilBirthday()">Calculate</button>
+        <div id="result"></div>
+
+        <!-- For animation -->
+        <canvas id="fallingLeavesCanvas" class="hidden"></canvas>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Next-Birthday-Calculator/script.js b/Calculators/Next-Birthday-Calculator/script.js
@@ -0,0 +1,140 @@
+function calculateTimeUntilBirthday() {
+  const birthdayInput = document.getElementById('birthday').value;
+  const birthdayDate = new Date(birthdayInput);
+  const today = new Date();
+
+  if (today.getMonth() > birthdayDate.getMonth() || 
+      (today.getMonth() === birthdayDate.getMonth() && today.getDate() > birthdayDate.getDate())) {
+    birthdayDate.setFullYear(today.getFullYear() + 1);
+  }
+
+  if (today.getMonth() === birthdayDate.getMonth() && today.getDate() === birthdayDate.getDate()) {
+    document.getElementById('result').textContent = `Happy Birthday!`;
+    return;
+  }
+
+  if (birthdayInput === '') {
+    document.getElementById('result').textContent = `Please enter your birthday.`;
+    return;
+  }
+
+  const timeUntilBirthday = birthdayDate.getTime() - today.getTime();
+  const daysUntilBirthday = Math.ceil(timeUntilBirthday / (1000 * 3600 * 24));
+
+  if (daysUntilBirthday === 1) {
+    document.getElementById('result').textContent = `Your birthday is tomorrow!`;
+  } else {
+    document.getElementById('result').textContent = `There are ${daysUntilBirthday} days until your next birthday.`;
+  }
+
+  document.body.classList.add('pop');
+
+  document.getElementById('fallingLeavesCanvas').classList.remove('hidden');
+}
+
+// Animation JS
+
+const canvas = document.getElementById("fallingLeavesCanvas");
+const ctx = canvas.getContext("2d");
+const leaves = [];
+const numLeaves = 100;
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+function createLeaf() {
+  return {
+    x: Math.random() * canvas.width,
+    y: Math.random() * 18 + 2,
+    size: Math.random() * 22 + 3, // Random size between 3 and 25
+    speed: Math.random() * 3 + 1, // Random speed between 1 and 4
+    color: `rgba(${Math.random() * 200 + 50}, ${Math.random() * 200 + 50}, ${Math.random() * 200 + 50}, ${Math.random() * 0.8 + 0.2})`, // Random color
+    //color: `rgba(255, ${Math.random() * 100 + 100}, 0, ${Math.random() * 0.8 + 0.2})`, // Random orange-ish color
+    //color: '#000A',
+    rotation: Math.random() * 360 // Random initial rotation
+  };
+}
+
+function createLeaves() {
+  for (let i = 0; i < numLeaves; i++) {
+    leaves.push(createLeaf());
+  }
+}
+
+function updateLeaves() {
+  for (let i = 0; i < leaves.length; i++) {
+    const leaf = leaves[i];
+    leaf.y += leaf.speed;
+    leaf.x += 1.0 * Math.sin(leaf.y / leaf.size);
+
+    if (leaf.y > canvas.height) {
+      // Reset the leaf when it goes below the canvas
+      leaf.y = -20;
+      leaf.x = Math.random() * canvas.width;
+    }
+  }
+}
+
+function drawLeaves() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for (let i = 0; i < leaves.length; i++) {
+    const leaf = leaves[i];
+
+    ctx.save();
+    ctx.translate(leaf.x + leaf.size / 2, leaf.y + leaf.size / 2);
+    ctx.rotate((leaf.rotation * Math.PI) / 180);
+    ctx.fillStyle = leaf.color;
+    ctx.fillRect(-leaf.size / 2, -leaf.size / 2, leaf.size, leaf.size);
+
+    //ctx.beginPath();
+    //ctx.arc(200,150,leaf.size,0,0.5*Math.PI);
+    //ctx.arc(200+leaf.size,150+leaf.size,leaf.size,Math.PI, 1.5*Math.PI);
+    //ctx.fillStyle = leaf.color;
+    //ctx.fill();
+    //ctx.closePath();  
+
+    ctx.restore();
+  }
+}
+
+function animate() {
+  updateLeaves();
+  drawLeaves();
+  requestAnimationFrame(animate);
+}
+
+function onWindowResize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+
+window.addEventListener("resize", onWindowResize);
+createLeaves();
+animate();
+
+function changeTextColor() {
+  const textContainer = document.getElementById("text-container");
+  const words = textContainer.innerText.split(" ");
+
+  const coloredWords = words.map((word) => {
+    const randomColor = getRandomColor();
+    return `<span style="color: ${randomColor};">${word}</span>`;
+  });
+
+  textContainer.innerHTML = coloredWords.join(" ");
+}
+
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+//function getRandomColor() {
+//  return Math.random() * 0xffffff;
+//}
+
+setInterval(changeTextColor, 1000);
diff --git a/Calculators/Next-Birthday-Calculator/style.css b/Calculators/Next-Birthday-Calculator/style.css
@@ -0,0 +1,72 @@
+body {
+  display: inline-block;
+  font-family: Arial, sans-serif;
+  text-align: center;
+  transition: all 0.8s ease-in-out;
+}
+
+.container {
+  margin-top: calc(50vh - 180px);
+  margin-left: calc(50vw - 200px);
+  padding: 20px;
+  border: 2px solid #007bff;
+  border-radius: 10px;
+}
+
+input[type="date"] {
+  padding: 5px;
+  border-radius: 20px;
+  border: 1px solid #007bff;
+  font-size: 16px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 20px;
+  border: none;
+  cursor: pointer;
+}
+
+#result {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+/* animation css */
+
+body.pop {
+  margin: 0;
+  overflow: hidden;
+  background-color: #000;
+  color: #fff;
+}
+
+canvas {
+  margin: 0;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+#text-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  font-family: "Arial", sans-serif;
+  font-weight: bold;
+  color: #00F;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -1953,6 +1953,20 @@ <h3>Calculates the bandwidth of a website based on some factors.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Next Birthday Calculator</h2>
+                <h3>Calculates the days remaining until the next birthday.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Next-Birthday-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Next-Birthday-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->