const background = document.querySelector('.bg');
const loadingText = document.querySelector('.loading-text');

//used for the text=0%
let load = 0;

//repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
let int = setInterval(blurring, 10);

function blurring() {
  //increase text num with each iteration
  load++;
  // When 100
  if (load > 99) {
    //Cancels a timed, repeating action which was previously established by a call to setInterval().
    clearInterval(int);
  }
  loadingText.innerText = `${load}%`;
  //Map a range of numbers to another range of numbers e.g text 0 --> 100% and opacity  1 --> 0
  loadingText.style.opacity = scale(load, 0, 100, 1, 0);
  //Map a range of numbers to another range of numbers e.g text 0 --> 100 and filter: blur(10px --> 0)
  background.style.filter = `blur(${scale(load, 0, 100, 10, 0)}px)`;
}

function scale(number, inMin, inMax, outMin, outMax) {
  return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}