Submission for assignment 1

[R-Jim]

• Demo link: https://df-frontend-2023-assignment1-hhuzwhh7k-r-jim.vercel.app/

Notes

• Display, Add, and Delete books from local storage.
• Color theme can be changed by updating color settings in styles.css
• Small UX added: autofocus to the first field for Add book modal, search displayed books keeps search state after add/delete a book
• Responsive features for mobile, laptop, and PC resolutions.

[zlatanpham]

Hello @R-Jim, great start!

Requirements

• [x] Render correct table elements
• [x] Create book
• [x] Delete book
• [x] Search book by title
• [ ] Semantic HTML
• [x] Standard use of CSS and JavaScript
• [ ] Store data in LocalStorage

Final result: ✅ passed 80% of the requirements

Feedback

We also have some comments for your work:

1. It is considered a best practice to avoid including inline JavaScript code within HTML. A more recommended approach is to incorporate addEventListener within the script file to manage event handling. By doing so, this promotes separation of concerns, resulting in a more organized and maintainable codebase. https://github.com/R-Jim/df-frontend-2023/blob/main/assignment-1/index.html#L24

2. If possible, move the inline style into the CSS file.

3. Should wrap the JSON parse inside an try-catch. Also consider validating the data before passing it to the function https://github.com/R-Jim/df-frontend-2023/blob/main/assignment-1/script.js#L17

4. Try to avoid relying on reading data from storage to render the list. It’s much more efficient to render the UI directly from a variable. https://github.com/R-Jim/df-frontend-2023/blob/main/assignment-1/script.js#L17

5. Close button should be a native HTML <button> element. The same suggestion goes for the delete button