text: 'use strict'
  
  // Создай плагин настраиваемого таймера, который ведет обратный отсчет до предварительно определенной даты. 
  // Такой плагин может использоваться в блогах и интернет-магазинах, страницах регистрации событий, 
  // во время технического обслуживания и т. д.
  
  // preview
  
  // Плагин ожидает следующую HTML-разметку и показывает четыре цифры: дни, часы, минуты и секунды 
  // в формате XX:XX:XX:XX. Количество дней может состоять из более чем двух цифр.
  
  /* <div class="timer" id="timer-1">
    <div class="field">
      <span class="value" data-value="days">11</span>
      <span class="label">Days</span>
    </div>
  
    <div class="field">
      <span class="value" data-value="hours">11</span>
      <span class="label">Hours</span>
    </div>
  
    <div class="field">
      <span class="value" data-value="mins">11</span>
      <span class="label">Minutes</span>
    </div>
  
    <div class="field">
      <span class="value" data-value="secs">11</span>
      <span class="label">Seconds</span>
    </div>
  </div> */
  
  // Плагин это класс CountdownTimer, экземпляр которого создает новый таймер с настройками.
  
  // new CountdownTimer({
  //   selector: '#timer-1',
  //   targetDate: new Date('Jul 17, 2019'),
  // });
  
  // Для подсчета значений используй следующие готовые формулы, где time - разница 
  // между targetDate и текущей датой.
  
  /*
   * Оставшиеся дни: делим значение UTC на 1000 * 60 * 60 * 24, количество
   * миллисекунд в одном дне (миллисекунды * секунды * минуты * часы)
   */
  // const days = Math.floor(time / (1000 * 60 * 60 * 24));
  
  /*
   * Оставшиеся часы: получаем остаток от предыдущего расчета с помощью оператора
   * остатка % и делим его на количество миллисекунд в одном часе
   * (1000 * 60 * 60 = миллисекунды * минуты * секунды)
   */
  // const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  
  /*
   * Оставшиеся минуты: получаем оставшиеся минуты и делим их на количество
   * миллисекунд в одной минуте (1000 * 60 = миллисекунды * секунды)
   */
  // const mins = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
  
  /*
   * Оставшиеся секунды: получаем оставшиеся секунды и делим их на количество
   * миллисекунд в одной секунде (1000)
   */
  // const secs = Math.floor((time % (1000 * 60)) / 1000);
  
  class CountdownTimer {
  
    constructor(obj) {
  
      this.timeList = document.querySelector(obj.selector);
      this.targetDate = obj.targetDate;
      this.days = document.querySelector('span[data-value="days"]');
      this.hours = document.querySelector('span[data-value="hours"]');
      this.mins = document.querySelector('span[data-value="mins"]');
      this.secs = document.querySelector('span[data-value="secs"]');
      this.timerId;
  
    }
  
    pad(value) {
      return String(value).padStart(2, '0');
    }
  
    start() {
      this.timerId = setInterval(this.tick.bind(this), 1000);
    }
  
    stop() {
      clearInterval(this.timerId);
    }
  
    tick() {
  
      const time = this.targetDate - Date.now();
      const days = this.pad(Math.floor(time / (1000 * 60 * 60 * 24)));
      const hours = this.pad(Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
      const mins = this.pad(Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)));
      const secs = this.pad(Math.floor((time % (1000 * 60)) / 1000));
      const secsValue = this.secs.innerHTML;
  
      if (secsValue <= 0) {
        this.stop();
        return;
      }
  
      this.days.innerHTML = days;
      this.hours.innerHTML = hours;
      this.mins.innerHTML = mins;
      this.secs.innerHTML = secs;
  
  
      // console.log(`${days}:${hours}:${mins}:${secs}`);
  
    }
  }
  
  const timer = new CountdownTimer({
    selector: '#timer-1',
    targetDate: new Date('Jan 01, 2020'),
  });
  
  timer.start();