diff --git a/index.html b/index.html
new file mode 100644
index 0000000..31e9ede
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Countdown Timer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="hero">
+        <h1>Count Down Timer</h1>
+        <div id="inputDateTime">
+            <div>
+                <div id="inputDate">
+                    <label for="launchDate">Launch date:</label>
+                    <input type="date" id="launchDate">
+                </div>
+                <div id="inputTime">
+                    <label for="launchTime">Launch time:</label>
+                    <input type="time" id="launchTime">
+                </div>
+            </div>
+            <button id="startBtn">Start Countdown</button>
+            <button id="stopBtn">Stop Countdown</button>
+            <button id="resetBtn">Reset Countdown</button>
+        </div>
+        <div id="timebox">
+            <div class="time">
+                <h2 id="days">00</h2>
+                <p>Days</p>
+            </div>
+            <div class="time">
+                <h2 id="hours">00</h2>
+                <p>Hours</p>
+            </div>
+            <div class="time">
+                <h2 id="mins">00</h2>
+                <p>Minutes</p>
+            </div>
+            <div class="time">
+                <h2 id="secs">00</h2>
+                <p>Seconds</p>
+            </div>
+        </div>
+        <h2 id="launched">Launched</h2>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ff38373
--- /dev/null
+++ b/script.js
@@ -0,0 +1,53 @@
+window.onload = () => {
+    document.querySelector('#startBtn').onclick = start;
+    document.querySelector('#resetBtn').onclick = reset;
+}
+
+function start () {
+    const date = document.querySelector('#launchDate').value;
+    const time = document.querySelector('#launchTime').value;
+
+    const stop = document.querySelector('#stopBtn');
+
+    const endTime = new Date(date + " " + time);
+
+
+    const interval = setInterval(() => calculateTime(endTime), 1000);
+
+    stop.addEventListener('click', () => {
+        clearInterval(interval);
+    })
+}
+
+function calculateTime (endTime) {
+    const currentTime = new Date();
+
+    const days = document.querySelector('#days');
+    const hours = document.querySelector('#hours');
+    const minutes = document.querySelector('#mins');
+    const seconds = document.querySelector('#secs');
+    const launched = document.getElementById('launched')
+
+    if (endTime > currentTime) {
+        const timeLeft = (endTime - currentTime);
+
+        days.innerText = Math.floor(timeLeft / 1000 / 60 / 60 / 24);
+        hours.innerText = Math.floor(timeLeft / 1000 / 60 / 60 ) % 24;
+        minutes.innerText = Math.floor(timeLeft / 1000 / 60 ) % 60;
+        seconds.innerText = Math.floor(timeLeft / 1000 ) % 60;
+    } else {
+        days.innerText = 0;
+        hours.innerText = 0;
+        minutes.innerText = 0;
+        seconds.innerText = 0;
+        launched.style.display = "block";
+    }
+}
+
+function reset() {
+    document.querySelector('#days').innerText = 0;
+    document.querySelector('#hours').innerText = 0;
+    document.querySelector('#minutes').innerText = 0;
+    document.querySelector('#seconds').innerText = 0;
+
+}
diff --git a/space.jpg b/space.jpg
new file mode 100644
index 0000000..bd98651
Binary files /dev/null and b/space.jpg differ
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c24730e
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,75 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.hero {
+    height: 100vh;
+    background-color: black;
+    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('space.jpg');
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+}
+
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    margin: 3rem 0;
+}
+
+#inputDateTime {
+    font-size: 1.8rem;
+}
+
+#inputDateTime input {
+    padding: 0.5rem;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    border: 2px solid white;
+    border-radius: 20px;
+    background-color: rgba(72, 72, 72, 0.5);
+    color: white;
+}
+
+#inputDateTime button {
+    padding: 1rem;
+    margin: 1rem 0;
+    border-radius: 20px;
+    font-size: 1rem;
+    border: 2px solid white;
+    background-color: rgba(72, 72, 72, 0.5);
+    color: white;
+}
+
+#inputDateTime button:hover {
+    cursor: pointer;
+    box-shadow: 0 0 10px white;
+    font-size: 1.01rem;
+}
+
+#timebox {
+    display: flex;
+    gap: 90px;
+    margin: 2rem 0;
+}
+
+.time {
+    text-align: center;
+}
+
+.time h2 {
+    font-size: 5rem;
+    font-weight: 100;
+}
+
+#launched {
+    display: none;
+    font-size: 3rem;
+    margin: 2rem;
+}
\ No newline at end of file
