diff --git a/debugging/book-library/script .js b/debugging/book-library/script .js new file mode 100644 index 000000000..75ce6c1d3 --- /dev/null +++ b/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(); + }); + } +} diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 000000000..724444c54 --- /dev/null +++ b/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 = "

Sorry, we couldn't load the comic.

"; + }); +} + +// Make the API call +getLatestComic(); +```; +// diff --git a/fetch/programmer-humour/stle.css b/fetch/programmer-humour/stle.css new file mode 100644 index 000000000..c827fbfa0 --- /dev/null +++ b/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; +} +```