diff --git a/fetch/index.html b/fetch/index.html
new file mode 100644
index 00000000..6425f6e9
--- /dev/null
+++ b/fetch/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ XKCD Latest Comic
+
+
+
+ Latest XKCD Comic
+
+
+
+
\ No newline at end of file
diff --git a/fetch/script.js b/fetch/script.js
new file mode 100644
index 00000000..6475a69b
--- /dev/null
+++ b/fetch/script.js
@@ -0,0 +1,35 @@
+async function fetchLatestXKCD() {
+ const apiEndpoint = 'https://xkcd.now.sh/?comic=latest';
+
+ try {
+ const response = await fetch(apiEndpoint);
+ if (!response.ok) {
+ throw new Error(`Fetching error! Status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log('Received data:', data);
+
+ if (data.img) {
+ const imgElement = document.createElement('img');
+ imgElement.src = data.img;
+ imgElement.alt = data.alt || 'XKCD Comic';
+
+ const container = document.getElementById('image-container');
+ container.innerHTML = '';
+ container.appendChild(imgElement);
+ } else {
+ console.warn('No "img" property found in the data.');
+ }
+
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ const errorMsg = document.createElement('div');
+ errorMsg.className = 'error';
+ errorMsg.textContent = `Error fetching data: ${error.message}`;
+ document.body.appendChild(errorMsg);
+ }
+ }
+
+ fetchLatestXKCD();
+
diff --git a/fetch/style.css b/fetch/style.css
new file mode 100644
index 00000000..27959358
--- /dev/null
+++ b/fetch/style.css
@@ -0,0 +1,42 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f0f2f5;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100dvh;
+ margin: 0;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+
+ h1 {
+ color: #333;
+ }
+
+ #image-container {
+ margin-top: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ }
+
+ #image-container img {
+ max-width: 300px;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ transition: transform 0.2s, box-shadow 0.2s;
+ }
+
+ #image-container img:hover {
+ transform: scale(1.05);
+ box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+ }
+
+ .error {
+ color: red;
+ font-weight: bold;
+ margin-top: 20px;
+ }
\ No newline at end of file