From 5d18b9a412165848124c5f97d0d0be29eced7a21 Mon Sep 17 00:00:00 2001
From: Luca Berton <mr.evolution85@gmail.com>
Date: Wed, 16 May 2018 10:24:13 +0200
Subject: [PATCH] fix: Improving performance

Improving performance in Recalculate Style.
Substitute the selector task from CSS to JS improving Style
Calculation.
---
 lesson5/recalcStyles/index-slow.html | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/lesson5/recalcStyles/index-slow.html b/lesson5/recalcStyles/index-slow.html
index 37160d5..975bf82 100644
--- a/lesson5/recalcStyles/index-slow.html
+++ b/lesson5/recalcStyles/index-slow.html
@@ -28,6 +28,10 @@
       background: #777 !important;
     }
 
+    .box.gray {
+      background: #777 !important;
+    }
+
     button {
       margin: 0 auto;
       padding: 20px;
@@ -65,16 +69,15 @@
       container.appendChild(div);
     }
 
-    function styleSwapper() {
-      console.log("start: " + window.performance.now());
+    button.addEventListener('click', function() {
       document.body.classList.toggle('toggled');
-      // DO NOT REMOVE THIS LINE (or the test will automatically pass)
-      // it forces the browser to wait until the recalc event ends before finishing the function
-      window.getComputedStyle(document.querySelector('div')).backgroundColor;
-      console.log("end: " + window.performance.now());
-    }
 
-    button.addEventListener('click', styleSwapper);
+      var boxes = container.querySelectorAll('.box');
+      for (var i = 1; i < boxes.length; i+= 2) {
+        boxes[i].classList.toggle('gray',
+          document.body.classList.contais('toggled'));
+      }
+    });
 
     </script>
     <script src="recalcStyles-grader.js"></script>