diff --git a/.test-summary/TEST_SUMMARY.md b/.test-summary/TEST_SUMMARY.md new file mode 100644 index 000000000..a5f0d5725 --- /dev/null +++ b/.test-summary/TEST_SUMMARY.md @@ -0,0 +1,14 @@ +## Test Summary + +**Mentors**: For more information on how to review homework assignments, please refer to the [Review Guide](https://github.com/HackYourFuture/mentors/blob/main/assignment-support/review-guide.md). + +### 3-UsingAPIs - Week2 + +| Exercise | Passed | Failed | ESLint | +|-------------------|--------|--------|--------| +| ex1-programmerFun | 5 | - | ✓ | +| ex2-pokemonApp | 5 | - | ✓ | +| ex3-rollAnAce | 7 | - | ✓ | +| ex4-diceRace | 7 | - | ✓ | +| ex5-vscDebug | - | - | ✓ | +| ex6-browserDebug | - | - | ✓ | diff --git a/.vscode/settings.json b/.vscode/settings.json index f7d6e29e1..a455d2bb5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -16,5 +16,6 @@ "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true, "editor.guides.highlightActiveIndentation": true, - "editor.guides.bracketPairsHorizontal": "active" + "editor.guides.bracketPairsHorizontal": "active", + "liveServer.settings.port": 5501 } diff --git a/3-UsingAPIs/Week2/assignment/ex1-programmerFun/index.js b/3-UsingAPIs/Week2/assignment/ex1-programmerFun/index.js index a99ca177b..02afd8d37 100644 --- a/3-UsingAPIs/Week2/assignment/ex1-programmerFun/index.js +++ b/3-UsingAPIs/Week2/assignment/ex1-programmerFun/index.js @@ -1,44 +1,36 @@ -/*------------------------------------------------------------------------------ -Full description at: https://github.com/HackYourFuture/Assignments/blob/main/3-UsingAPIs/Week2/README.md#exercise-1-programmer-fun - -1. Complete the function `requestData()` using `fetch()` to make a request to - the url passed to it as an argument. The function should return a promise. - Make sure that the promise is rejected in case of HTTP or network errors. -2. Notice that the function `main()` calls `requestData()`, passing it the url - `https://xkcd.now.sh/?comic=latest`. Try and run the code in the browser and - open the browser's console to inspect the data returned from the request. -3. Next, complete the function `renderImage()` to render an image as an `` - element appended to the document's body, using the data returned from the API. -4. Complete the function `renderError()` to render any errors as an `

` - element appended to the document's body. -5. Refactor the `main()` function to use `async/await`. -6. Test error handling, for instance, by temporarily changing the `.sh` in the - url with `.shx`. There is no server at the modified url, therefore this - should result in a network (DNS) error. -------------------------------------------------------------------------------*/ function requestData(url) { - // TODO return a promise using `fetch()` + return fetch(url) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + return response.json(); + }); } function renderImage(data) { - // TODO render the image to the DOM - console.log(data); + const img = document.createElement('img'); + img.src = data.img; + img.alt = data.alt; + img.title = data.title; + img.style.maxWidth = '100%'; + document.body.appendChild(img); } function renderError(error) { - // TODO render the error to the DOM - console.log(error); + const errorElement = document.createElement('h1'); + errorElement.textContent = `Error: ${error.message}`; + errorElement.style.color = 'red'; + document.body.appendChild(errorElement); } -// TODO refactor with async/await and try/catch -function main() { - requestData('https://xkcd.now.sh/?comic=latest') - .then((data) => { - renderImage(data); - }) - .catch((error) => { - renderError(error); - }); +async function main() { + try { + const data = await requestData('https://xkcd.now.sh/?comic=latest'); + renderImage(data); + } catch (error) { + renderError(error); + } } window.addEventListener('load', main); diff --git a/3-UsingAPIs/Week2/assignment/ex2-pokemonApp/index.js b/3-UsingAPIs/Week2/assignment/ex2-pokemonApp/index.js index 262113997..88a1b108b 100644 --- a/3-UsingAPIs/Week2/assignment/ex2-pokemonApp/index.js +++ b/3-UsingAPIs/Week2/assignment/ex2-pokemonApp/index.js @@ -1,38 +1,61 @@ -/*------------------------------------------------------------------------------ -Full description at: https://github.com/HackYourFuture/Assignments/blob/main/3-UsingAPIs/Week2/README.md#exercise-2-gotta-catch-em-all - -Complete the four functions provided in the starter `index.js` file: - -`fetchData`: In the `fetchData` function, make use of `fetch` and its Promise - syntax in order to get the data from the public API. Errors (HTTP or network - errors) should be logged to the console. - -`fetchAndPopulatePokemons`: Use `fetchData()` to load the pokemon data from the - public API and populate the `