diff --git a/array-destructuring/exercise-1/exercise.js b/array-destructuring/exercise-1/exercise.js index a6eab299..6ebaae44 100644 --- 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 index e11b75eb..47c6453a 100644 --- 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 index 0a01f8f0..c51576d9 100644 --- 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 new file mode 100644 index 00000000..14990ee8 --- /dev/null +++ b/programmer-humour/index.html @@ -0,0 +1,23 @@ + + + + + + + XKCD Comic Viewer + + + + +
+

+
+ XKCD Comic +
+

+

+
+ + + + diff --git a/programmer-humour/script.js b/programmer-humour/script.js new file mode 100644 index 00000000..4cb26d5f --- /dev/null +++ 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 new file mode 100644 index 00000000..ffae3853 --- /dev/null +++ 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; +}