▶️ Section 07: Completion & Extension

📝 Summary

In this final section, you will do two important things: check your full finished code, and then extend the project with your own new feature. First, you will review the complete project code so you can confirm that your HTML and JavaScript are correct. Then, you will build an extension version of the app to show deeper understanding.

This section is about moving from "I followed the steps" to "I can improve the app on my own."

✅ Checklist

  • [ ] Review the core concepts list and make sure you understand each idea.
  • [ ] Compare your code to the full code review in this section.
  • [ ] Fix any missing or incorrect lines in your main project files.
  • [ ] Create extension files: extension.html and extension.js (and extension.css if your extension needs custom styling).
  • [ ] Copy your final working project code into the extension files as your starting point.
  • [ ] Build at least one extension feature from the options below.
  • [ ] Test your extension so it runs correctly.

Grading Note: To earn full points, you must complete at least one extension feature.
If you do not complete an extension, the highest possible score is B (2.5/4).

🧠 Core Concepts List

  • Building a complete HTML structure that JavaScript can control.
  • Using IDs as JavaScript hooks (examples: #book-form, #book-list, #add-book-btn).
  • Reading input values from the DOM and cleaning text with trim().
  • Managing app state with an in-memory array (books).
  • Writing helper functions to keep code organized by purpose.
  • Validating user input (required fields and duplicate ISBN checks).
  • Updating the DOM dynamically (add one row, remove one row, clear all rows).
  • Using event listeners for submit, input, and click.
  • Using event delegation for dynamically created delete buttons.
  • Keeping memory data and visible UI synchronized after every action.
  • Initializing UI state on page load.

💻 Full Code Review

Use this section to check your work. Your final project should match this structure.

HTML (index.html)

Code image: s07-HTML

JavaScript (app.js)

Code image: s07-JS

🛠 Extensions

To earn full credit, you must build at least one extension feature.

  1. Create extension.html and extension.js in your project folder.
  2. Copy your final, working project code into those extension files as your base.
  3. If your extension needs custom styling, create extension.css and link it in extension.html.
  4. Build at least one extension from the options below.
  5. Test your extension and make sure your original required features still work.

If you do not complete an extension, the highest possible score is B (2.5/4).

Extension Options (Choose at least one)

  1. Add localStorage saving/loading
    When the page reloads, books should still be there.

  2. Add a search/filter box
    Let users type text to filter books by title, author, or ISBN in real time.

  3. Add edit/update book feature
    Allow a user to click Edit on a row, change values, and save the update.

  4. Add sort controls
    Add buttons or a dropdown to sort by title, author, or ISBN (A-Z and Z-A).

  5. Add confirmation modal for delete/clear
    Show a confirmation step before removing one book or all books.

  6. Add form validation improvements
    Example ideas: minimum title length, valid ISBN format, or trimmed multi-space cleanup.