let newYearDate =
new
Date(
'25 Jan, 2024, 23:59:59'
);
let currentDate =
new
Date();
let milliDiff = newYearDate.getTime() -
currentDate.getTime();
let remDays=0, remHours=0,
remMinutes=0, remSeconds=0;
const countDown = () => {
const newYearDate =
new
Date(
'25 Jan, 2024, 23:59:59'
);
const currentDate =
new
Date();
const milliDiff = newYearDate.getTime() -
currentDate.getTime();
const totalSeconds = Math.floor(milliDiff / 1000);
const totalMinutes = Math.floor(totalSeconds / 60);
totalHours = Math.floor(totalMinutes / 60);
remSeconds = totalSeconds % 60;
remMinutes = totalMinutes % 60;
remDays = Math.floor(totalHours / 24);
remHours = totalHours % 24;
second1.innerHTML = Math.floor(remSeconds/10);
second2.innerHTML = Math.floor(remSeconds%10);
minute1.innerHTML = Math.floor(remMinutes/10);
minute2.innerHTML = Math.floor(remMinutes%10);
hour1.innerHTML = Math.floor(remHours/10);
hour2.innerHTML = Math.floor(remHours%10);
day1.innerHTML = Math.floor(remDays/10);
day2.innerHTML = Math.floor(remDays%10);
}
let myInterval = setInterval(countDown, 1000);
setTimeout(()=>{
clearInterval(myInterval);
countdown.style.display =
"none"
;
startRainingFlower()
slideFlag();
}, milliDiff);
let lastDays = 0, lastHours = 0,
lastMinutes = 0, lastSeconds = 0;
function
updateClock() {
slideTimerDigit
(
'day1'
, Math.floor(remDays/10),
Math.floor(lastDays/10));
slideTimerDigit
(
'day2'
, Math.floor(remDays%10),
Math.floor(lastDays%10));
slideTimerDigit
(
'hour1'
, Math.floor(remHours/10),
Math.floor(lastHours/10));
slideTimerDigit
(
'hour2'
, Math.floor(remHours%10),
Math.floor(lastHours%10));
slideTimerDigit
(
'minute1'
, Math.floor(remMinutes/10),
Math.floor(lastMinutes/10));
slideTimerDigit
(
'minute2'
, Math.floor(remMinutes%10),
Math.floor(lastMinutes%10));
slideTimerDigit
(
'second1'
, Math.floor(remSeconds/10),
Math.floor(lastSeconds/10));
slideTimerDigit
(
'second2'
, Math.floor(remSeconds%10),
Math.floor(lastSeconds%10));
lastDays = remDays;
lastHours = remHours;
lastMinutes = remMinutes;
lastSeconds = remSeconds;
setTimeout(updateClock, 1000);
}
function
slideTimerDigit(id, value, lastValue) {
const digit = document.getElementById(id);
if
(value !== lastValue) {
digit.style.transform =
'translateY(-100%)'
;
digit.style.opacity =
'0'
;
setTimeout(() => {
digit.style.transform =
'translateY(0)'
;
digit.textContent = value;
digit.style.opacity =
'1'
;
}, 300);
}
}
updateClock();
const slideFlag = () =>{
ourFlag.classList.add(
'slideFlag'
);
}
function
startRainingFlower() {
const canvasWidth = ourCard.offsetWidth;
const canvasHeight = ourCard.offsetHeight;
const canvas =
document.getElementById('rainingFlowerCanvas
');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const ctx = canvas.getContext('
2d
');
const flowers = [];
const numberOfFlowers = 100;
const petalColors =
['
#FF671F', '#fff', '#046A38'];
function
newFlower() {
this
.x = canvas.width * Math.random();
this
.y =
canvas.height * Math.random() - canvas.height;
this
.rotation = Math.random() * 360;
this
.petalColor = petalColors
[Math.floor(Math.random() * petalColors.length)];
this
.centerColor = petalColors
[Math.floor(Math.random() * petalColors.length)];
this
.petalSize = Math.random() * 10 + 3;
this
.centerSize =
this
.petalSize / 3;
this
.speed =
this
.petalSize/2;
this
.rise = 0;
this
.angle = 0;
}
for
(let i = 0; i < numberOfFlowers; i++) {
flowers.push(
new
newFlower());
}
function
changeFlower(flower) {
flower.rotation += 0.5;
flower.angle += 0.01;
flower.rise += 0.5;
flower.y += flower.speed;
flower.x +=
Math.sin(flower.angle) - 0.5 + Math.random();
if
(flower.y >= canvas.height + 20) {
flower.y = -20;
flower.x = Math.random() * canvas.width;
}
}
function
drawFlower(flower) {
for
(let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const petalX =
flower.x + Math.cos(angle) * flower.petalSize;
const petalY =
flower.y + Math.sin(angle) * flower.petalSize;
ctx.beginPath();
ctx.lineWidth = flower.petalSize / 4;
ctx.strokeStyle = flower.petalColor;
ctx.moveTo(petalX + flower.petalSize / 4, petalY);
ctx.lineTo(petalX, petalY + flower.petalSize / 4);
ctx.stroke();
ctx.closePath();
}
ctx.beginPath();
ctx.arc
(flower.x, flower.y, flower.centerSize,
0, 2 * Math.PI,
false
);
ctx.fillStyle = flower.centerColor;
ctx.fill();
ctx.closePath();
}
function
animateFlowerConfetti() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
flowers.forEach(flower => {
changeFlower(flower);
drawFlower(flower);
});
requestAnimationFrame(animateFlowerConfetti);
}
animateFlowerConfetti();
}