diff --git a/Sprint-1/destructuring/prep/index.html b/Sprint-1/destructuring/prep/index.html new file mode 100644 index 00000000..6accf50d --- /dev/null +++ b/Sprint-1/destructuring/prep/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + +
+ + + diff --git a/Sprint-1/destructuring/prep/script.js b/Sprint-1/destructuring/prep/script.js new file mode 100644 index 00000000..50d79315 --- /dev/null +++ b/Sprint-1/destructuring/prep/script.js @@ -0,0 +1,56 @@ +const state = { // we create a const state with an object with two properties (films, searchTerm) where films is an array that contains objects with the info of each movie and the searchTerm contains a empty string. + 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, +}, +{ +title: "the simpsons", +director: "???????", +times: ["15:00", "20:00"], +certificate: "12A", +duration: 108, +} +], + searchTerm : "", +} + +function createFilmCard(film) { // in this function we query the elements on the html and we also clone the node for the template to create film cards for each movie +const filmCard = document +.getElementById("film-card-template") +.content.cloneNode(true); +filmCard.querySelector("h3").textContent = film.title; +filmCard.querySelector("p").textContent = film.director; +return filmCard; +} + + + +function render() { // we create this function to use it every time we do a different search + const filteredFilms = state.films.filter(function(film) { //we filter the movies to search the input value + return film.title.includes(state.searchTerm); // we check if the film includes the user input + }); + + const filmCards = filteredFilms.map(createFilmCard); + document.getElementById("film-container").append(...filmCards); +} + +render(); //we call our render function so we can see the list of movies when we are not searching + +const input = document.querySelector("input"); // we query the user input +input.addEventListener("keyup", function () { // we add event listener to catch the input value + state.searchTerm = input.value; + + document.getElementById("film-container").innerHTML = ""; // clear the previous films when searching + render(); // we call render so we see the filtered film on the search +}); diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html index 23acfa71..6bb4ba9e 100644 --- a/debugging/book-library/index.html +++ b/debugging/book-library/index.html @@ -1,7 +1,7 @@ - + Library
-
- - - - - - -
+
@@ -77,7 +78,7 @@

Library

- + diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js index 75ce6c1d..dbf58439 100644 --- a/debugging/book-library/script.js +++ b/debugging/book-library/script.js @@ -7,7 +7,7 @@ window.addEventListener("load", function (e) { function populateStorage() { if (myLibrary.length == 0) { - let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true); + let book1 = new Book("Robinson Crusoe", "Daniel Defoe", "252", true); //missing parentheses let book2 = new Book( "The Old Man and the Sea", "Ernest Hemingway", @@ -17,50 +17,54 @@ function populateStorage() { 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"); +const formEl = document.getElementById("book-form"); +formEl.addEventListener("submit", function (e) { //clear the form after submitting + e.preventDefault(); + submit(); + formEl.reset(); +}); //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 == "" - ) { + if (title.value == null || title.value == "" || pages.value == null || pages.value == "" || author.value == null || author.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(); + let book = new Book(title.value, author.value, pages.value, check.checked); // instead of author.value was title.value twice + myLibrary.push(book); + render(); // call render to get the added book in the table + } } -function Book(title, author, pages, check) { +class Book { +constructor (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-- { + 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 row = table.insertRow(-1); let titleCell = row.insertCell(0); let authorCell = row.insertCell(1); let pagesCell = row.insertCell(2); @@ -69,6 +73,8 @@ function render() { 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"); @@ -76,7 +82,7 @@ function render() { changeBut.className = "btn btn-success"; wasReadCell.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check == true) { // it was false before readStatus = "Yes"; } else { readStatus = "No"; @@ -89,12 +95,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 () { + let delButton = document.createElement("button"); + delButton.id = i + 5; // instead of delButton the variable was called delBut, thats why was broken + deleteCell.appendChild(delButton); + delButton.className = "btn btn-warning"; + delButton.innerHTML = "Delete"; + delButton.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); diff --git a/fetch/programmer-humour/readme.md b/fetch/programmer-humour/readme.md index 2de3faaf..06d546d5 100644 --- a/fetch/programmer-humour/readme.md +++ b/fetch/programmer-humour/readme.md @@ -11,3 +11,4 @@ Write an function that makes an API call to `https://xkcd.now.sh/?comic=latest` - Log the received data to the console - Render the `img` property into an `` tag in the DOM - Incorporate error handling +
Author Number of Pages ReadRemove