diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..1c3b9f13 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -31,7 +31,7 @@

Library

Library /> 0; n-- { + for (let n = rowsNumber - 1; n > 0; n--) { + // Added a parenthesis table.deleteRow(n); } //insert updated row and cells @@ -72,11 +83,12 @@ function render() { //add and wait for action for read/unread button let changeBut = document.createElement("button"); - changeBut.id = i; + changeBut.id = i; // Added quotes and then removed them as I understood the logic changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check === true) { + // Added a = and changed false to true readStatus = "Yes"; } else { readStatus = "No"; @@ -90,11 +102,12 @@ function 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 () { + delButton.id = i + 5; // changed to delButton from delBut + deleteCell.appendChild(delButton); // changed to delButton from delBut + delButton.className = "btn btn-warning"; // changed to delButton from delBut + delButton.innerHTML = "Delete"; // changed to delButton from delBut + delButton.addEventListener("click", function () { + // changed to delButton from delBut and click from clicks alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); diff --git a/numberfacts/index.html b/numberfacts/index.html new file mode 100644 index 00000000..4c5064d2 --- /dev/null +++ b/numberfacts/index.html @@ -0,0 +1,29 @@ + + + + + + + + Document + + +
+
+
+
+

Number facts

+

Enter a number and get a random fact

+ +
+

Number fact

+

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/numberfacts/script.js b/numberfacts/script.js new file mode 100644 index 00000000..eb4fd811 --- /dev/null +++ b/numberfacts/script.js @@ -0,0 +1,33 @@ +let fact = document.getElementById("fact"); +let factText = document.getElementById("factText"); +let numberInput = document.getElementById("numberInput"); + +numberInput.addEventListener("input", getFactFetch); + +function getFactAjax() { + let number = numberInput.value; + let xhr = new XMLHttpRequest(); + xhr.open("GET", "http://numbersapi.com/"+number); + xhr.onload = function() { + if (this.status == 200 && number != ""){ + fact.style.display = "block" + factText.innerText = this.responseText; + } + + } + xhr.send(); +} + +function getFactFetch() { + let number = numberInput.value; + + fetch("http://numbersapi.com/"+number).then(response => response.text()).then(data => { + if (number != "") { + fact.style.display = "block" + factText.innerText = data; + } + + }) + .catch(error => console.log(error)); + +} \ No newline at end of file diff --git a/numberfacts/style.css b/numberfacts/style.css new file mode 100644 index 00000000..e69de29b diff --git a/preparation/index.html b/preparation/index.html new file mode 100644 index 00000000..eda2faa5 --- /dev/null +++ b/preparation/index.html @@ -0,0 +1,23 @@ + + + + + + + + Document + + + +
+ + + + diff --git a/preparation/script.js b/preparation/script.js new file mode 100644 index 00000000..542c6694 --- /dev/null +++ b/preparation/script.js @@ -0,0 +1,55 @@ +const state = { + films: [ + { + title: "Killing of Flower Moon", + director: "Martin Scorsese", + times: ["15:35"], + certificate: "15", + duration: 112, + }, + { + title: "Typist Artist Pirate King", + director: "Carol Morley", + times: ["15:00", "20:00"], + certificate: "12A", + duration: 108, + } +], +searchTerm: "", +}; + +// Goal refactor this project to use film card template +function createFilmCard(films) { + const filmCard = document.getElementById("film-card-template").content.cloneNode(true); + + filmCard.querySelector("h1").textContent = films.title; + filmCard.querySelector("p[data-director]").textContent = films.director; + filmCard.querySelector("time").textContent = films.times; + filmCard.querySelector("p[data-certificate]").textContent = films.certificate; + return filmCard; +}; + +function render() { + const container = document.getElementById("film-container"); // Calls a container created in html + container.textContent = ""; // Clears the container + + const filteredFilms = state.films.filter((film) => + film.title.includes(state.searchTerm) +); + const filmCards = filteredFilms.map(createFilmCard); + container.append(...filmCards); +}; + +const searchBox = document.getElementById("search"); + +searchBox.addEventListener("input", handleSearchInput); + +function handleSearchInput(event) { + state.searchTerm = event.target.value; // updates the state + render(); // Re render with filtered results +}; + +render(); + + +