Added time until next birthday calculator

Rakesh9100 · Feb 27, 2024 · c9cc8bf · c9cc8bf
1 parent 42bc43d
commit c9cc8bf
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 0 deletions.
diff --git a/Calculators/Next-Birthday-Calculator/README.md b/Calculators/Next-Birthday-Calculator/README.md
@@ -0,0 +1,21 @@
+# Time Until Next Birthday Calculator
+
+## Introduction
+
+This website provides a user-friendly calculator that determines the time remaining until your next birthday. Simply enter your birth date in the designated format, and the calculator will display the following information:
+<br>
+Years: The number of years until your next birthday.
+Months: The number of months (including the current month) until your next birthday.
+Days: The number of days until your next birthday.
+Features
+
+#### Intuitive Interface: The website prioritizes a straightforward and easy-to-use interface for a seamless user experience.
+#### Clear Output: The calculated time until your next birthday is presented in a well-structured and understandable format, making it readily interpretable.
+#### Accessibility: The website strives to be accessible to individuals with diverse needs and abilities.
+
+## How to Use
+
+1) Visit the Website: Access the calculator website.
+2) Enter Birth Date: Locate the input field designated for entering your birth date.
+3) Submit: Click the Calculate button to initiate the calculation.
+4) Results: The website will display the calculated time remaining until your next birthday in days.
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>Document</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
@@ -1925,6 +1925,20 @@ <h3>Checks if an entered number or string is Palindrome or not.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Time Until Next Birthday Calculator</h2>
+                <h3>Take your birthdate and gives days remaining until 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 class="box">
             <div class="content">
                 <h2>Love Compatibility Calculator</h2>