Refactoring unordered-load.js

Author: edysegura

js/unordered-load.js

@@ -2,29 +2,36 @@
 
 const pokemonsNumber = Array
   .from(Array(251).keys())
-  .map(number => String(number + 1)
-  .padStart(3, '0'))
+  .map(number => String(number + 1).padStart(3, '0'))
 
-let loaded = 0
-const total = pokemonsNumber.length
-const progressBar = document.querySelector('progress')
-const progressPercentage = document.querySelector('span')
+function progressBarScope() {
+  const progressBar = document.querySelector('progress')
+  const progressPercentage = document.querySelector('span')
+  const total = pokemonsNumber.length
+  let loaded = 0
 
-function updateProgressbar() {
-  let percentage = 0
-  ++loaded
-  percentage = Math.floor((loaded * 100) / total)
-  progressBar.value = percentage
-  progressPercentage.textContent = percentage + '%'
+  return () => {
+    ++loaded
+    let percentage = Math.floor((loaded * 100) / total)
+    progressBar.value = percentage
+    progressPercentage.textContent = percentage + '%'
+  }
+}
+const updateProgressBar = progressBarScope()
+
+function onError(pokemonNumber) {
+  return () => {
+    console.error('Pokemon failed ' + pokemonNumber)
+    loadInOrder()
+  }
 }
 
 function createImageElement(pokemonNumber) {
-  const img = new Image()
-  img.src = `images/pokemons/${pokemonNumber}.png`
-  img.addEventListener('load', updateProgressbar)
-  img.addEventListener('load', () => console.log('Pokemon Loaded ' + pokemonNumber))
-  img.addEventListener('error', () => console.log('Pokemon failed ' + pokemonNumber))
-  document.body.appendChild(img)
+  const image = new Image()
+  image.src = `images/pokemons/${pokemonNumber}.png`
+  image.addEventListener('load', updateProgressBar)
+  image.addEventListener('error', onError(pokemonNumber))
+  document.body.appendChild(image)
 }
 
-pokemonsNumber.forEach(createImageElement)
+pokemonsNumber.forEach(createImageElement)