Shake now shakes the entire Wes-a-sketch

astroud · astroud · commit 0a71767f6ef8 · 2020-07-04T16:59:47.000-07:00
diff --git a/33 - Etch-a-Sketch/etch-a-sketch.js b/33 - Etch-a-Sketch/etch-a-sketch.js
@@ -1,14 +1,15 @@
 // Select the elements on the page - canvas, shake button
 const canvas = document.querySelector('#etch-a-sketch');
 const ctx = canvas.getContext('2d');
-const shakebutton = document.querySelector('.shake');
+const shakebutton = document.querySelector('#shake');
 const MOVE_AMOUNT = 10;
 const slider = document.querySelector('.slider');
 const background = document.querySelector('.wes-a-sketch');
 const rainbowButton = document.querySelector('.rainbow');
 let rainbowMode = false;
 const CANVAS_BACKGROUND = '212, 217, 221';
-const DEFAULT_STROKE_COLOR = '#515054'
+const DEFAULT_STROKE_COLOR = '#515054';
+const knobs = document.querySelectorAll('.knob');
 
 // Setup our canvas for drawing
 // Make variables called height and width from the same properties on our canavas
@@ -126,6 +127,10 @@ function handleKey(e) {
 function clearCanvas() {
   canvas.classList.add('shake');
   background.classList.add('shake');
+  shakebutton.classList.add('shake');
+  rainbowButton.classList.add('shake');
+  slider.classList.add('shake');
+  knobs.forEach(knob => knob.classList.add('shake'));
   
   // Gradually shake away the drawing. Takes 3-4 shakes.
   ctx.fillStyle = `rgba(${CANVAS_BACKGROUND}, 0.8)`
@@ -139,6 +144,10 @@ function clearCanvas() {
     function() {
       canvas.classList.remove('shake');
       background.classList.remove('shake');
+      shakebutton.classList.remove('shake');
+      rainbowButton.classList.remove('shake');
+      slider.classList.remove('shake');
+      knobs.forEach(knob => knob.classList.remove('shake'));
     },
     { once: true }
   );
diff --git a/33 - Etch-a-Sketch/index.html b/33 - Etch-a-Sketch/index.html
@@ -20,7 +20,7 @@ <h1>Magic <strong>Wes-a-Sketch</strong> Screen</h1>
       <div class="knob left-knob"></div>
       <div class="buttons">
         <input type="range" min="1" max="100" value="10" class="slider">
-        <button class="shake">Shake!</button>
+        <button id="shake">Shake!</button>
         <button class="rainbow">🌈</button>
       </div>
       <div class="knob right-knob"></div>
@@ -84,7 +84,10 @@ <h1>Magic <strong>Wes-a-Sketch</strong> Screen</h1>
     }
 
     canvas.shake,
-    div.wes-a-sketch.shake {
+    div.wes-a-sketch.shake,
+    div.knob.shake,
+    input.shake,
+    button.shake {
       animation: shake 0.5s linear 1;
     }
 
