From 14208ba957a37e3e2e46e58d5575b390ea959f0c Mon Sep 17 00:00:00 2001 From: Sonu Kumar Kushwaha Date: Sun, 7 Apr 2024 14:59:30 +0000 Subject: [PATCH] up --- README.md | 2 +- css/style.css | 58 ++++++++++++++++++++++++++++++++++++++ index.html | 43 ++++++++++++++++------------ js/app.js | 57 +++++++++++++++++++++++++++++++++++++ js/other.js | 57 +++++++++++++++++++++++++++++++++++++ app.js => old/app.js | 0 old/index.html | 29 +++++++++++++++++++ style.css => old/style.css | 3 +- sonu/index.html | 40 +++++++++++++++++--------- v2/app.js | 54 ----------------------------------- v2/style.css | 15 ---------- 11 files changed, 255 insertions(+), 103 deletions(-) create mode 100644 css/style.css create mode 100644 js/app.js create mode 100644 js/other.js rename app.js => old/app.js (100%) create mode 100644 old/index.html rename style.css => old/style.css (86%) delete mode 100644 v2/app.js delete mode 100644 v2/style.css diff --git a/README.md b/README.md index d21d6d0..ed7327c 100644 --- 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 new file mode 100644 index 0000000..3d6db5d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 74e926f..6d6aa30 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,36 @@ - - - - Birthday Countdown - - + + + + Birthday Countdown + + - + +

Birthday Countdown

-
- - - +
+ +
-
+
+ +
-

+
+ + +
+ +
+
+

Built by Sonu Kushwaha +

-

Built by Sonu Kushwaha

- - + - + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..ba6b49a --- /dev/null +++ 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 new file mode 100644 index 0000000..8c007df --- /dev/null +++ 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); + +}; \ No newline at end of file diff --git a/app.js b/old/app.js similarity index 100% rename from app.js rename to old/app.js diff --git a/old/index.html b/old/index.html new file mode 100644 index 0000000..74e926f --- /dev/null +++ b/old/index.html @@ -0,0 +1,29 @@ + + + + + + + Birthday Countdown + + + + +

Birthday Countdown

+
+ + + +
+
+
+

+ +

Built by Sonu Kushwaha

+ + + + + + diff --git a/style.css b/old/style.css similarity index 86% rename from style.css rename to old/style.css index ea299fc..a1504f0 100644 --- a/style.css +++ b/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 index ed89271..0ca31f1 100644 --- a/sonu/index.html +++ b/sonu/index.html @@ -1,20 +1,34 @@ - - - - Birthday Countdown + + + + Birthday Countdown + + - - + +
+

Birthday Countdown

+

+ Sonu Kumar Kushwaha +

+ + +

- -

Sonu Kushwaha

-

Birthday Countdown

-

+
+
+

Built by Sonu Kushwaha +

- - - + + + + \ No newline at end of file diff --git a/v2/app.js b/v2/app.js deleted file mode 100644 index 5297fa9..0000000 --- a/v2/app.js +++ /dev/null @@ -1,54 +0,0 @@ -const timeLeft = document.getElementById('time-left') -const newDate = document.getElementById('date') - -let nextBirthday = new Date('07/17/2024') // mm/dd/yyyy - - -const second = 1000 -const minute = second * 60 -const hour = minute * 60 -const day = hour * 24 // milliseconds -let timerId - -function countDown() { - const today = new Date() - const timeSpan = nextBirthday - today - // console.log(timeSpan) - - if (timeSpan <= -day) { - timeLeft.innerHTML = "Hope you had a nice Birthday!" - clearInterval(timerId) - return - } else if (timeSpan <= 0) { - timeLeft.innerHTML = "Happy Birthday!!!" - clearInterval(timerId) - return - } - - const days = Math.floor(timeSpan / day) - const hours = Math.floor((timeSpan % day) / hour) - const minutes = Math.floor((timeSpan % hour) / minute) - const seconds = Math.floor((timeSpan % minute) / second) - - timeLeft.innerHTML = days + ' days
' + hours + ' hours
' + minutes + ' minutes
' + seconds + ' seconds ' - - -} - -function changeColor() { - let color = timeLeft.style.color - // console.log(color) - if (color == '') { - timeLeft.style.color = 'yellow' - } - if (color == 'yellow') { - timeLeft.style.color = 'white' - timeLeft.style.color = '' - } -} - - - -timerId = setInterval(countDown, second) // call every second - -setInterval(changeColor, second) diff --git a/v2/style.css b/v2/style.css deleted file mode 100644 index d815f9f..0000000 --- a/v2/style.css +++ /dev/null @@ -1,15 +0,0 @@ -body { - background-color: coral; - color: white; - text-align: center; - font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", - "Lucida Sans", Arial, sans-serif; - padding-top: 20vh; - overflow: hidden; -} - -#date { - width: 250px; - padding: 15px auto; - margin: 20px auto; -}