diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..63c4eb13 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + + XKCD Comic + + + +
+

Here is the latest comic

+
+

Please wait

+
+ + + + diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..c8f6fff1 --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,30 @@ +async function fetchLatestComic() { + const endpoint = "https://xkcd.now.sh/?comic=latest"; + const forImg = document.getElementById("forImg"); + const message = document.querySelector(".message"); + + try { + const response = await fetch(endpoint); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); + console.log(data); + + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.alt; + + forImg.appendChild(img); + + message.textContent = ""; + } catch (error) { + console.error("Error fetching the comic:", error); + + message.textContent = ":( Please try again later."; + } +} + +fetchLatestComic(); diff --git a/fetch/programmer-humour/styles.css b/fetch/programmer-humour/styles.css new file mode 100644 index 00000000..7646410b --- /dev/null +++ b/fetch/programmer-humour/styles.css @@ -0,0 +1,26 @@ +html { + background-color: rgb(252, 254, 211); +} + +.comicDiv { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 4px; + border: 1px solid grey; + padding: 1rem; + background-color: whitesmoke; + margin: 0 auto; +} + +img { + max-width: 100%; + height: auto; +} + +.message { + text-align: center; + margin-top: 10px; + font-size: 1.2rem; +} diff --git a/package-lock.json b/package-lock.json index 52884e65..fe490948 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "ISC", "devDependencies": { "jest": "^29.5.0", - "prettier": "^2.8.7" + "prettier": "^2.8.8" } }, "node_modules/@ampproject/remapping": { @@ -2921,10 +2921,11 @@ } }, "node_modules/prettier": { - "version": "2.8.7", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", - "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin-prettier.js" }, @@ -5673,9 +5674,9 @@ } }, "prettier": { - "version": "2.8.7", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", - "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true }, "pretty-format": { diff --git a/package.json b/package.json index 159d018d..5e685675 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,6 @@ "homepage": "https://github.com/CodeYourFuture/Module-JS3#readme", "devDependencies": { "jest": "^29.5.0", - "prettier": "^2.8.7" + "prettier": "^2.8.8" } }