Day29-countdown Timer

This article originates from: Chun elder brother personal blog: http://www.liyuechun.org
Author: © Li Yue Chun-the person chasing time
Synopsis: JavaScript30 is a 30 day challenge from Wes Bos. The project offers 30 video tutorials, 30 challenge starter documents, and 30 Challenge solution source code free of charge. The goal is to help people write with pure JavaScript, without using frames and libraries, and without compilers and references. Now you see the 29th article in this series of guides. Complete Chinese version of the Guide and video tutorials on the entire stack from zero to one tribe. Effect Chart

Online effect

The 20th Day Challenge is to set a countdown time and then start the countdown. HTML code

<! DOCTYPE html> The custom Data-time in the button above is the countdown time, in seconds. Form is a custom countdown time to be divided into units. Class for Display__time-left div mainly to show the dynamic countdown. Class for Display__end-time div primarily to show when the countdown ends.
CSS Code 
HTML {box-sizing:border-box;
  font-size:10px;
  Background: #8E24AA;

Background:linear-gradient (45deg, #42a5f5 0, #478ed1 50%, #0d47a1 100%);}

*, *:before, *:after {box-sizing:inherit;}
  body {margin:0;
  Text-align:center;
font-family: ' Inconsolata ', monospace;
  }. display__time-left {font-weight:100;
  Font-size:20rem;
  margin:0;
  Color:white;
text-shadow:4px 4px 0 rgba (0, 0, 0, 0.05);
  } timer {Display:flex;
  MIN-HEIGHT:100VH;
Flex-direction:column;

}. Timer__controls {Display:flex}

. timer__controls>* {Flex:1}
  . timer__controls form {flex:1;
Display:flex;
  }. timer__controls input {flex:1;
  border:0;
Padding:2rem;
  }. Timer__button {background:none;
  border:0;
  Cursor:pointer;
  Color:white;
  Font-size:2rem;
  Text-transform:uppercase;
  Background:rgba (0, 0, 0, 0.1);
  border-bottom:3px solid Rgba (0, 0, 0, 0.2);
  border-right:1px solid Rgba (0, 0, 0, 0.2);
  Padding:1rem; Font-family: 'Inconsolata ', monospace;
  }. Timer__button:hover,. Timer__button:focus {Background:rgba (0, 0, 0, 0.2);
outline:0;
  } display {flex:1;
  Display:flex;
  Flex-direction:column;
  Align-items:center;
Justify-content:center;
  }. display__end-time {font-size:4rem;
Color:white; }
 
 JS Code Implementation Logic   
Let Countdown;
Const Timerdisplay = Document.queryselector ('. Display__time-left ');
Const ENDTIME = Document.queryselector ('. Display__end-time ');

Const BUTTONS = Document.queryselectorall (' [data-time] ');

  function timer (seconds) {//clear any existing Timers clearinterval (countdown);
  Const NOW = Date.now ();
  Const THEN = now + seconds * 1000;
  Displaytimeleft (seconds);

  Displayendtime (then);
    Countdown = SetInterval (() => {Const SECONDSLEFT = Math.Round ((Then-date.now ())/1000);
    Check if we should stop it!
      if (Secondsleft < 0) {clearinterval (countdown);
    Return
  }//Display it displaytimeleft (secondsleft);
}, 1000);
  function Displaytimeleft (seconds) {Const minutes = Math.floor (SECONDS/60);
  Const Remainderseconds = seconds% 60; Const DISPLAY = ' ${minutes}:${remainderseconds < 10?
  ' 0 ': '}${remainderseconds} ';
  Document.title = display;
Timerdisplay.textcontent = display; } function Displayendtime (timeStamp) {Const END = new Date (timestamp);
  Const HOUR = end.gethours (); Const Adjustedhour = hour > 12?
  Hour-12:hour;
  Const minutes = End.getminutes (); Endtime.textcontent = ' is back at ${adjustedhour}:${minutes < 10?
' 0 ': '}${minutes} ';
  function Starttimer () {Const seconds = parseint (this.dataset.time);
Timer (seconds);

Buttons.foreach (Button => button.addeventlistener (' click ', Starttimer));
  Document.customForm.addEventListener (' Submit ', function (e) {e.preventdefault ();
  const mins = This.minutes.value;
  Console.log (mins);
  Timer (mins * 60);
This.reset (); });
 
Logical Analysis: When you click on the button button, call the Starttimer method.

Buttons.foreach (Button => button.addeventlistener (' click ', Starttimer));
When you customize the countdown time in the input box, the incoming callback function is called when you enter enter.
Document.customForm.addEventListener (' Submit ', function (e) {
  e.preventdefault ();
  const mins = this.minutes.value;
  Console.log (mins);
  Timer (mins *);
  This.reset ();
});
Starttimer Function Code Interpretation
function Starttimer () {
<!--gets the Data-time value of the button that is currently clicked and converts it to an integer-->
  const seconds = parseint ( This.dataset.time);
  <!--call the timer function-->
  timer (seconds);
}
Displaytimeleft Code
<!--calculated minutes and seconds, and show-->
function displaytimeleft (seconds) {
  Const minutes = Math.floor (SECONDS/60);
  Const Remainderseconds = seconds%;
  Const DISPLAY = ' ${minutes}:${remainderseconds < 10? ' 0 ': '}${remainderseconds} ';
  Document.title = display;
  Timerdisplay.textcontent = display;
}
Displayendtime Code
<!--calculates the countdown end time and displays the-->
function displayendtime (timestamp) {
  const ending = new Date (timestamp);
  Const HOUR = end.gethours ();
  Const Adjustedhour = hour > 12? Hour-12:hour;
  Const minutes = End.getminutes ();
  Endtime.textcontent = ' is back at ${adjustedhour}:${minutes < 10? ' 0 ': '}${minutes} ';
Timer code
function timer (seconds) {
  //clear any existing timers
  clears the countdown
  clearinterval (Countdown)

in progress; <!--get the current time-->
  const NOW = Date.now ();

  <!--calculate how many milliseconds to end the countdown-->
  Const THEN = now + seconds * 1000;

  <!--call the Displaytimeleft function to show the countdown effect-->
  displaytimeleft (seconds);
  <!--show End time-->
  displayendtime (then);

<!--set Timer, update countdown build-->
  countdown = SetInterval (() => {
    Const SECONDSLEFT = Math.Round (then-date.now ())/1000);
    Check if we should stop it!
    if (Secondsleft < 0) {
      clearinterval (countdown);
      return;
    }
    Display it
    displaytimeleft (secondsleft);
  }, 1000);
}
 
Source Download 
Github Source Code