diff --git a/public/Rocket.svg b/public/Rocket.svg new file mode 100644 index 0000000..e0b5034 --- /dev/null +++ b/public/Rocket.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/rocket.png b/public/rocket.png new file mode 100644 index 0000000..cc5fdb2 Binary files /dev/null and b/public/rocket.png differ diff --git a/src/app/countdown/page.tsx b/src/app/countdown/page.tsx new file mode 100644 index 0000000..6462203 --- /dev/null +++ b/src/app/countdown/page.tsx @@ -0,0 +1,115 @@ +/* eslint-disable jsx-a11y/alt-text */ +/* eslint-disable @next/next/no-img-element */ +"use client"; + +import { useEffect, useState } from "react"; + +export default function Countdown() { + const [progress, setProgress] = useState(0); + const [timeLeft, setTimeLeft] = useState("WEE"); + + useEffect(() => { + const startDate = new Date(2024, 1, 10, 13, 0, 0, 0); + const endDate = new Date(2024, 1, 11, 13, 0, 0, 0); + const fullDuration = endDate.getTime() - startDate.getTime(); + + const updateLoop = setInterval(() => { + const currentDate = new Date(); + const currentDuration = currentDate.getTime() - startDate.getTime(); + + setProgress(currentDuration / fullDuration); + + let duration = fullDuration - currentDuration; + + const hrLeft = Math.floor(duration / (1000 * 60 * 60)); + duration -= hrLeft * (1000 * 60 * 60); + const minLeft = Math.floor(duration / (1000 * 60)); + duration -= minLeft * (1000 * 60); + const secLeft = Math.floor(duration / 1000); + duration -= secLeft * 1000; + const msLeft = + duration > 99 + ? duration + : duration > 9 + ? `0${duration}` + : `00${duration}`; + + setTimeLeft( + `${hrLeft}hrs ${minLeft}min ${secLeft}sec ${msLeft}ms remaining!` + ); + }, 0); + + return () => clearInterval(updateLoop); + }); + + return ( + <> +
+ + +
+ {timeLeft} +
+
+
+ +
+
+ + ); +}