I have to be honest, this 50 Projects in 50 Days project took me a minute or two to figure out how it worked under the hood. No fault to the instructor - the course is very clear that it's a project-building exercise, and not a totally beginner-friendly walkthrough.
There are two main things that happen with this page - a counter goes from 0 to 100% while fading out, and a background image comes into focus from a blurred start. Synchronizing the two is the challenge.
Before I get to that, though, there were a couple of things in the JS for this project that were new to me. The first, which I was familiar with from my Intro to Web Development class but hadn't actually used before, was template literals. In this project, a literal was used to append the percent sign onto the end of the loading innerText property:
loadText.innerText = `${load}%`;
This is cleaner than the method that I most likely would have used of manually concatenating the '%' sign onto the string.
The second new-to-me concept was the window.setInterval method. Put simply, it repeats a function during a specified time interval. There are examples and more details at W3 Schools.
Now for the synchronicity. Again, the two main moving parts to this project are the background image which comes into focus and the percentage counter which counts up to 100% while fading out.
The whole thing hinges on one variable called 'load' which is initialized to zero. It increments inside a function that's called by the aforementioned setInterval method, and that function includes a single if statement to stop the process once 'load' equals 100.
Along the way, there's a function taken from this thread at StackOverflow which, in what I'm certain is an overly simplistic explanation, causes the background focus and the text fade to occur at the same rate as the incrementation of the percentage text.
For instance, the blur on the background transitions from 30px to 0px. The opacity on the loading text fades from 1 to 0. In order to make those transitions occur at the same rate as the 0-100% loading text, the current value of 'load' is passed to the StackOverflow scale() function:
// The following scale() function is from
// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
and the result passed back as the value for the focus and the opacity.
Taken together there's actually quite a bit going on in just about 20 lines of JS.