diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d3..81408aac7 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -100,4 +100,4 @@ function render() { render(); }); } -} +} \ No newline at end of file diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..724444c54 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,45 @@ +```js +function getLatestComic() { + fetch("https://xkcd.now.sh/?comic=latest") + .then((response) => { + if (!response.ok) { + throw new Error("Failed to fetch comic"); + } + + return response.json(); + }) + .then((data) => { + // Log the received JSON data + console.log(data); + + // Get the container + const comicContainer = document.getElementById("comic-container"); + + // Create an img element + const comicImage = document.createElement("img"); + + // Use the img property from the API + comicImage.src = data.img; + + // Add alt text + comicImage.alt = data.title; + + // Remove loading message + comicContainer.innerHTML = ""; + + // Add the image to the page + comicContainer.appendChild(comicImage); + }) + .catch((error) => { + console.error("Error:", error); + + const comicContainer = document.getElementById("comic-container"); + + comicContainer.innerHTML = "
Sorry, we couldn't load the comic.
"; + }); +} + +// Make the API call +getLatestComic(); +```; +// diff --git a/fetch/programmer-humour/stle.css b/fetch/programmer-humour/stle.css new file mode 100644 index 000000000..c827fbfa0 --- /dev/null +++ b/fetch/programmer-humour/stle.css @@ -0,0 +1,16 @@ +```css +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 40px; +} + +#comic-container { + margin-top: 20px; +} + +img { + max-width: 100%; + height: auto; +} +```