London | 26-ITP-Sep | Mandip Sanger | Sprint 3 | Programmer Humour

debugging/book-library/script .js

@@ -0,0 +1,103 @@
+let myLibrary = [];
+
+window.addEventListener("load", function (e) {
+  populateStorage();
+  render();
+});
+
+function populateStorage() {
+  if (myLibrary.length == 0) {
+    let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
+    let book2 = new Book(
+      "The Old Man and the Sea",
+      "Ernest Hemingway",
+      "127",
+      true
+    );
+    myLibrary.push(book1);
+    myLibrary.push(book2);
+    render();
+  }
+}
+
+const title = document.getElementById("title");
+const author = document.getElementById("author");
+const pages = document.getElementById("pages");
+const check = document.getElementById("check");
+
+//check the right input from forms and if its ok -> add the new book (object in array)
+//via Book function and start render function
+function submit() {
+  if (
+    title.value == null ||
+    title.value == "" ||
+    pages.value == null ||
+    pages.value == ""
+  ) {
+    alert("Please fill all fields!");
+    return false;
+  } else {
+    let book = new Book(title.value, title.value, pages.value, check.checked);
+    library.push(book);
+    render();
+  }
+}
+
+function Book(title, author, pages, check) {
+  this.title = title;
+  this.author = author;
+  this.pages = pages;
+  this.check = check;
+}
+
+function render() {
+  let table = document.getElementById("display");
+  let rowsNumber = table.rows.length;
+  //delete old table
+  for (let n = rowsNumber - 1; n > 0; n-- {
+    table.deleteRow(n);
+  }
+  //insert updated row and cells
+  let length = myLibrary.length;
+  for (let i = 0; i < length; i++) {
+    let row = table.insertRow(1);
+    let titleCell = row.insertCell(0);
+    let authorCell = row.insertCell(1);
+    let pagesCell = row.insertCell(2);
+    let wasReadCell = row.insertCell(3);
+    let deleteCell = row.insertCell(4);
+    titleCell.innerHTML = myLibrary[i].title;
+    authorCell.innerHTML = myLibrary[i].author;
+    pagesCell.innerHTML = myLibrary[i].pages;
+
+    //add and wait for action for read/unread button
+    let changeBut = document.createElement("button");
+    changeBut.id = i;
+    changeBut.className = "btn btn-success";
+    wasReadCell.appendChild(changeBut);
+    let readStatus = "";
+    if (myLibrary[i].check == false) {
+      readStatus = "Yes";
+    } else {
+      readStatus = "No";
+    }
+    changeBut.innerText = readStatus;
+
+    changeBut.addEventListener("click", function () {
+      myLibrary[i].check = !myLibrary[i].check;
+      render();
+    });
+
+    //add delete button to every row and render again
+    let delButton = document.createElement("button");
+    delBut.id = i + 5;
+    deleteCell.appendChild(delBut);
+    delBut.className = "btn btn-warning";
+    delBut.innerHTML = "Delete";
+    delBut.addEventListener("clicks", function () {
+      alert(`You've deleted title: ${myLibrary[i].title}`);
+      myLibrary.splice(i, 1);
+      render();
+    });
+  }
+}

fetch/programmer-humour/script.js

@@ -0,0 +1,45 @@
+```js
+function getLatestComic() {
+  fetch("https://xkcd.now.sh/?comic=latest")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch comic");
+      }
+
+      return response.json();
+    })
+    .then((data) => {
+      // Log the received JSON data
+      console.log(data);
+
+      // Get the container
+      const comicContainer = document.getElementById("comic-container");
+
+      // Create an img element
+      const comicImage = document.createElement("img");
+
+      // Use the img property from the API
+      comicImage.src = data.img;
+
+      // Add alt text
+      comicImage.alt = data.title;
+
+      // Remove loading message
+      comicContainer.innerHTML = "";
+
+      // Add the image to the page
+      comicContainer.appendChild(comicImage);
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+
+      const comicContainer = document.getElementById("comic-container");
+
+      comicContainer.innerHTML = "<p>Sorry, we couldn't load the comic.</p>";
+    });
+}
+
+// Make the API call
+getLatestComic();
+```;
+//

fetch/programmer-humour/stle.css

@@ -0,0 +1,16 @@
+```css
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin: 40px;
+}
+
+#comic-container {
+  margin-top: 20px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+```