Completed Countdown App

h-o-k · Oct 27, 2023 · 7a1de5b · 7a1de5b
commit 7a1de5b
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# Task 2: Countdown App
+
+-   Open the `task-2-countdown-app` folder in VS Code and open the `index.html` file in your browser.
+-   You should see a countdown app with multiple countdown timers.
+-   Your task is to make the countdown timers work.
+-   For this task, you will need to edit the just the `script.js` file.
+
+-   **_Hint:_** Look up the [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object in JavaScript.
+-   **_Hint:_** Look up the [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) method in JavaScript.
+-   **_Hint:_** Look up the [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) method in JavaScript.
+-   **_Hint:_** Look up the [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method in JavaScript.
+-   **_Hint:_** Look up the [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method in JavaScript.
+-   **_Hint:_** Look up the [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) method in JavaScript.
+-   **_Hint:_** Look up the [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property in JavaScript.
+-   **_Hint:_** Look up the [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) property in JavaScript.
+
+-   Here is a GIF of the expected result:
+
+![Countdown](src/media/countdown.gif)
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Countdown</title>
+		<link
+			href="https://fonts.googleapis.com/css?family=Inconsolata"
+			rel="stylesheet"
+			type="text/css"
+		/>
+		<link rel="stylesheet" href="style.css" />
+		<link rel="icon" href="https://fav.farm/🔥" />
+	</head>
+	<body>
+		<div class="timer">
+			<div class="timer__controls">
+				<button data-time="20" class="timer__button">20 Secs</button>
+				<button data-time="300" class="timer__button">Work 5</button>
+				<button data-time="900" class="timer__button">Quick 15</button>
+				<button data-time="1200" class="timer__button">Snack 20</button>
+				<button data-time="3600" class="timer__button">
+					Lunch Break 60
+				</button>
+				<form name="customForm" id="custom">
+					<input
+						type="text"
+						name="minutes"
+						placeholder="Enter Minutes"
+					/>
+					<button class="submit__button" name="submitCustomForm">
+						Enter
+					</button>
+				</form>
+			</div>
+			<div class="display">
+				<h1 class="display__time-left"></h1>
+				<p class="display__end-time"></p>
+			</div>
+		</div>
+
+		<script src="script.js"></script>
+	</body>
+</html>
diff --git a/src/media/countdown.gif b/src/media/countdown.gif
diff --git a/src/script.js b/src/script.js
@@ -0,0 +1,80 @@
+let countdown;
+
+const h1TimeLeft = document.querySelector(".display__time-left");
+const pEndTime = document.querySelector(".display__end-time");
+const buttonsCtrl = document.querySelectorAll(".timer__button");
+
+/**
+ * timer - runs the countdown sequence
+ * @param {number} seconds time in seconds
+ */
+function timer(seconds) {
+	clearInterval(countdown); // Clear pre-existing timers
+
+	const now = Date.now(); // milliseconds
+	const future = now + seconds * 1000; // milliseconds
+
+	displayEndTime(future);
+	displayTimeLeft(seconds);
+	countdown = setInterval(function () {
+		const newNow = Date.now();
+		const secondsLeft = Math.round((future - newNow) / 1000); // seconds
+		if (secondsLeft < 0) {
+			clearInterval(countdown);
+			return;
+		}
+		displayTimeLeft(secondsLeft);
+	}, 1000);
+}
+
+function displayTimeLeft(seconds) {
+	const minutes = Math.floor(seconds / 60);
+	const remSeconds = seconds % 60; // 102:27
+
+	const displayTime = `${minutes < 10 ? "0" : ""}${minutes}:${
+		remSeconds < 10 ? "0" : ""
+	}${remSeconds}`;
+
+	h1TimeLeft.textContent = displayTime;
+}
+
+function displayEndTime(future) {
+	const endTime = new Date(future);
+	const hours = endTime.getHours();
+	const adjustedHours = hours > 12 ? hours - 12 : hours;
+	const minutes = endTime.getMinutes();
+	const AMPM = hours > 12 ? "PM" : "AM";
+
+	const diplayEnd = `Be Back At ${
+		adjustedHours < 10 ? "0" : ""
+	}${adjustedHours}:${minutes < 10 ? "0" : ""}${minutes} ${AMPM}`;
+
+	pEndTime.textContent = diplayEnd;
+}
+
+buttonsCtrl.forEach((button) =>
+	button.addEventListener("click", function (event) {
+		// console.log(typeof event.target.dataset.time);
+		timer(parseInt(event.target.dataset.time)); // Grab the time from the dataset attribute
+	})
+);
+
+document.customForm.addEventListener("submit", (event) => {
+	event.preventDefault();
+
+	// Check for empty or non-numbers
+	if (
+		event.target.minutes.value === "" ||
+		!parseInt(event.target.minutes.value)
+	) {
+		alert("Please enter a number");
+		event.target.reset();
+		return;
+	}
+
+	timer(event.target.minutes.value * 60);
+
+	// event.target.minutes.value = "";
+
+	event.target.reset();
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,92 @@
+html {
+	box-sizing: border-box;
+	font-size: 10px;
+	background: #8e24aa;
+	background: linear-gradient(45deg, #42a5f5 0%, #478ed1 50%, #0d47a1 100%);
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body {
+	margin: 0;
+	text-align: center;
+	font-family: "Inconsolata", monospace;
+}
+
+.display__time-left {
+	font-weight: 100;
+	font-size: 20rem;
+	margin: 0;
+	color: white;
+	text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.timer {
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+}
+
+.timer__controls {
+	display: flex;
+}
+
+.timer__controls > * {
+	flex: 1;
+}
+
+.timer__controls form {
+	flex: 1;
+	display: flex;
+}
+
+.timer__controls input {
+	flex: 1;
+	border: 0;
+	padding: 2rem;
+	font-family: "Inconsolata", monospace;
+}
+
+.timer__controls input:focus {
+	outline: 0;
+}
+
+.timer__button,
+.submit__button {
+	background: none;
+	border: 0;
+	cursor: pointer;
+	color: white;
+	font-size: 2rem;
+	text-transform: uppercase;
+	background: rgba(0, 0, 0, 0.1);
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+	border-right: 1px solid rgba(0, 0, 0, 0.2);
+	padding: 1rem;
+	font-family: "Inconsolata", monospace;
+}
+
+.timer__button:hover,
+.timer__button:focus,
+.submit__button:hover,
+.submit__button:focus {
+	background: rgba(0, 0, 0, 0.2);
+	outline: 0;
+}
+
+.display {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.display__end-time {
+	font-size: 4rem;
+	color: white;
+}