An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
June 22, 2022 03:12 pm GMT
Original Link: https://dev.to/robsonmuniz16/custom-countdown-timer-javascript-2ph8
Custom Countdown Timer | JavaScript
Learn How To Create A Custom Countdown Timer using JavaScript step-by-step from scratch.
Markup
<!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 Background--><video class="video-background" loop muted autoplay> <source src="time.mp4"></video><div class="video-overlay"></div><!--Container--><div class="container"><!--Input--> <div class="input-container" id="input-container"> <h1>Create a Custom Countdown</h1> <form class="form" id="countdownForm"> <label for="title">Title</label> <input type="text" id="title" placeholder="Your Countdown"> <label for="date-picker">Select a Date</label> <input type="date" id="date-picker"> <button type="submit">Submit</button> </form> </div><!--Countdown--> <div class="countdown" id="countdown" hidden> <h1 class="countdown-title" id="countdown-title"> </h1> <ul> <li><span></span>Days</li> <li><span></span>Hours</li> <li><span></span>Minutes</li> <li><span></span>Seconds</li> </ul> <button id="countdown-button">Reset</button> </div><!-- Complete--> <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>
Style
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');html { box-sizing: border-box;}body { margin: 0; min-height: 100vh; overflow-y: hidden; display: flex; align-items: center; font-family: 'Roboto', sans-serif;}/* Video Background */.video-background { position: fixed; right: 0; bottom: 0;}video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.video-overlay { position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; background: rgba(0,0,0,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: 25px; 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',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; transition: all 0.2s ease-in;}button:hover{ filter: brightness(115%);}button:active{ transform: scale(0.95);}/* 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,13,13); } 25%{ color: rgb(233,211,13); } 50%{ color: rgb(64,233,13); transform: scale(1.5); } 75%{ color: rgb(0,38,253); } 100%{ color: rgb(181,16,231); }}/* Media Query: Large Smartphone (Vertical) */@media screen and (max-width: 600px) { .video-background { height: 100vh; width: 100vw; } video { object-fit: cover; 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; }}
Follow me on:
Facebook: https://bit.ly/3cp2S5W
YouTube: https://bit.ly/3oBQbc0
Original Link: https://dev.to/robsonmuniz16/custom-countdown-timer-javascript-2ph8
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To