diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..c2860103 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/Week1/prep-exercises/1-catwalk-promises/index.js @@ -6,22 +6,35 @@ const DANCE_TIME_MS = 5000; 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. - }); + + function walk(img, startPos, stopPos) { + return new Promise((resolve) => { + img.style.left = `${startPos}px`; + const WalkInterval = setInterval(() => { + let currentPos = parseInt(img.style.left); + if (currentPos < stopPos) { + img.style.left = `${currentPos + STEP_SIZE_PX}px`; + } else { + clearInterval(WalkInterval); + 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. - }); + const originalSrc = img.src; + img.src = DANCING_CAT_URL; + + setTimeout(() => { + img.src = originalSrc; + img.style.left++; + resolve(); + }, DANCE_TIME_MS); + }) } function catWalk() { @@ -29,12 +42,24 @@ function catWalk() { const startPos = -img.width; const centerPos = (window.innerWidth - img.width) / 2; const stopPos = window.innerWidth; + function startCycle() { + + // if (parseInt(img.style.left) === centerPos) { + // dance(img); + // }; - // 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. -} + // if (parseInt(img.style.left) > centerPos) { + // walk(img, startPos, stopPos) + // }; + + walk(img, startPos, centerPos) + .then(() => dance(img)) + .then(() => walk(img, centerPos, stopPos)) + .then(() => { + startCycle(); + }); + } + startCycle(); +} 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..1f34d2d5 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -8,13 +8,28 @@ const DANCING_CAT_URL = function walk(img, startPos, stopPos) { return new Promise((resolve) => { - // Copy over the implementation from last week + img.style.left = `${startPos}px`; + const WalkInterval = setInterval(() => { + let currentPos = parseInt(img.style.left); + if (currentPos < stopPos) { + img.style.left = `${currentPos + STEP_SIZE_PX}px`; + } else { + clearInterval(WalkInterval); + resolve(); + } + }, STEP_INTERVAL_MS); }); } function dance(img) { return new Promise((resolve) => { - // Copy over the implementation from last week + const originalSrc = img.src; + img.src = DANCING_CAT_URL; + + setTimeout(() => { + img.src = originalSrc; + resolve(); + }, DANCE_TIME_MS); }); } @@ -23,8 +38,14 @@ async function catWalk() { const startPos = -img.width; const centerPos = (window.innerWidth - img.width) / 2; const stopPos = window.innerWidth; + async function startCycle() { + await walk(img, startPos, centerPos); + await dance(img); + await walk(img, centerPos, stopPos); + startCycle(); + } - // Use async/await syntax to loop the walk and dance functions + startCycle(); } window.addEventListener('load', catWalk); \ No newline at end of file diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.js b/Week2/prep-exercises/2-pokemon-fetch/index.js index f6be006c..fe17b6a9 100644 --- a/Week2/prep-exercises/2-pokemon-fetch/index.js +++ b/Week2/prep-exercises/2-pokemon-fetch/index.js @@ -16,11 +16,17 @@ const VALID_URL = 'https://pokeapi.co/api/v2/pokemon/?limit=5'; const INVALID_URL = 'https://pokeapi.co/api/v2/pokemons/?limit=5'; async function fetchJSON(url) { - // TODO - - // Fetch the JSON data from the web API that responds to the `url` parameter - // and return a promise that resolves to a corresponding JavaScript object. - // Make sure to check for HTTP errors. + try { + const data = await fetch(url); + if (data.ok) { + return await data.json(); + } else { + throw new Error(`Invalid URL`); + } + } catch (error) { + console.error(`Oops, something went wrong: ${error.message}`); + throw error; + } } function renderResults(pokemons) { @@ -52,10 +58,13 @@ function main() { const option = document.querySelector('#option'); const url = option.checked ? INVALID_URL : VALID_URL; - // TODO - // Use `fetchJSON()` to fetch data from the selected url. - // If successful, render the data by calling function `renderResults()`. - // On failure, render the error by calling function `renderError()`. + fetchJSON(url) + .then((element) => { + renderResults(element) + }) + .catch((err) => { + renderError(err) + }) }); }