From 9b4f8a3aa699e328be31cc2e6cab3f682568bfee Mon Sep 17 00:00:00 2001 From: "bteicho@gmail.com" Date: Sat, 31 Aug 2024 12:44:43 +0200 Subject: [PATCH 1/3] apiWeek1 --- .../1-catwalk-promises/index.js | 42 ++++++++++++------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..02172dc9 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/Week1/prep-exercises/1-catwalk-promises/index.js @@ -8,19 +8,30 @@ const DANCING_CAT_URL = 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 walkInterval = setInterval(() => { + currentPos += STEP_SIZE_PX; + img.style.left = `${currentPos}px`; + + if (currentPos >= stopPos) { + 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; + resolve(); + }, DANCE_TIME_MS); }); } @@ -30,11 +41,14 @@ function catWalk() { 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 walkAndDance() { + walk(img, startPos, centerPos) + .then(() => dance(img)) + .then(() => walk(img, centerPos, stopPos)) + .then(walkAndDance); + } + + walkAndDance(); } window.addEventListener('load', catWalk); \ No newline at end of file From 7c3929fc61137ee7d75c225bfb97bc6d749a1506 Mon Sep 17 00:00:00 2001 From: "bteicho@gmail.com" Date: Sat, 7 Sep 2024 11:09:32 +0200 Subject: [PATCH 2/3] week-2-prepexercise --- .../1-catwalk-async-await/index.js | 26 ++++++++++++++++- Week2/prep-exercises/2-pokemon-fetch/index.js | 29 ++++++++++++------- 2 files changed, 43 insertions(+), 12 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..b8e16d10 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -9,12 +9,31 @@ const DANCING_CAT_URL = function walk(img, startPos, stopPos) { return new Promise((resolve) => { // Copy over the implementation from last week + let currentPos = startPos; + img.style.left = `${currentPos}px`; + + const walkInterval = setInterval(() => { + currentPos += STEP_SIZE_PX; + img.style.left = `${currentPos}px`; + + if (currentPos >= stopPos) { + 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); }); } @@ -25,6 +44,11 @@ async function catWalk() { 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 +window.addEventListener('load', catWalk); diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.js b/Week2/prep-exercises/2-pokemon-fetch/index.js index f6be006c..c908d154 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 response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + return data; + }catch (error) { + throw new Error (`Error fetching data: ${error.message}`); + } + } function renderResults(pokemons) { @@ -48,14 +54,15 @@ function renderError(err) { function main() { const button = document.querySelector('#button'); - button.addEventListener('click', () => { + button.addEventListener('click', async () => { 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()`. + try { + const pokemons = await fetchJSON(url); + renderResults(pokemons); + }catch (error) { + renderError(error.message); + } }); } From 01e6bbfb29cea803035aadbc463501a614a64c4b Mon Sep 17 00:00:00 2001 From: "bteicho@gmail.com" Date: Sat, 7 Sep 2024 23:24:43 +0200 Subject: [PATCH 3/3] prep-exe-api-week2 --- Week2/prep-exercises/1-catwalk-async-await/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js index b8e16d10..9650fb5b 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -52,3 +52,7 @@ async function catWalk() { } window.addEventListener('load', catWalk); + +function wait(ms){ + return new promise (resolve => setTimeout(resolve, ms)); +} \ No newline at end of file