From e90437ee1d836a1d081becf1eada2fd501e7c6ed Mon Sep 17 00:00:00 2001 From: EsenKaratas Date: Sat, 2 Nov 2024 22:43:53 +0100 Subject: [PATCH 1/2] add looping cat walk and dance animation --- .../1-catwalk-promises/index.js | 50 +++++++++++++------ 1 file changed, 34 insertions(+), 16 deletions(-) diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..58713500 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/Week1/prep-exercises/1-catwalk-promises/index.js @@ -3,38 +3,56 @@ const STEP_SIZE_PX = 10; 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'; +const DANCING_CAT_URL = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.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`; + img.src = WALKING_CAT_URL; + + 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'); + if (!img) { + return; + } + 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. + + function performCatWalk() { + walk(img, startPos, centerPos) + .then(() => dance(img)) + .then(() => walk(img, centerPos, stopPos)) + .then(() => performCatWalk()); + } + + performCatWalk(); } -window.addEventListener('load', catWalk); \ No newline at end of file +window.addEventListener('load', catWalk); From c53e51ab19af6d0c2fd689a742c0dbab5a6f03b3 Mon Sep 17 00:00:00 2001 From: EsenKaratas Date: Sat, 9 Nov 2024 22:02:23 +0100 Subject: [PATCH 2/2] add cat walking and dancing animation --- .../1-catwalk-async-await/index.js | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js index 9fd9f774..51298c01 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -3,18 +3,36 @@ const STEP_INTERVAL_MS = 50; const STEP_SIZE_PX = 10; const DANCE_TIME_MS = 5000; +const WALKING_CAT_URL = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; const DANCING_CAT_URL = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; + function walk(img, startPos, stopPos) { return new Promise((resolve) => { - // Copy over the implementation from last week + let currentPos = startPos; + img.style.left = `${currentPos}px`; + img.src = WALKING_CAT_URL; + + 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); }); } @@ -23,8 +41,11 @@ async function catWalk() { const startPos = -img.width; const centerPos = (window.innerWidth - img.width) / 2; const stopPos = window.innerWidth; - - // Use async/await syntax to loop the walk and dance functions + + while (true) { + await walk(img, startPos, centerPos); + await dance(img); + await walk(img, centerPos, stopPos); + } } - window.addEventListener('load', catWalk); \ No newline at end of file