DEV Community

DataMoshing
DataMoshing

Posted on

Library project completed

Image descriptionHello all! I am currently wrapping up the library project from TOP (The Odin Project) boy it was sure a doozy. The first obstacle I ran into was looping through the array that held the books and displaying it on a card/table. I managed to create the table and display it using the DOM but ran into yet another problem, my array kept duplicating each "book".

After asking for help from some lovely folks it turns out I had to reset the form after each book! After that was settled the next step was pretty simple, which was add a button that brings up the form for the user to input their author, title, number of pages, etc. The next step was when I hit another wall.

Add a button on each book’s display to remove the book from the library.
You will need to associate your DOM elements with the actual book objects in some way. One easy solution is giving them a data-attribute, that corresponds to the index of the library array.

To be quite honest I had little to no idea how I could implement data-attributes to each book giving them a unique id. Yet again asked another question with as much detail into what I'm trying to achieve (Quick tip asking great questions not only helps you as a programmer/developer it also makes it easier to work with being the other person who is trying to help you. So ask questions but also give great detail!) After asking for help, and turns out It could be solved with just a few lines of slapping an attribute to each book and adding another parameter to my loop and tada! Each book had its own unique id!

The last step was a bit challenging, prototypes were difficult at first but after learning that it is a property on a function that points to an object it became a little clearer as to how to update the read status on the books.

One month later, here we are ! After many headaches and breaks this project is finished. Thank you to everyone that helped and also thank you to the peeps who read my very "professional" blogs. ❤️

Top comments (0)