Keeping Track of Books with a HTML Page on Android - Book Inventory with JavaScript

I just want to keep track of my book collection. Recently I've started a new book collection of very old books, the collection is famous in Romania (where I live) and it's called "Biblioteca pentru toti" ("Library for all", literally). There are thousands and thousands of books (lucky me, because they are old, I can find them at very cheap prices, practically, the cheapest items from an antique store, but the cultural value is enormous, all the books are top-known world-wide! I believe that this is a treasure that's worth adventuring for it.


Here is a picture with my recently added volumes:

You can see clearly that even if I have only a bunch of them, there are between them known author names, and a book is priced only .80 to 2 dollars in antique store!

Now it's easy to keep track of them, because I watched them in the shelf for so much long time (<3), that I memorized all of them. But, then, what I am going to do when I have a few hundreds of them? I couldn't found even the size of the collection on google, the biggest number I know is around 1350! How can I buy then a new book and be sure I don't already own it?

Well, I need a list. So I took a pencil and paper and start writing the numbers of the books. But, then, I thought, I can't write ONLY the books I have; soon, there will be a lot of books, and I must read all the numbers so I can check the existence of one book. And passing really fast by scanning the numbers could make me skip numbers! Duplicates OR sepukku! The best way it's to write in order all the numbers (1300-1500) and then to mark owned books with a line trough the respective number. So I've started. And ended a few minutes later, realizing it was stupid (I've only wrote to 100 or so). Not only it will take too much time writing ALL the book numbers, how can I carry 2 pages of A4 paper with me in the antique shops and books stores? How about of unexpected occasions?

I know, I need a site! It's easy to count the numbers with a for-loop! But, then again, how can I access my site, where there is no wi-fi and what if I will not have internet on my phone? No problem, I will make an offline site for my Android phone!

As you may observe, each book has it's own color, has the author on the spine of the book, and, most importantly, has the serial number (right on top of the spine). You can actually make use of this 3 main characteristics to keep track of the books. Even the color, though is not unique (it's not really unique, they couldn't really assign unique colors to 2000 books!) it's rare enough to consider it into count. However, I have chosen to keep track of the books only by their serial number. It's like an unique ID. It's easy to ready, simple and you can't go wrong with it!

This is what I have build, though is simple, take notion that it is not really an app and it is not a phonegap! It's just an offline HTML page, that I have copied it on my phone, and it helps me incredible a lot. I just pull out the phone in the antique store, scroll with one finger, and I found very quickly what books I have or not have! This is probably the best solution, and I am so happy that I've discovered!

 And this is how owned books look like (they are red):

You probably noticed the text input and the button. It's a #header div. It doesn't works. 

• it's not position: fixed, it's absolute, and it would be nicer to be fixed in order to input a new bought book no matter where where are you scrolled. Setting the attribute fixed will cause not showing the button, I don't know why 
• it doesn't work adding a new book, because clicking the button it doesn't work in android, I don't know why, and I've searched tons of forums. 

You can see that in the title of the page says: "biblioteca pentru toti: 33/1500" (library for all: 33/1500). That is dynamically generated with JavaScript. Whenever I add a book, the title updates automatically. Unfortunately, to update the book list I have to update a number array variable in the JavaScript file on PC, and then copy and replace on my phone. 
 
An interesting fact is that the page doesn't render if the HTML, CSS and JavaScript files are just copy-pasted in my Android phone (it's Android 2.3 or so). I have even found a related question on stackoverflow but no clear answer (just: learn phonegap, dude!). And don't know why it is this and what's the solution, but I've found a quick work-around for this: open the page with my browser on PC, click File->Save As->Web Page, Complete. Then I copied the saved files on my Android phone and worked!

This is how I update book's list: I opened the .js file with notepad and add a number to an array var:

 Then, I must open the page with my PC browser and save the page. The resulting files will be copied to my Android phone via USB cable.

However, I can't complain, because there is no good work-around for adding new book numbers (I thought I could write numbers to a text file and then read it, but you can't do I/O file operations with JavaScript!). You can use  the localStorage, but is not really reliable, you can loose very easy the data. Perhaps... the web sql database?...

You may find code here: A Simple jQuery / JavaScript Book Inventory.