gauvain/codecademy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
gauvainboiche
2025-08-04 15:30:42 +02:00
parent c15ff7a816
commit b857756967
5 changed files with 138 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
_exams/book_finder/bookList.js Normal file
View File

@@ -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"]
}
]

38
_exams/book_finder/helper.js Normal file
View File

@@ -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);
};

18
_exams/book_finder/index.html Normal file
View File

@@ -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>

5
_exams/book_finder/readme.md Normal file
View File

@@ -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.

25
_exams/book_finder/script.js Normal file
View File

@@ -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) });