Coders-Evoke-Community · RIYANSHGARG · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022
diff --git a/Templates/Custom Countdown/README.md b/Templates/Custom Countdown/README.md
@@ -0,0 +1 @@
+# Custom-Countdown
diff --git a/Templates/Custom Countdown/index.html b/Templates/Custom Countdown/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Countdown</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <video loop muted autoplay class="video-background">
+        <source src="time.mp4"></source>
+    </video>
+    <div class="video-overlay"></div>
+    <div class="container">
+        <div class="input-container" id="input-container">
+            <h1>Create a Custom CountDown</h1>
+            <form action="" class="form" id="countdownForm">
+                <label for="title">Title</label>
+                <input type="text" placeholder="What are you counting down to?" id="title">
+                <label for="date-picker">Select a date</label>
+                <input type="date" id="date-picker" required>
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+        <div class="countdown" id="countdown" hidden>
+            <h1 id="countdown-title"></h1>
+            <ul>
+                <li><span></span>Days</li>
+                <li><span></span>Hours</li>
+                <li><span></span>Minutess</li>
+                <li><span></span>Seconds</li>
+            </ul>
+            <button id="countdown-button">Reset</button>
+        </div>
+        <div class="complete" id="complete" hidden>
+            <h1 class="complete-title">Countdown Complete!</h1>
+            <h1 id="complete-info"></h1>
+            <button id="complete-button">New Countdown</button>
+        </div>
+    </div>
+    <!-- Script -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Templates/Custom Countdown/script.js b/Templates/Custom Countdown/script.js
@@ -0,0 +1,97 @@
+const inputContainer = document.querySelector('#input-container');
+const countdownForm = document.querySelector('#countdownForm');
+const dateEl = document.querySelector("#date-picker");
+
+const completeEl = document.querySelector("#complete");
+const completeElInfo = document.querySelector("#complete-info");
+const completeBtn = document.querySelector("#complete-button");
+
+
+let countdownTitle = '';
+let countdownDate = '';
+let countdownValue = Date;
+let countdownActive;
+let savedCountdown;
+
+const second = 1000;
+const minute = second*60;
+const hour = minute*60;
+const day = hour*24;
+
+
+const countdownEl = document.querySelector("#countdown");
+const countdownElTitle = document.querySelector("#countdown-title");
+const countdownBtn = document.querySelector("#countdown-button");
+const timeElements = document.querySelectorAll("span");
+// set min date
+
+const today = new Date().toISOString().split("T")[0];
+dateEl.setAttribute('min',today);
+
+function updateDom(){
+    countdownActive = setInterval(()=>{
+        const now = new Date().getTime();
+    const distance = countdownValue - now;
+    const days = Math.floor(distance/day)
+    const hours = Math.floor((distance%day)/hour);
+    const minutes = Math.floor((distance%hour)/minute);
+    const seconds = Math.floor((distance%minute)/second);
+    inputContainer.hidden = true;
+
+    if(distance<0){
+        countdownEl.hidden= true;
+        clearInterval(countdownActive);
+        completeElInfo.textContent = `${countdownTitle} finished on ${countdownDate}`;
+        completeEl.hidden = false;
+
+    } else{
+        countdownElTitle.textContent = `${countdownTitle}`;
+        timeElements[0].textContent = `${days}`;
+        timeElements[1].textContent = `${hours}`;
+        timeElements[2].textContent = `${minutes}`;
+        timeElements[3].textContent = `${seconds}`;
+        completeEl.hidden= true;
+        countdownEl.hidden = false;
+    }
+    },second);
+}
+
+function updateCountdown(e){
+    e.preventDefault();
+    countdownTitle = e.srcElement[0].value;
+    countdownDate = e.srcElement[1].value;
+    savedCountdown = {
+        title: countdownTitle,
+        date: countdownDate
+    };
+    localStorage.setItem('countdown',JSON.stringify(savedCountdown));
+    countdownValue = new Date(countdownDate).getTime();
+    updateDom();
+}
+
+function reset(){
+    countdownEl.hidden=true;
+    completeEl.hidden=true;
+    inputContainer.hidden=false;
+    clearInterval(countdownActive);
+    countdownTitle='';
+    countdownDate='';
+    localStorage.removeItem('countdown');
+}
+
+function restoreCountdown(){
+    if(localStorage.getItem('countdown')){
+        inputContainer.hidden=true;
+        savedCountdown = JSON.parse(localStorage.getItem('countdown'));
+        countdownTitle = savedCountdown.title;
+        countdownDate = savedCountdown.date;
+        countdownValue = new Date(countdownDate).getTime();
+        updateDom();
+    }
+}
+
+countdownForm.addEventListener('submit',updateCountdown);
+countdownBtn.addEventListener('click',reset);
+completeBtn.addEventListener('click',reset);
+
+restoreCountdown();
diff --git a/Templates/Custom Countdown/style.css b/Templates/Custom Countdown/style.css
@@ -0,0 +1,203 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+/* Video Background */
+.video-background {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: auto;
+}
+
+video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.video-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(255,255,255,0.35);
+}
+
+/* Container */
+.container {
+  min-width: 580px;
+  min-height: 304px;
+  color: black;
+  margin: 0 auto;
+  padding: 25px 50px;
+  border-radius: 5px;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  background: rgba(255,255,255,0.85);
+}
+
+.input-container {
+  position: relative;
+  top: 20px;
+}
+
+h1 {
+  font-size: 35px;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+/* Form */
+.form {
+  width: 480px;
+}
+
+label {
+  font-weight: bold;
+  margin-left: 10px;
+}
+
+input {
+  width: 95%;
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  background: #fff;
+  outline: none;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+/* Button */
+button {
+  width: 100%;
+  height: 40px;
+  border-radius: 20px;
+  margin-top: 15px;
+  border: none;
+  text-transform: uppercase;
+  background: #006959;
+  color: white;
+  cursor: pointer;
+  outline: none;
+}
+
+button:hover{
+  filter: brightness(110%);
+}
+
+/* Countdown */
+ul {
+  margin-left: -45px;
+}
+
+li {
+  display: inline-block;
+  font-size: 30px;
+  list-style-type: none;
+  padding: 10px;
+  text-transform: uppercase;
+}
+
+li span {
+  display: block;
+  font-size: 80px;
+  text-align: center;
+}
+
+/* Complete */
+.complete {
+  position: relative;
+  top: 60px;
+}
+
+.complete-title{
+  animation: complete 4s infinite;
+}
+
+@keyframes complete{
+  0%{
+    color: rgb(233, 4, 4);
+  }
+  25%{
+    color: #b7e903;
+  }
+  50%{
+    color: #00611d;
+    transform: scale(1.5);
+  }
+  75%{
+    color: #00b4b4;
+  }
+  100%{
+    color: #58017a;
+  }
+}
+
+/* Media Query: Large Smartphone (Vertical) */
+@media screen and (max-width: 600px) {
+  .video-background {
+    height: 100vh;
+    width: 100vw;
+  }
+
+  video {
+    object-fit: cover;
+    object-position: 70%;
+    margin-top: -1px;
+  }
+
+  .container {
+    min-width: unset;
+    width: 95vw;
+    min-height: 245px;
+    padding: 20px;
+    margin: 10px;
+  }
+
+  .input-container {
+    top: unset;
+  }
+
+  .countdown {
+    position: relative;
+    top: 10px;
+  }
+
+  .form {
+    width: unset;
+  }
+
+  input {
+    width: 93%;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  li {
+    font-size: 15px;
+  }
+
+  li span {
+    font-size: 40px;
+  }
+}
diff --git a/Templates/Custom Countdown/time.mp4 b/Templates/Custom Countdown/time.mp4