JSFiddle - React, Tailwind, and code Playground

by leethelobster

HTML

<button>load</button>

<div class="master">
  MASTER<div class="c"><div class="bar"></div></div>
</div>

<div class="child-c">
  loader 1<div class="c"><div class="bar"></div></div>
  loader 2<div class="c"><div class="bar"></div></div>
  loader 3<div class="c"><div class="bar"></div></div>
  loader 4<div class="c"><div class="bar"></div></div>
  loader 5<div class="c"><div class="bar"></div></div>
  loader 6<div class="c"><div class="bar"></div></div>
  loader 7<div class="c"><div class="bar"></div></div>
  loader 8<div class="c"><div class="bar"></div></div>
  loader 9<div class="c"><div class="bar"></div></div>
  loader 10<div class="c"><div class="bar"></div></div>
</div>

<button>load</button>

CSS

.c {
  background: #ccc;
  width: 400px;
  height: 20px;
  margin-bottom: 5px;
}

.bar {
  background: green;
  width: 0;
  height: 100%;
}

JavaScript

/*

1. Make a progress bar that runs from 0-100% on click of a button
2. Increment progress at random  between 1-10 every random time (1-100 ms)
3. Alert seconds it took once it reaches 100%
4. Add debounce function so it only fires every 100 ms

5. Make 10 more loaders that all run when you click 'load'
6. Make a master loader that shows the average progress of all 10 loaders

*/

const bar = document.querySelectorAll('.bar');
const button = document.querySelector('button');

console.log(bar)

button.addEventListener('click', () => {
	onClick();
});

let currentProgress = 0;
let startTime;

const debounce = (callback, time = 100) => {
	let timer;
	return (...args) => {
  	clearTimeout(timer);
  	timer = setTimeout(() => callback(...arg), time);
  }
}

const displayProgress = (progress) => {
	bar.style.width = `${progress}%`;
  bar.innerHTML = `${progress}%`;
}

const onClick = () => {
	startTime = new Date().getTime();
 	onLoaderProgress();
}

const onLoaderProgress = () => {
	let randomNumber = Math.random() * 9 + 1;
  let newProgress = Math.min(currentProgress + randomNumber, 100);
  currentProgress = newProgress;
  debounce(displayProgress(newProgress), 100);

 	let randomInterval = Math.floor(Math.random() *100 +1);
 	if (currentProgress < 100) {
  	setTimeout(onLoaderProgress, randomInterval);
  }
	
  if (currentProgress === 100) {
  	onComplete();
  }
}

const onComplete = () => {
  console.log("Loader completed in: " + ((new Date().getTime() - startTime) / 1000) + " seconds");
}