Multi Progress Bar

by kpulkit29

HTML

<button type="button" class='add'>Add</button>

JavaScript

let count = 0;
let pubSub = {
	events: {},
  publish: function(event)  {
    this.events[event].forEach(cb => cb());
  },
  subscribe: function(event, cb) {
    this.events[event] = this.events[event]  || [];
    this.events[event].push(cb);
  }
};

pubSub.subscribe('end', function() {
	if(count<=0) return;
  count--;
})

pubSub.subscribe('add', function() {
console.log(count);
	if(count == 0) {
    let pBar = document.createElement('progress');
    pBar.setAttribute('max', '100');
     pBar.setAttribute('value', '0');
    document.getElementsByTagName('body')[0].appendChild(pBar);
    start(pBar);
  }
  count++;
})

pubSub.subscribe('check', function() {
	if(count > 0) {
  	let pBar = document.createElement('progress');
    pBar.setAttribute('max', '100');
    pBar.setAttribute('value', '0');
    document.getElementsByTagName('body')[0].appendChild(pBar);
    start(pBar);
  }
})

function start(element) {
	let count = 0;
	let id = setInterval(() => {
  	if(count>=3) {clearInterval(id);
    console.log('entered');
    pubSub.publish('end');
    pubSub.publish('check');
    return;
    }
    element.value = '' + (parseInt(element.value) + 33);
  	count++;
  }, 1000)
}

document.getElementsByClassName('add')[0].addEventListener('click', function() {
	pubSub.publish('add');
})

console.log(pubSub);