From 80933d2ff27e3200ee17e15a7e9907fdf61b1ac4 Mon Sep 17 00:00:00 2001 From: Yuvraj Gupta Date: Sat, 2 Mar 2024 00:18:52 +0530 Subject: [PATCH] Added Next Birthday Calculator (#617) --- .../Next-Birthday-Calculator/README.md | 15 ++ .../Next-Birthday-Calculator/index.html | 26 ++++ .../Next-Birthday-Calculator/script.js | 140 ++++++++++++++++++ .../Next-Birthday-Calculator/style.css | 72 +++++++++ index.html | 14 ++ 5 files changed, 267 insertions(+) create mode 100644 Calculators/Next-Birthday-Calculator/README.md create mode 100644 Calculators/Next-Birthday-Calculator/index.html create mode 100644 Calculators/Next-Birthday-Calculator/script.js create mode 100644 Calculators/Next-Birthday-Calculator/style.css diff --git a/Calculators/Next-Birthday-Calculator/README.md b/Calculators/Next-Birthday-Calculator/README.md new file mode 100644 index 000000000..4a3cd0aee --- /dev/null +++ b/Calculators/Next-Birthday-Calculator/README.md @@ -0,0 +1,15 @@ +#

Next Birthday Calculator

+ +## 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 new file mode 100644 index 000000000..2e371766b --- /dev/null +++ b/Calculators/Next-Birthday-Calculator/index.html @@ -0,0 +1,26 @@ + + + + + + + Next Birthday Calculator + + + + +
+

Birthday Calculator

+ + +

+ +
+ + + +
+ + + + diff --git a/Calculators/Next-Birthday-Calculator/script.js b/Calculators/Next-Birthday-Calculator/script.js new file mode 100644 index 000000000..8211ce954 --- /dev/null +++ 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 `${word}`; + }); + + 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); \ No newline at end of file diff --git a/Calculators/Next-Birthday-Calculator/style.css b/Calculators/Next-Birthday-Calculator/style.css new file mode 100644 index 000000000..143a285de --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 862981ada..44fae0231 100644 --- a/index.html +++ b/index.html @@ -1953,6 +1953,20 @@

Calculates the bandwidth of a website based on some factors.

+
+
+

Next Birthday Calculator

+

Calculates the days remaining until the next birthday.

+
+ + + + + Source Code + +
+
+