Adding exams folder + adding 'book_finder' in it as first folder commit

2025-08-04 15:30:42 +02:00
parent c15ff7a816
commit b857756967
5 changed files with 138 additions and 0 deletions
--- a/_exams/book_finder/bookList.js
+++ b/_exams/book_finder/bookList.js
@@ -0,0 +1,52 @@
+const books = [
+  {
+    title: "The City We Became",
+    author: "N. K. Jemisin",
+    tags: ["fantasy", "fiction", "afrofutursim", "science fiction", "sci-fi"]
+  },
+  {
+    title: "The Catcher in the Rye",
+    author: "J. D. Salinger",
+    tags: ["fiction", "young adult", "YA", "realism", "coming of age", "classic"]
+  },
+  {
+    title: "The Hundred Thousand Kingdoms",
+    author: "N. K. Jemisin",
+    tags: ["fantasy", "fiction", "adventure", "series"]
+  },
+  {
+    title: "Sapiens: A Brief History of Humankind",
+    author: "Yuval Noah Harari",
+    tags: ["nonfiction", "history", "anthropology", "science", "sociology"]
+  },
+  {
+    title: "Behave: The Biology of Humans at Our Best and Worst",
+    author: "Robert M. Sapolsky",
+    tags: ["nonfiction", "anthropology", "science", "sociology", "biology"]
+  },
+  {
+    title: "The Parable of the Talents",
+    author: "Octavia Butler", 
+    tags: ["fiction", "dystopian", "science fiction"]
+  },
+  {
+    title: "1984",
+    author: "George Orwell", 
+    tags: ["fiction", "dystopian", "science fiction", "classics", "adult"]
+  },
+  {
+    title: "Remarkably Bright Creatures",
+    author: "Shelby Van Pelt",
+    tags: ["fiction", "mystery", "magical realism"]
+  },
+  {
+    title: "Crying in H Mart",
+    author: "Michelle Zauner",
+    tags: ["memoir", "nonfiction", "autobiography"]
+  },
+  {
+    title: "Wild: From Lost to Found on the Pacific Crest Trail",
+    author: "Cheryl Strayed",
+    tags: ["nonfiction", "memoir", "adventure", "travel"]
+  }
+]
--- a/_exams/book_finder/helper.js
+++ b/_exams/book_finder/helper.js
@@ -0,0 +1,38 @@
+// Flatten object keys into an array so that we search the entire object by the input value
+const flattenObjectValuesIntoArray = (arrOfObjs) => {
+  let flattenedObj;
+  const flattenedObjsArr = [];
+  for (let obj = 0; obj < arrOfObjs.length; obj++) {
+    const objValues = Object.values(arrOfObjs[obj]);
+    flattenedObj = [...objValues.flat()]
+    flattenedObjsArr.push(flattenedObj)
+  }
+  return flattenedObjsArr;
+};
+
+// Structure filtered books as HTML and return
+const structureBookAsHtml = (book) => {
+  const bookDiv = document.createElement("div");
+  bookDiv.setAttribute('class', 'bookDiv');
+  
+  const bookTitle = document.createElement("h2");
+  bookTitle.innerHTML = book.title;
+  bookTitle.setAttribute('class', 'bookTitle');
+
+  const bookAuthor = document.createElement("h3");
+  bookAuthor.innerHTML = book.author;
+
+  const bookTags = document.createElement("p");
+  bookTags.innerHTML = book.tags.join(", ");
+
+  bookDiv.append(bookTitle, bookAuthor, bookTags);
+  
+  return bookDiv;
+};
+
+const renderBooksToDom = (elements) => {
+  const bookListContainer = document.querySelector("#bookList");
+  bookListContainer.innerHTML = "";
+
+  bookListContainer.append(...elements);
+};
--- a/_exams/book_finder/index.html
+++ b/_exams/book_finder/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css">
+    <script src="bookList.js"></script>
+    <script src="bookList.test.js"></script>
+    <script src="helper.js"></script>
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>Book Finder</h1>
+    <input id="search-bar" type="text" placeholder="Search for books by tags">
+    <button class="btn" id="search-btn">Search</button>
+    <div id="bookList">
+      <!-- List of books will be rendered here -->
+    </div>
+  </body>
+</html>
--- a/_exams/book_finder/readme.md
+++ b/_exams/book_finder/readme.md
@@ -0,0 +1,5 @@
+# FSCJ Building Interactive Websites
+
+In the code editor, we have provided you with the starting code for a Book Finder website. Once the application is complete, you will be able to input a genre, title, or author into the search bar, and get back a list of books that match that criteria. You can see the list of books that your application will search in ```bookList.js```.
+
+Your task is to finish building the application by completing the function definitions for the ```captureSearchValue()```, ```filterBooks()```, ```structureBooksAsHtml()```, and ```searchBtnClickHandler()``` functions. You should only make edits to these four function definitions within ```script.js```. We’ve defined helper functions in ```helper.js``` that you will need to use as you build out your program.
--- a/_exams/book_finder/script.js
+++ b/_exams/book_finder/script.js
@@ -0,0 +1,25 @@
+// Click handler for search button
+const captureSearchValue = () => {
+
+};
+
+// Filter books based on search input
+const filterBooks = () => {
+
+};
+
+// Empty the book list container, iterate over list of filtered books, return list of books formatted as HTML using the function in `helper.js` 
+const structureBooksAsHtml = () => {
+
+};
+
+// Handler triggered when a user clickers the "Search" button. Chains previously defined functions together to filter books based on the search value, formats the books as HTML and renders them to the DOM
+const searchBtnClickHandler = () => {
+
+}
+
+// Grab search button from the DOM
+
+
+// Attach an event listener to the search button
+searchBtn.addEventListener("click", () => { searchBtnClickHandler(books) });