On.book - project library #51
Conversation
Added our own list of books to js
Added the right label to the right book
dropdown menu
arrow functions
Change the Button styling
There was a problem hiding this comment.
Great job with this project!
You have worked well with both the UX and fucntinality of this project. Fun that you have implemented filtering, sort, and search functionality. Well done.
I see that you have mixed declaring functions with the keyword function and arrow functions. Make sure to stick to one approach to keep your code clean and tidy.
I will not approve your project based on this, just to emphasise the importance of clean code.
My preference would also be to gather all event listeners in one place, but this is up to you. You could also remove the filder with the images that you are not using in this project. And another minor thing, that we will learn more about bext week, make sure all your images have alt tags. You could add this to the objects. Not a need to change, more a nice to have for this time!
Keep up the good work!
| if (filteredBooks.length === 0) { | ||
| // Clear the book list and display a message while keeping the header | ||
| const bookList = document.getElementById("book-list"); | ||
| bookList.innerHTML = ` | ||
| <div style= | ||
| "display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 300px; | ||
| width: 100%; | ||
| background-color: white;"> | ||
| <p>No books with such search term</p> | ||
| </div> | ||
| `; |
There was a problem hiding this comment.
nice that you added an "empty state" ⭐
script.js
Outdated
| // Function to filter books by title based on user input | ||
| function searchBooksByTitle(searchTerm) { | ||
| const filteredBooks = books.filter((book) => | ||
| book.title.toLowerCase().includes(searchTerm.toLowerCase()) | ||
| ); |
|
@JennieDalgren Thank you for this thorough feedback! I have changed the keyword function (for the search function) into an arrow function - thank you for pointing that out! Hope this clears the requirements! 😊 |
Netlify link
https://on-book.netlify.app/
Collaborators