Submission for assignment 1

[NguyenPhuLoc666666]

link deploy: https://df-frontend-2023-nguyenphuloc666666.vercel.app/

[ngolapnguyen]

Overall great work 👍

Requirements

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

Final result: ✅ passed 70% of requirements

Feedbacks

1. Minor stuff, but we should use primary color scheme for main action. E.g. in this case Delete should be the primary button:

   

2. Minor thing, edit form doesn't have validation, so I can remove both the title & the author:

   

3. Adding book or deleting a book when searching will reset the filtered data:

   

We can either:

1. Clear out the search input when adding/deleting, OR

2. Take the search query into account whenenever we render the table

3. This block contains conflicting logic:

   

You are calling setData before the getData method, which will always set the initial mock data to local storage before pulling it out. You need to call getData first, and only call setData when the data from local storage is empty.

5. Overall your naming pattern is fine, but I'd love to see it a bit more precise. For example:

   1. btn-cancel should be btn-cancel-deleting-book. id is a globally unique property, which means it needs to be unique enough that when you look at it, you know exactly what it's for, where it is, etc. You can use btn-cancel as a CSS class instead, but if you use id, make sure it's unique & relevant.
   2. ...

6. Nice touch with the responsive UI 👍