Submission for assignment 1

[leotran20]

Hi, here is the link of my submission for assignment 1: https://df-frontend-2023-rho.vercel.app/

[leotran20]

Just updated the project following the requirement about not using jQuery. So, jQuery has been removed out of my submission.

[trankhacvy]

Hello @leotran20 , well done!

Requirements

• [ ] Render correct table elements
• [x] Create book
• [x] Delete book
• [x] Search book by title
• [x] Semantic HTML (except the table, other parts are good)
• [x] Standard use of CSS and JavaScript
• [x] Store data in LocalStorage

Final result: ✅ passed

Feedback

We also have some comments for your work:

1. Please use the correct HTML tags for your table. A simple table should look like this:

   <table>
   <thead>
   <tr>
     <th colspan="2">The table header</th>
   </tr>
   </thead>
   <tbody>
   <tr>
     <td>The table body</td>
     <td>with two columns</td>
   </tr>
   </tbody>
   </table>

However, your table structure appears as follows:

<table class="main-content">
  <tbody>
    <tr>
      <th colspan="2">Name</th>
      <th>Author</th>
      <th>Topic</th>
      <th>Action</th>
    </tr>

    <tr>
      <td colspan="2">Javascript</td>
      <td>Unknown</td>
      <td>Programming</td>
      <td>
        <button
          class="btn btn-link"
          type="button"
          onclick="openConfirmationDialog({name: 'Javascript', id: '1'})"
        >
          <span>Delete</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

2. Your code appears somewhat unformatted. You can improve its formatting either manually or by utilizing your IDE's formatting tools.

3. Dynamically fetching HTML is a good idea, but it might be considered a bit excessive for this assignment. Nonetheless, it's still a valuable concept.

4. The code segments localStorage.setItem and localStorage.getItem are repeated multiple times throughout your code. It would be helpful to create utility functions for these operations. Additionally, consider wrapping the JSON.parse function in a try-catch block to gracefully handle unexpected errors.

5. We encourage you to add comments to your issue to describe what you have done in your assignment. This will make it easier for us to review your work and understand your changes.

Keep up the good work!