HackYourFutureBelgium · EL1VAS · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
@@ -31,15 +31,15 @@ <h1>Library</h1>
       <div class="form-group">
         <label for="title">Title:</label>
         <input
-          type="title"
+          type="text" 
           class="form-control"
           id="title"
           name="title"
           required
         />
         <label for="author">Author: </label>
         <input
-          type="author"
+          type="text" 
           class="form-control"
           id="author"
           name="author"

diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
@@ -31,14 +31,24 @@ function submit() {
   if (
     title.value == null ||
     title.value == "" ||
+    author.value == null || // Added the author prerequisite too
+    author.value == "" || // Added the author prerequisite too
     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); // fixed the author.value
+    myLibrary.push(book); // Fixed the typo
+    render();
+
+    // We clear the form
+    title.value = "";
+    author.value = "";
+    pages.value = "";
+    check.checked = false;
+
     render();
   }
 }
@@ -54,7 +64,8 @@ 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--) {
+    // 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
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="style.css">
+    <Title>Document</Title>
+</head>
+<body class="main">
+    <div class="container">
+        <div class="row">
+            <div class="column">
+                <div class="card">
+                    <h1>Number facts</h1>
+                    <p>Enter a number and get a random fact</p>
+                    <input type="number" id="numberInput" name="numberInput" placeholder="Enter any number..">
+                    <div id="fact" class="card-body">
+                        <h4 class="card-title">Number fact</h4>
+                        <p id="factText" class="card-text"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+<script src="script.js" defer></script>
+</body>
+</html>
diff --git a/numberfacts/script.js 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));
+
+}
diff --git a/numberfacts/style.css b/numberfacts/style.css
diff --git a/preparation/index.html b/preparation/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">
+    <script src="script.js" defer></script>
+    <title>Document</title>
+  </head>
+  <body>
+    <input type="search" id="search" placeholder="Search films...">
+    <div id="film-container"></div>
+
+    <template id="film-card-template">
+        <section>
+            <h1>Film title</h1>
+            <p data-director>Director</p>
+            <time>Duration</time>
+            <p data-certificate>Certificate</p>
+        </section>
+    </template>
+  </body>
+</html>
diff --git a/preparation/script.js 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();
+
+
+