Lesson countdown notify

Toggle class name on click in jQuery

by yiiBoy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.7/bootstrap-notify.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Start lesson countdown</button>
</div>

<audio id="audio1"...

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;
}
div[data-notify=container] {
    background-color: lightblue;
    border-radius: 5px;
    padding: 15px ;
}
div[data-notify=container] [data-notify=message]{
  margin-right: 50px;
}

JavaScript

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

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
  countdownManager();
})

const options = {
  'audioIdPool': {
  	1: 'audio1',
  	2: 'audio1',
  	3: 'audio1',
    4: 'audio1',
    5: 'audio1',
  	6: 'audio1'
  },
  'countdownTimePool': {
  	1: 20,
  	2: 10,
  	3: 0,
  	4: 20,
  	5: 10,
  	6: 0
  },
}

const getCountdown = function(time) {
  var now = new Date().getTime();
  var t = time.getTime();
  var distance = t - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  return {
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
    distance: distance
  }
}

const playSound = function(audioId, loop = false) {
  if (audioId in options.audioIdPool) {
    $('#'+options.audioIdPool[audioId]).prop('loop', loop)[0].play();
  }
}
const messages = {};
const showNotifyWithCountdown = function(messageId, message, time) {
	let countdown = null;
  const notifyParams = {
    onShown: function() {
      countdown = setInterval(() => {
        const counter = getCountdown(time);
        if (counter.distance <= 0) {
          clearInterval(countdown);
        } else {
          const text = message + counter.minutes + "m " + counter.seconds + "s ";
          messages[messageId].update('message', text);
        }
      }, 1000);
    },
    onClosed: function() {
      clearInterval(countdown);
      deleteNotify(messageId);
    }    
  }
  const counter = getCountdown(time);
  const text = message + counter.minutes + "m " + counter.seconds + "s ";
  showNotify(messageId, text, notifyParams);
}
const deleteNotify = function(messageId) {
  if (messageId in messages) {
    delete messages[messageId];
  }
}

const...