diff --git a/Week1/.vscode/launch.json b/Week1/.vscode/launch.json new file mode 100644 index 00000000..30124e33 --- /dev/null +++ b/Week1/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}\\prep-exercises\\1-catwalk-promises\\index.js" + } + ] +} \ No newline at end of file diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..8eedda4a 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/Week1/prep-exercises/1-catwalk-promises/index.js @@ -5,9 +5,28 @@ const STEP_INTERVAL_MS = 50; const DANCE_TIME_MS = 5000; const DANCING_CAT_URL = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; +const WALKING_CAT_URL = "http://www.anniemation.com/clip_art/images/cat-walk.gif"; + function walk(img, startPos, stopPos) { return new Promise((resolve) => { + let interval; + + let catPos = startPos ; + interval = setInterval(()=>{ + catPos += STEP_SIZE_PX; + img.style.left =catPos + 'px'; + if(catPos >= stopPos){ + + clearInterval(interval); + resolve(catPos); + + } + + },STEP_INTERVAL_MS); + + // setInterval(walk(img, startPos, stopPos),STEP_INTERVAL_MS); + // Resolve this promise when the cat (`img`) has walked from `startPos` to // `stopPos`. // Make good use of the `STEP_INTERVAL_PX` and `STEP_INTERVAL_MS` @@ -17,6 +36,12 @@ function walk(img, startPos, stopPos) { function dance(img) { return new Promise((resolve) => { + img.src = DANCING_CAT_URL; + setTimeout(()=>{ + img.src = WALKING_CAT_URL; + resolve(); + }, DANCE_TIME_MS ); + // Switch the `.src` of the `img` from the walking cat to the dancing cat // and, after a timeout, reset the `img` back to the walking cat. Then // resolve the promise. @@ -24,17 +49,36 @@ function dance(img) { }); } + + function catWalk() { const img = document.querySelector('img'); const startPos = -img.width; const centerPos = (window.innerWidth - img.width) / 2; const stopPos = window.innerWidth; + img.style.left = startPos +'px'; + + + +walk(img,startPos,centerPos).then((result) => { + dance(img).then(()=> { + walk(img,result,stopPos).then(()=> { + catWalk(); + } ); + }); + } + +) + // Use the `walk()` and `dance()` functions to let the cat do the following: // 1. Walk from `startPos` to `centerPos`. // 2. Then dance for 5 secs. // 3. Then walk from `centerPos` to `stopPos`. // 4. Repeat the first three steps indefinitely. + + + } window.addEventListener('load', catWalk); \ No newline at end of file