diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..8871fb79 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/Week1/prep-exercises/1-catwalk-promises/index.js @@ -5,36 +5,55 @@ 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) => { - // 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` - // constants. + let currentPos = startPos; + img.style.left = currentPos + 'px'; + + const intervalId = setInterval(() => { + currentPos += STEP_SIZE_PX; + img.style.left = currentPos + 'px'; + + if (currentPos >= stopPos) { + clearInterval(intervalId); + resolve(); + } + }, STEP_INTERVAL_MS); }); } function dance(img) { return new Promise((resolve) => { - // 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. - // Make good use of the `DANCING_CAT_URL` and `DANCE_TIME_MS` constants. + img.src = DANCING_CAT_URL; + + setTimeout(() => { + img.src = WALKING_CAT_URL; + resolve(); + }, DANCE_TIME_MS); }); } function catWalk() { const img = document.querySelector('img'); - const startPos = -img.width; - const centerPos = (window.innerWidth - img.width) / 2; - const stopPos = window.innerWidth; - - // 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. + + const loop = async () => { + const startPos = -img.width; + const centerPos = (window.innerWidth - img.width) / 2; + const stopPos = window.innerWidth; + + img.style.left = startPos + 'px'; + + await walk(img, startPos, centerPos); + await dance(img); + await walk(img, centerPos, stopPos); + + loop(); + }; + + loop(); } window.addEventListener('load', catWalk); \ No newline at end of file diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js index 9fd9f774..73e78c12 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -5,16 +5,34 @@ const STEP_SIZE_PX = 10; 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) => { - // Copy over the implementation from last week - }); -} + function walk(img, startPos, stopPos) { + return new Promise((resolve) => { + let currentPos = startPos; + img.style.left = currentPos + 'px'; + + const intervalId = setInterval(() => { + currentPos += STEP_SIZE_PX; + img.style.left = currentPos + 'px'; + + if (currentPos >= stopPos) { + clearInterval(intervalId); + resolve(); + } + }, STEP_INTERVAL_MS); + }); + } function dance(img) { return new Promise((resolve) => { - // Copy over the implementation from last week + img.src = DANCING_CAT_URL; + + setTimeout(() => { + img.src = WALKING_CAT_URL; + resolve(); + }, DANCE_TIME_MS); }); } @@ -24,7 +42,14 @@ async function catWalk() { const centerPos = (window.innerWidth - img.width) / 2; const stopPos = window.innerWidth; - // Use async/await syntax to loop the walk and dance functions + while (true) { + img.style.left = startPos + 'px'; + + await walk(img, startPos, centerPos); + await dance(img); + img.src = WALKING_CAT_URL; + await walk(img, centerPos, stopPos); + } } window.addEventListener('load', catWalk); \ No newline at end of file