Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

The Library project instructs to associate the Book instances in the library array with their respective DOM elements and recommends doing so via a data-* attribute. It also recommends using the instance's array index as the link.

This is of course a problem when books are deleted because either the array element is deleted/nulled but still takes space to preserve the indices of the books, or logic has to be added to amend the DOM to associate with the new indices, and this has been a rather common pain point, less from a "I don't know how to implement this" POV but more a "surely this isn't a sensible way to deal with this sort of thing?"

I feel it'd be more pedagogically appropriate to recommend giving the book objects their own unique ID and using that as the link to the DOM instead of the dynamic index. This could be via an auto-increment or possibly more appropriately, crypto.randomUUID(). No packages, all built-in and very appropriate for this feature.

The instruction step could also do with a link to documentation on data-* attributes since I believe this is the first time they're properly mentioned in the curriculum (at least in the JS pathway).

Proposal:

1. Change use of array index as the link between DOM and book objects to some form of ID, perhaps a UUID using the built-in crypto.randomUUID().
2. Link to data-* docs in the same instruction step.

Path

Ruby / Rails, Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-javascript-library

(Optional) Discord Name

No response

(Optional) Additional Comments

No response