jQuery toggleClass example

Toggle class name on click in jQuery

by Rahsheen Porter

HTML

<div id="banner-message">
  <p id="timer">Hello World</p>
  <button>Start Timer</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

const COUNTDOWN_TIMER_DATE="2020-08-22T00:00:00.000-05:00";

// find elements
var banner = $("#banner-message")
var button = $("button")
var timer = $("#timer")

// handle click and add class
button.on("click", () => {
  buildTimer(timer);
})

function buildTimer($timer) {
  var today = new Date().getTime();
  var endTime = new Date(COUNTDOWN_TIMER_DATE).setHours(0, 0, 0, 0);
  var diff = endTime - today;

  if (diff > 0) {
    var timer = setInterval((function tick() {
      var now = new Date().getTime(),
        distance = (endTime - now),
        days = Math.floor(distance / (1000 * 60 * 60 * 24)),
        hours = ('00' + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2),
        minutes = ('00' + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2),
        seconds = ('00' + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);

      if (distance < 0) {
        clearInterval(timer);

        return null;
      }

      $timer.html(
        '<span class="mw-announcement-bar__timer__value">' +
        '<span class="mw-announcement-bar__timer__digit">' + days + '</span>' +
        '<span class="mw-announcement-bar__timer__label">Days</span>' +
        '</span>' +
        '<span class="mw-announcement-bar__timer__value">' +
        '<span class="mw-announcement-bar__timer__digit">' + hours + '</span>' +
        '<span class="mw-announcement-bar__timer__label">Hours</span>' +
        '</span>' +
        '<span class="mw-announcement-bar__timer__value">' +
        '<span class="mw-announcement-bar__timer__digit">' + minutes + '</span>' +
        '<span class="mw-announcement-bar__timer__label">Minutes</span>' +
        '</span>' +
        '<span class="mw-announcement-bar__timer__value">' +
        '<span class="mw-announcement-bar__timer__digit">' + seconds + '</span>' +
        '<span class="mw-announcement-bar__timer__label">Seconds</span>' +
        '</span>'
      );

      return tick;
    })(), 1000);
  } else {
 ...