Hello, so I have been stuck on this exam for 2 days now. Hoping for some guidance. I havent even begun to past question 2.
For problem 2, unsure how to proceed. If I am just completely wrong and need to start over and review material.
Thank You
Test Cases
- (COMPLETE) The captureSearchValue function captures the search bar input value and returns it.
const captureSearchValue = () => {
return document.getElementById("search-bar").value;
};
- The filterBooks() function takes in a search string and a list of books as parameters and returns all of the books that contain an exact match of the search input as an array of objects. Objects in this array should be formatted as books with title, author, and tags properties, similar to the original books array. It should use the flattenObjectValuesIntoArray() function to search all fields within a book object easily.*
Expected thefilterBooks
function to return an array.
const filterBooks = (captureSearchValue, listOfBooks) => {
let matchingAttribute = []
//A. Loop through listofBooks so we can set condition against captureSearchValue
// Aa. listofBooks will be helper function flattenObjectValuesIntoArray(books)
for (let i=0; i < listOfBooks.length; i++) {
if (captureSearchValue === listOfBooks[i]) {
matchingAttribute.push(listOfBooks[i])
}
// This doesnt feel right as I'm not telling this code to loop through books object.
}
let matchingBook = []
if (matchingAttribute === books.title || matchingAttribute === books.author || matchingAttribute === books.tags) {
return matchingBook = (title, author, tags)
{
title: books.title
author: books.author
tags: books.tags
}
}
};
- The structureBooksAsHtml() function takes a list of books as a parameter, iterates over the list, formats them as HTML using the structureBookAsHtml() helper function, and returns an array of formatted book elements.
Expected thestructureBookAsHtml
function to return an array. - The searchBtnClickHandler() function is triggered when a user clicks the search button. It takes in a list of books as a parameter and integrates the individual functions that make up the app to render a list of books to the DOM that matches the search input when the search button is clicked. searchBtn is not defined
Additional Files:
helper.js
// 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;
};
console.log(flattenObjectValuesIntoArray(books))
// 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);
};
bookList.js
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"]
}
]
console.log(books)
index.html
<!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>