CodeYourFuture · fhkahin · Feb 14, 2024 · Feb 14, 2024 · Feb 14, 2024 · Feb 14, 2024
diff --git a/array-destructuring/exercise-1/exercise.js b/array-destructuring/exercise-1/exercise.js
@@ -4,10 +4,8 @@ const personOne = {
   favouriteFood: "Spinach",
 };
 
-function introduceYourself(___________________________) {
+function introduceYourself({ name, age, favouriteFood }) {
   console.log(
     `Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
   );
 }
-
-introduceYourself(personOne);
diff --git a/array-destructuring/exercise-2/exercise.js b/array-destructuring/exercise-2/exercise.js
@@ -70,3 +70,20 @@ let hogwarts = [
     occupation: "Teacher",
   },
 ];
+
+
+// Task 1
+console.log("Task 1:");
+hogwarts.forEach(({ firstName, lastName, house }) => {
+  if (house === "Gryffindor") {
+    console.log(`${firstName} ${lastName}`);
+  }
+});
+
+// Task 2
+console.log("\nTask 2:");
+hogwarts.forEach(({ firstName, lastName, occupation, pet }) => {
+  if (occupation === "Teacher" && pet) {
+    console.log(`${firstName} ${lastName}`);
+  }
+});
diff --git a/array-destructuring/exercise-3/exercise.js b/array-destructuring/exercise-3/exercise.js
@@ -6,3 +6,14 @@ let order = [
   { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.0 },
   { itemName: "Hash Brown", quantity: 4, unitPrice: 0.4 },
 ];
+
+console.log("QUANTITY  ITEM  TOTAL"); 
+let totalCost = 0;
+
+order.forEach(({ itemName, quantity, unitPrice }) => {
+  let totalItemPrice = quantity * unitPrice;
+  totalCost += totalItemPrice;
+  console.log(`${quantity}\t${itemName.padEnd(20)}${totalItemPrice.toFixed(2)}`);
+});
+
+console.log(`\nTotal: ${totalCost.toFixed(2)}`);
diff --git a/programmer-humour/index.html b/programmer-humour/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>XKCD Comic Viewer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div id="root">
+    <h1 id="title"></h1>
+    <div id="comic-container">
+        <img id="comic-img" alt="XKCD Comic">
+    </div>
+    <p id="date"></p>
+    <p id="comic-number"></p>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/programmer-humour/script.js b/programmer-humour/script.js
@@ -0,0 +1,33 @@
+const titleElement = document.getElementById("title");
+const comicImageElement = document.getElementById("comic-img");
+const dateElement = document.getElementById("date");
+const comicNumberElement = document.getElementById("comic-number");
+
+// Function to fetch and display XKCD comic
+function fetchXKCDComic() {
+    fetch("https://xkcd.now.sh/?comic=latest")
+        .then(response => response.json())
+        .then(data => {
+            // Logging the data to the console
+            console.log(data);
+
+            // Setting the comic title
+            titleElement.textContent = data.title;
+
+            // Setting the comic image source
+            comicImageElement.src = data.img;
+
+            // Setting the comic publication date
+            dateElement.textContent = `Published on ${data.month}/${data.day}`;
+
+            // Setting the comic number
+            comicNumberElement.textContent = `Comic Number: ${data.num}`;
+        })
+        .catch(error => {
+            console.error("Error fetching XKCD comic:", error);
+            titleElement.textContent = "Error fetching comic";
+        });
+}
+
+// Calling the function to fetch and display XKCD comic
+fetchXKCDComic();
diff --git a/programmer-humour/style.css b/programmer-humour/style.css
@@ -0,0 +1,36 @@
+body {
+    font-family: 'Comic Sans MS', sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+#root {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+    color: #ff5722;
+}
+
+#comic-container {
+    margin-top: 20px;
+}
+
+#comic-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+#date, #comic-number {
+    color: #666;
+    margin-top: 10px;
+}