Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 22, 2022 03:12 pm GMT

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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To