CYF-ITP-South-Africa | Simphiwe Mabuya | Module-Data-Flows | Book-Library

debugging/book-library/script.js

@@ -8,12 +8,7 @@ window.addEventListener("load", function (e) {
 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
-    );
+    let book2 = new Book("The Old Man and the Sea","Ernest Hemingway","127",true);
     myLibrary.push(book1);
     myLibrary.push(book2);
     render();
@@ -31,30 +26,34 @@ function submit() {
   if (
     title.value == null ||
     title.value == "" ||
+    author.value == null ||
+    author.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);
+    let book = new Book(title.value, author.value, pages.value, check.checked);
+    myLibrary.push(book);
     render();
   }
 }
 
-function Book(title, author, pages, check) {
-  this.title = title;
-  this.author = author;
-  this.pages = pages;
-  this.check = 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
@@ -76,7 +75,7 @@ function render() {
     changeBut.className = "btn btn-success";
     wasReadCell.appendChild(changeBut);
     let readStatus = "";
-    if (myLibrary[i].check == false) {
+    if (myLibrary[i].check == true) {
       readStatus = "Yes";
     } else {
       readStatus = "No";
@@ -89,14 +88,14 @@ function render() {
     });
 
     //add delete button to every row and render again
-    let delButton = document.createElement("button");
-    delBut.id = i + 5;
+    let delBut = document.createElement("button");
     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);
+    delBut.addEventListener("click", function () {
+      let index = i;
+      alert(`You've deleted title: ${myLibrary[index].title}`);
+      myLibrary.splice(index, 1);
       render();
     });
   }

prep/example.js

@@ -0,0 +1,83 @@
+
+const state = {
+    films: [
+    {
+    title: "Killing of Flower Moon",
+    director: "Martin Scorsese",
+    times: ["15:35"],
+    certificate: "15",
+    duration: 112,
+},
+
+  {
+    title: "Kill Bill",
+    director: "Quinton Tarantino",
+    times: ["15:20"],
+    certificate: "11",
+    duration: 120,
+},
+
+{
+    title: "Jurasic Park",
+    director: "Steven Spielberg",
+    times: ["11:20"],
+    certificate: "21",
+    duration: 150, 
+},
+
+{
+    title: "Indian Jones",
+    director: "Carl Marx",
+    times: ["18:20"],
+    certificate: "27",
+    duration: 144,
+},
+
+{
+    title: "Killing a Mocking Bird",
+    director: "Mel Gibson",
+    times: ["19:20"],
+    certificate: "30",
+    duration: 154,
+}
+
+],
+searchTerm: "",
+};
+
+function createFilmCard(film){
+
+    const filmCard = document.getElementById("film-cards").content.cloneNode(true);
+
+    filmCard.querySelector("h3").textContent = film.title;
+    filmCard.querySelector("p").textContent = film.director;
+    filmCard.querySelector("time").textContent = film.times;
+    filmCard.querySelector("data").textContent = film.duration;
+
+    return filmCard;
+}
+
+function render(){
+    // filter films 
+    const filteredFilms = state.films.filter((film) => {
+        // compare searchTerm with the film title
+        return film.title.toLowerCase().includes(state.searchTerm.toLocaleLowerCase());
+    });
+    // create a card for every filtered film
+    const filmCards = filteredFilms.map(createFilmCard);
+    document.getElementById("film-container").append(...filmCards);
+}
+
+render();
+
+const input = document.querySelector("input"); // access the input 
+
+input.addEventListener("keyup", () =>{
+     // update searchTerm
+    state.searchTerm = input.value;
+    //clear the previous films
+    document.getElementById("film-container").innerHTML = "";
+
+    render();
+});
+

prep/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <template id="film-cards">
+        <section>
+            <h3>Film Title</h3>
+            <p data-director>Director</p>
+            <time>Duration</time>
+            <data data-certificates>Certificate</data>
+        </section>
+    </template>
+    <label>
+        Search <input type="search" id="q" name="q" placeholder="Search term" /> 🔍
+    </label>
+    <section id="film-container"></section>
+    <script defer src="./example.js"></script>
+</body>
+</html>