diff --git a/Readme.md b/Readme.md index bddc0c7..8cab009 100644 --- a/Readme.md +++ b/Readme.md @@ -1 +1,12 @@ -You can submit your assignments in your respective folders similar to your branch name +A visually immersive space-themed countdown timer built for the SAST Assignment. +This project simulates a real mission-control environment with animated stars, a floating astronaut, and a live countdown to a fictional rocket launch. + +Implemented a setInterval loop to update the timer every second. + +Calculated remaining time by subtracting the current timestamp from the launch timestamp. + +Designed a futuristic UI with neon glow, space colors, and an animated starfield using the API. + +Added a floating astronaut element to enhance the immersive space experience. + +Ensured clean structure, readable code, and smooth visual polish. diff --git a/astro2.png b/astro2.png new file mode 100644 index 0000000..b75b514 Binary files /dev/null and b/astro2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..366ea8b --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Mission Control – Rocket Launch Countdown + + + + + + + +
+ Astronaut + +
+ +

MISSION CONTROL CENTER 🚀

+ +
+

ROCKET LAUNCH COUNTDOWN

+ +
+
00

Days

+
00

Hours

+
00

Minutes

+
00

Seconds

+
+ +

+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9e165dd --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +// ---- COUNTDOWN ---- // + +const launchDate = new Date("2025-12-31T00:00:00").getTime(); + +const daysEl = document.getElementById("days"); +const hoursEl = document.getElementById("hours"); +const minutesEl = document.getElementById("minutes"); +const secondsEl = document.getElementById("seconds"); +const launchStatus = document.getElementById("launch-status"); + +function updateCountdown() { + const now = new Date().getTime(); + const diff = launchDate - now; + + if (diff <= 0) { + document.querySelector(".timer").style.display = "none"; + launchStatus.textContent = "🚀 LAUNCHED – MISSION SUCCESSFUL!"; + return; + } + + const days = Math.floor(diff / (1000*60*60*24)); + const hours = Math.floor((diff % (1000*60*60*24)) / (1000*60*60)); + const minutes = Math.floor((diff % (1000*60*60)) / (1000*60)); + const seconds = Math.floor((diff % (1000*60)) / 1000); + + daysEl.textContent = days; + hoursEl.textContent = hours; + minutesEl.textContent = minutes; + secondsEl.textContent = seconds; +} + +setInterval(updateCountdown, 1000); +updateCountdown(); + + +// ---- STARFIELD ANIMATION ---- // + +const canvas = document.getElementById("stars"); +const ctx = canvas.getContext("2d"); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +let stars = []; + +for (let i = 0; i < 200; i++) { + stars.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + radius: Math.random() * 2, + speed: Math.random() * 0.5 + 0.1 + }); +} + +function animateStars() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + stars.forEach(star => { + star.y += star.speed; + if (star.y > canvas.height) star.y = 0; + + ctx.beginPath(); + ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); + ctx.fillStyle = "white"; + ctx.fill(); + }); + + requestAnimationFrame(animateStars); +} + +animateStars(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a1175cf --- /dev/null +++ b/style.css @@ -0,0 +1,84 @@ +/* Google futuristic font */ +@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); + +body { + margin: 0; + overflow: hidden; + font-family: 'Orbitron', sans-serif; + color: #fff; + text-align: center; +} + +/* ⭐ Animated Stars Background */ +#stars { + position: fixed; + top: 0; left: 0; + width: 100%; + height: 100%; + background: black; + z-index: -1; +} + +/* 🧑‍🚀 Floating Astronaut */ +.astronaut img { + position: absolute; + width: 180px; + top: 20%; + right: 8%; + animation: float 6s infinite ease-in-out; +} + +@keyframes float { + 0% { transform: translateY(0px); } + 50% { transform: translateY(-25px); } + 100% { transform: translateY(0px); } +} + +.mission-title { + margin-top: 50px; + font-size: 36px; + letter-spacing: 4px; + text-shadow: 0 0 15px #00eaff; +} + +/* 🛰 Futuristic Countdown Panel */ +.countdown-panel { + margin: 80px auto; + width: 60%; + padding: 30px; + background: rgba(0, 15, 30, 0.6); + border: 2px solid #0ff; + border-radius: 15px; + backdrop-filter: blur(10px); + box-shadow: 0 0 25px #00eaff; +} + +/* 🎛 Glowing Countdown Timer */ +.timer { + display: flex; + justify-content: center; + gap: 40px; + margin-top: 30px; +} + +.timer div { + background: rgba(255, 255, 255, 0.05); + padding: 20px 35px; + border-radius: 10px; + border: 2px solid #00eaff; + box-shadow: 0 0 20px #00eaff; +} + +.timer span { + display: block; + font-size: 50px; + color: #00eaff; + text-shadow: 0 0 20px #00eaff; +} + +#launch-status { + margin-top: 25px; + font-size: 30px; + color: #00ffaa; + text-shadow: 0 0 15px #00ffaa; +}