Bookflix is a feature-rich book reader planner designed to help you organize, track, and enhance your reading experience. With the ability to create different lists, mark books as 'Read,' and receive genre-specific recommendations, Bookflix makes managing your book collection a seamless and enjoyable process.
- JavaScript
- jQuery
- Bootstrap
Bookflix utilizes the following API:
- Open Library API for general book information.
-
Clone the repository
git clone https://github.com/borregaio/bookflix.git
-
Open the index.html file in a web browser
cd bookflix open index.html
The deployed version can be accessed here.
- Search and Add Books:
- Utilise the Open Library API to search for books by title, author, or other criteria.
- Add books to different lists: "Want to Read," "Currently Reading," and "Read."
- Organise Your Lists:
- View and manage your lists with ease.
- Cross off books as you complete them, automatically moving them to the "Read" list.
- Recommendations:
- Receive recommendations based on specific genres of books you are interested in.
-
Utilise the Open Library API to search for books by title, author, or other criteria.
const buildReturnObject = (data) =>{ let results = null; const books = data.docs; results = books.map((obj) => { let bookImgURL ; if(obj.hasOwnProperty("cover_edition_key")) { bookImgURL = `https://covers.openlibrary.org/b/olid/${obj.cover_edition_key}-M.jpg`; }else{ bookImgURL = "./assets/images/No_Image_Available.jpg"; } return { imgURL: bookImgURL, bookTitle: obj.title, authorName: obj.author_name[0], yearPublished: obj.publish_year[0] } }); return results; };
-
Search bar with search options.
<div class="tick-box-options"> <label class="form-check-label"> <input type="radio" name="searchType" id="byTitle" class="form-check-input" value="byTitle" checked> By Title </label> <label class="form-check-label"> <input type="radio" name="searchType" id="byAuthor" class="form-check-input" value="byAuthor"> By Author </label> <label class="form-check-label"> <input type="radio" name="searchType" id="bySubject" class="form-check-input" value="bySubject"> By Subject </label> <label class="form-check-label"> <input type="radio" name="searchType" id="byText" class="form-check-input" value="byText"> By Book Text </label> </div>
-
A search section displaying the search results with a title, author, year published and cover.
function doSearchDisplay(resultArr) { var results = $('#results'); results.empty(); //Create Results Title var resultsTitle = $('<h2>').text('Searched Book Results'); results.append(resultsTitle); // Create results row resultArr.forEach(element => { var row = $('<div>').addClass('row'); var cover = $('<div>').addClass('cover col-sm-4'); var information = $('<div>').addClass('information col-sm-4'); var lists = $('<div>').addClass('lists col-sm-4'); // Cover image var coverResult = $('<img>').attr('src', element.imgURL).attr('width', 180); // coverResult.addClass('coverImg'); cover.append(coverResult); // Book information var titleResult = $('<h4>').text(element.bookTitle); var authorResult = $('<h4>').text(element.authorName); var yearResult = $('<h4>').text(element.yearPublished); information.append(titleResult, authorResult, yearResult); // Clickable lists var listSelection = 3; var checkboxes = $('<ul>'); lists.append(checkboxes); for (var j = 0; j < listSelection; j++) { //Create list/checkbox input var list = $('<li>'); var input = $('<input>').attr('type', 'checkbox'); list.append(input); //Add text to input var listsText = ['Want to read', 'Currently reading', 'Already read']; list.append(document.createTextNode(' ' + listsText[j])); //Append lists checkboxes.append(list); } row.append(cover, information, lists); results.append(row); }); }
-
Rows of lists to display the selected books.
<div class="row"> <div class="recomendbox col"> <h3>RECOMMEND</h3> </div> <div class="col"> <img src="./assets/images/cover.jpg" alt="" height="50px" width="30px"> </div> <div class="col"> <img src="./assets/images/cover.jpg" alt="" height="50px" width="30px"> </div> <div class="col"> <img src="./assets/images/cover.jpg" alt="" height="50px" width="30px"> </div> <div class="col"> <img src="./assets/images/cover.jpg" alt="" height="50px" width="30px"> </div> </div>
-
Responsive styles.
@media (max-width: 768px) { .search-section { flex-direction: column; align-items: flex-start; } .search-box { width: 100%; margin-bottom: 10px; } .navbar h1 { font-size: 24px; margin-right: 0; } .navbar img { top: 5px; left: 5px; width: 100px; } .myShelf { width: 100%; } }
- Carlos Borrega
- Desire Anunobi
- Gjorgji Krstevski
- Mohammed Husain
- Sufyan Gajra