diff --git a/Templates/Custom Countdown/README.md b/Templates/Custom Countdown/README.md new file mode 100644 index 0000000..e60e43e --- /dev/null +++ b/Templates/Custom Countdown/README.md @@ -0,0 +1 @@ +# Custom-Countdown \ No newline at end of file diff --git a/Templates/Custom Countdown/index.html b/Templates/Custom Countdown/index.html new file mode 100644 index 0000000..496e629 --- /dev/null +++ b/Templates/Custom Countdown/index.html @@ -0,0 +1,44 @@ + + + + + + Custom Countdown + + + + +
+
+
+

Create a Custom CountDown

+
+ + + + + +
+
+ + +
+ + + + \ No newline at end of file diff --git a/Templates/Custom Countdown/script.js b/Templates/Custom Countdown/script.js new file mode 100644 index 0000000..efb6289 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Templates/Custom Countdown/style.css b/Templates/Custom Countdown/style.css new file mode 100644 index 0000000..523a325 --- /dev/null +++ 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 new file mode 100644 index 0000000..26af6c3 Binary files /dev/null and b/Templates/Custom Countdown/time.mp4 differ