Making a Morning Checklist out of HTML

While Mark Frauenfelder’s morning checklist was inspiring and relevant for me, the solution didn’t work for me because

It does not save the trees!
An iPhone would work better for me best because I always have it with me.
It’s not made with HTML5.

So right. If you are an iOS hacker you’d probably reach for xcode right away, but for a task like this, it’s simply orders of magnitude faster to do using plain HTML. Let’s get started. First thing to do is fire up a text editor and type in your check list of a <ul> of <li>'s with <input type="checkbox">'s in each of them.

<!doctype html>
<html>
<head><title>Morning Checklist</title></head>
<body>
<h1>Morning Checklist</h1>
<ul>
<li><input type="checkbox"/><label>Change</label></li>
<li><input type="checkbox"/><label>Contacts</label></li>
<li><input type="checkbox"/><label>Potty</label></li>
<li><input type="checkbox"/><label>Rinse Mouth</label></li>
<li><input type="checkbox"/><label>Laptop, wallet and keys</label></li>
<li><input type="checkbox"/><label>Shoes & Coat</label></li>
<li><input type="checkbox"/><label>Backpack</label></li>
</ul>
</body>
</html>

Cool, this is functional, but will look like this

Okay, that doesn’t look great. You’ll need to pinch zoom in order to see anything. What we need to do is to format the web page specifically for the iPhone screen. To do that, add this line inside of your <head>

<meta name="viewport"
content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0" />

This will tell your iPhone to set the page’s viewport to exactly the same as the width of its screen, and also to disallow pinch to zoom. The result is this

Okay, nice! Now let’s make it look non-ugly with some CSS. First, change to the font to something san-serif. Take away the bullet points from the list items, remove the unnecessary margins and paddings. Make the font bigger and the checkboxes themselves bigger because we want them and each row to be big enough for Mr. Fatfinger. While we are at it, might as well stripe the rows, you can actually do it using just CSS in a non-crappy browser such as Mobile Safari. After some playing around, I added the following styles

<style>
body{
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 0px;
    margin: 0px;
}

ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

li{
    clear: left;
    font-size: 25px;
    padding: 3px 0px 3px 10px;
    margin: 0px;
}

li input{
    float: left;
    margin-right: 15px;
    width: 25px;
    height: 25px;
}

li:nth-child(even){
    background-color: #eee;
}

h1{
    font-size: 20px;
    padding: 0.2em 0.5em;
    border-bottom: solid 1px #aaa;
    background-color: #eee;
    margin: 0;
}
</style>

stick these inside the <head> and now it looks like

Great! Are we done? Well, there’s one usability problem: you have to click on the checkbox itself to check it. Id’d be nice if you could check it by click anywhere on the row. Let’s drop some Javascript on this

<script>
Array.prototype.slice.call(document.getElementsByTagName('li'))
    .forEach(function(li){
        var cb = li.childNodes[0]
        cb.addEventListener('click', function(e){
            e.stopPropagation()
        })
        li.addEventListener('click', function(){
            cb.checked = !cb.checked
        }, false)
    })
</script>

Note: if you see me writing some non-IE-compatible code that’s because I am only writing for the iPhone. Nice, now you can click anywhere on a row to check or uncheck the box. Are we done? Now let’s add it as a shortcut on your Home Screen. To do that, click on the + sign on the bottom middle of the screen, and tap on Add to Home Screen. Edit the name of the button if you need to (I called it Checklist), and tap Add. Now you’ll get

If you tap on it, the checklist opens right up. But, it’d be nice to get rid of the browser chrome and buttons, that way we have less clutter and it also looks more like a real app. To do this, stick this

<meta name="apple-mobile-web-app-capable" content="yes" />

into your <head>. Unfortunately, you’ll have to re-create your Home Screen button, so delete it and go back and create again. Now, when you tab on it you’ll get

Great, we are almost done! One more thing though. Now that we are serving the checklist from a web server, if it goes down or we lose our internet connection, we won’t be able to access it. Granted this will be rare since I’ll be at home when using this, but it can happen. So we use HTML5’s applicationCache to make this page offline capable. To do this, we’ll make a cache manifest file and point our HTML page to it. First, in the <html> tag of the file add the manifest attribute like so

<html manifest="/cache.manifest">

Next, create the cache.manifest file in the same directory. With the following content.

CACHE MANIFEST
index.html
# version 1

the cache manifest is in a simple text format that lists all the resources that this page depends on. Our checklist only has one file. Also, we put a version number there in comments because the next time you’d want to change the checklist, in order for the browser to update the file in its cache, you’ll have to change the content of the cache manifest - so we’ll just update the version number when that happens. Next, there’s one more thing you have to do: in order for the browser to recognize the cache manifest as such, your web server must send with it a special header text/cache-manifest. If you or your web host is using Apache you can simply put the following line

AddType text/cache-manifest .manifest

inside the .htaccess file in the same directory - create it if it’s not there. There, try refreshing the page now. And then, to test offline mode, set your phone into Airplane mode, and then refresh the page again, it should still work.

There we have it. We built a checklist application for the iPhone using just HTML.