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

Who knew programmers could be funny?

+
+
+ +
+ + \ 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..93dac5ff --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,25 @@ +const container = document.getElementById('container'); +const img = document.createElement('img'); + +container.appendChild(img); +img.style.width = '100%'; +img.style.height = 'auto'; + +function fetchImage() { + fetch('https://xkcd.vercel.app/?comic=latest') // or the ridvanaltun endpoint + .then(r => { + if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`); + return r.json(); + }) + .then(data => { + console.log('XKCD data:', data); // logs the JSON + img.src = data.img || data.imageUrl || data.image; + img.alt = data.alt || data.title || 'XKCD comic'; + }) + .catch(err => { + console.error('Error fetching image:', err); + container.textContent = 'Could not load the comic.'; + }); + } + +fetchImage(); diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 00000000..60390619 --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,28 @@ +body { + font-family: sans-serif; + margin: 0; + padding: 1rem; + background: #fafafa; + color: #333; + } + + header { + text-align: center; + margin-bottom: 1.5rem; + } + + .content { + max-width: 800px; + margin: 0 auto; + } + + img { + display: block; + max-width: 100%; + height: auto; + border: 1px solid #ddd; + background: white; + padding: 0.5rem; + box-shadow: 0 2px 6px rgba(0,0,0,0.08); + } + \ No newline at end of file