diff --git a/debugging/code-reading/readme.md b/challenges/code-reading/readme.md similarity index 100% rename from debugging/code-reading/readme.md rename to challenges/code-reading/readme.md diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..ff262160 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + Programmer Humour + + + + +

Latest XKCD Comic

+ +
+

Loading comic...

+
+ + + + \ 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 00000000..999dbdee --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,44 @@ +function fetchComic() { + const container = document.getElementById("comic-container"); + + fetch("https://xkcd.now.sh/?comic=latest") + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then(data => { + console.log(data); + + // CLEAR OLD CONTENT + container.innerHTML = ""; + + // SAFE ELEMENT CREATION (FIXES XSS) + const title = document.createElement("h2"); + title.textContent = data.title; + + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.alt; + + const desc = document.createElement("p"); + desc.textContent = data.alt; + + container.appendChild(title); + container.appendChild(img); + container.appendChild(desc); + }) + .catch(error => { + container.innerHTML = ""; + + const errorMsg = document.createElement("p"); + errorMsg.textContent = "Error loading comic 😢"; + + container.appendChild(errorMsg); + + console.error(error); + }); +} + +window.addEventListener("load", fetchComic); \ No newline at end of file diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 00000000..6a031a65 --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,11 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f4; +} + +img { + max-width: 100%; + height: auto; + margin-top: 20px; +} \ No newline at end of file