home links
all content projects tools archive

---

Once my wife and I got 3G phones, I decided it was time to update our paper grocery lists. We would always do simple shopping on the way home from work, and if we both decided to go shopping on the same day without the other knowing, sometimes we would end up with two of everything on our shopping list.

List-O! is a list we can both add, delete, and check off items as we go, check and update from our phones, and coordinate our shopping across the ether of cell data networks. It's a dead-simple list program, and if you have a website of your own, installing List-O! is as easy as copying these files over to your site.

features

• Uses only 4 PHP files, does not rely on any kind of database (like MySQL), so installation is as easy as copying files.
• Most of the interactive features are done through front-end JavaScript, with only the Save feature requiring a page refresh.
• Easily extensible to host many lists with individual names.
• List elements are large and finger-friendly for touch-screen phones.
• Quick help file in the .zip to help set up and use List-O!

download the source files here: listo_pack.zip

walk thorugh

This is the list screen. The top light blue line is where you enter new items. These list elements are unchecked.


Typing in a new list item in the top row and pressing the + sign, or hitting "Enter" will add the item to the top of the list.


Now "tortillas" is added to the list. Because the list changed, the Save icon appears in the upper right hand part of the screen. Pressing the save button will refresh the page, and in the background some PHP will write the list content to a file.


On the refreshed page, you can easily see if your list has been saved or not by the presence or absence of the save icon.


If you click anywhere on the list element's line, that item will toggle between checked and unchecked. Because the list has changed again, the option to Save will re-appear. The Checked states of the items are saved along with the list.


The blue X to the right of each item will delete that line. Here we have deleted "milk" and "cheese".