From f5128af2fe208d8ea0848b75c86036d1df69a5c8 Mon Sep 17 00:00:00 2001 From: konjit Date: Fri, 31 Jan 2025 23:02:58 +0100 Subject: [PATCH 1/2] Async/await prep exercise solution --- .vscode/settings.json | 3 ++ .../1-catwalk-promises/index.js | 40 ------------------- .../1-catwalk-async-await/index.js | 30 ++++++++++++-- Week2/prep-exercises/2-pokemon-fetch/index.js | 23 ++++++----- 4 files changed, 43 insertions(+), 53 deletions(-) create mode 100644 .vscode/settings.json delete mode 100644 Week1/prep-exercises/1-catwalk-promises/index.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ 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 deleted file mode 100644 index dc07a9fe..00000000 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ /dev/null @@ -1,40 +0,0 @@ -'use strict'; - -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'; - -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 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. - }); -} - -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. -} - -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..29d1df51 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -8,13 +8,32 @@ 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 step = () => { + let currentCatPos = parseInt(img.style.left||'0px'); + if(currentCatPos < stopPos){ + currentCatPos += STEP_SIZE_PX; + img.style.left = `${currentCatPos}px` + }else{ + clearInterval(catWalking); + resolve(); + } + } + + const catWalking = setInterval(step, STEP_INTERVAL_MS); }); } function dance(img) { return new Promise((resolve) => { - // Copy over the implementation from last week + const savedImg = img.src; + img.src = DANCING_CAT_URL; + setTimeout(()=>{ + img.src = savedImg; + resolve(); + }, DANCE_TIME_MS) + }); } @@ -24,7 +43,12 @@ 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){ + await walk(img, startPos, centerPos); + await dance(img); + await walk(img, centerPos, stopPos); + img.style.left = '0px'; + } } 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..cb6225a8 100644 --- a/Week2/prep-exercises/2-pokemon-fetch/index.js +++ b/Week2/prep-exercises/2-pokemon-fetch/index.js @@ -16,11 +16,11 @@ 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. + const response = await fetch(url); + if (response.ok) { + return response.json(); + } + throw new Error(`HTTP Error ${response.status}: ${response.statusText}`); } function renderResults(pokemons) { @@ -51,11 +51,14 @@ function main() { button.addEventListener('click', () => { 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(data => { + renderResults(data) + }) + .catch(error => { + renderError(error) + }); }); } From 6dfa71bbd73e6bd23aad5de8e3b30215cec06301 Mon Sep 17 00:00:00 2001 From: konjit Date: Fri, 31 Jan 2025 23:10:46 +0100 Subject: [PATCH 2/2] Async/await prep exercise solution --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..722d5e71 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode