completed animated countdown

tsr-kairi · Jul 10, 2021 · 9bd6033 · 9bd6033
1 parent 1ed764d
commit 9bd6033
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 0 deletions.
diff --git a/Day 34 - Animated Countdown/app.js b/Day 34 - Animated Countdown/app.js
@@ -0,0 +1,40 @@
+const nums = document.querySelectorAll(".nums span");
+const counter = document.querySelector(".counter");
+const finalMessage = document.querySelector(".final");
+const replay = document.querySelector("#replay");
+
+runAnimation();
+
+function resetDOM() {
+  counter.classList.remove("hide");
+  finalMessage.classList.remove("show");
+
+  nums.forEach((num) => {
+    num.classList.value = "";
+  });
+
+  nums[0].classList.add("in");
+}
+
+function runAnimation() {
+  nums.forEach((num, idx) => {
+    const nextToLast = nums.length - 1;
+
+    num.addEventListener("animationend", (e) => {
+      if (e.animationName === "goIn" && idx !== nextToLast) {
+        num.classList.remove("in");
+        num.classList.add("out");
+      } else if (e.animationName === "goOut" && num.nextElementSibling) {
+        num.nextElementSibling.classList.add("in");
+      } else {
+        counter.classList.add("hide");
+        finalMessage.classList.add("show");
+      }
+    });
+  });
+}
+
+replay.addEventListener("click", () => {
+  resetDOM();
+  runAnimation();
+});
diff --git a/Day 34 - Animated Countdown/index.html b/Day 34 - Animated Countdown/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Animated | Countdown</title>
+  </head>
+  <body>
+    <div class="counter">
+      <div class="nums">
+        <span class="in">3</span>
+        <span>2</span>
+        <span>1</span>
+        <span>0</span>
+      </div>
+
+      <h4>Get Ready</h4>
+    </div>
+
+    <div class="final">
+      <h1>GO</h1>
+      <button id="replay">Replay</button>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/Day 34 - Animated Countdown/style.css b/Day 34 - Animated Countdown/style.css
@@ -0,0 +1,124 @@
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+h4 {
+  font-size: 20px;
+  margin: 5px;
+  text-transform: uppercase;
+}
+
+.counter {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.counter.hide {
+  transform: translate(-50%, -50%) scale(0);
+  animation: hide 0.2s ease-out;
+}
+
+@keyframes hide {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
+
+.final {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  text-align: center;
+}
+
+#replay {
+  cursor: pointer;
+}
+
+.final.show {
+  transform: translate(-50%, -50%) scale(1);
+  animation: show 0.2s ease-out;
+}
+
+@keyframes show {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+
+  30% {
+    transform: translate(-50%, -50%) scale(1.4);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.nums {
+  color: #3498db;
+  font-size: 50px;
+  position: relative;
+  overflow: hidden;
+  width: 250px;
+  height: 50px;
+}
+
+.nums span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(120deg);
+  transform-origin: bottom center;
+}
+
+.nums span.in {
+  transform: translate(-50%, -50%) rotate(0deg);
+  animation: goIn 0.5s ease-in-out;
+}
+
+.nums span.out {
+  animation: goOut 0.5s ease-in-out;
+}
+
+@keyframes goIn {
+  0% {
+    transform: translate(-50%, -50%) rotate(120deg);
+  }
+  30% {
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  60% {
+    transform: translate(-50%, -50%) rotate(10deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+}
+
+@keyframes goOut {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  60% {
+    transform: translate(-50%, -50%) rotate(20deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-120deg);
+  }
+}