Exercise 5 solved

codeveloper-ysf · codeveloper-ysf · commit ce0ed8640d1b · 2020-06-01T21:08:48.000+02:00
diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js
@@ -1,13 +1,27 @@
-/**
- 
- ** Exercise 5: The cat walk **
- Starting with an HTML, which has a single img tag of an animated GIF of a cat walking.
+"use strict";
 
- 1. Create a variable to store a reference to the img.
- 2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
- 3. Create a  function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property.
- 4. Call that function every 50 milliseconds.Your cat should now be moving across the screen from left to right.Hurrah!
- 5. When the cat reaches the right - hand of the screen, restart them at the left hand side("0px").So they should keep walking from left to right across the screen, forever and ever.
- 6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing(use this URL: https: //tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk.
- 
-*/
+const firstImg = document.querySelector('img');
+firstImg.style.left = "0px";
+const walkingCat = "http://www.anniemation.com/clip_art/images/cat-walk.gif"
+const dancingCat = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif";
+
+function catWalk() {
+    const currentPosition = parseInt(firstImg.style.left, 10);
+    const centerOfImg = currentPosition + (firstImg.width / 2);
+    if (centerOfImg > (window.innerWidth / 2) - 5 && centerOfImg <= (window.innerWidth / 2) + 5) {
+        firstImg.src = dancingCat;
+        return setTimeout(() => {
+            firstImg.src = walkingCat;
+            firstImg.style.left = `${currentPosition + 10}px`;
+            catWalk();
+        }, 5000);
+    }
+    if (currentPosition + firstImg.width > window.innerWidth) {
+        firstImg.style.left = "0px";
+    } else {
+        firstImg.style.left = `${currentPosition + 10}px`;
+    }
+    setTimeout(catWalk, 50);
+}
+
+catWalk();
