Anders Tornblad

All about the code

Tajmkiper, part 1

There are lots of project time clock apps out there for those who want to keep track of how much time they spend in different projects. There's a genuine need for this type of app, but I have still not found one that is as simple and easy to use as it could be. Most of them either cost money, require that I install some piece of software on my smartphone, or demand my email address for some reason.

I would like a minimal functional web interface, designed mobile-first, that runs completely local to my browser of choice. I don't want my project data to be stored anywhere but locally in the browser. And I want to be able to export my projects and time spent to Excel. That shouldn't be so difficult to create, so I'll start hacking.


After som pen-on-paper action, I came up with the following html/css mockup:
Tajmkiper Mockup

<html> <head> <link rel="stylesheet" href="tajmkiper.css"> </head> <body> <ul id="projects"> <li class="running"> <a href="#"> <header>Creating Tajmkiper</header> <span class="time">1:37:11</span> </a> </li> <li> <a href="#"> <header>Killing some time</header> <span class="time">2:12:54</span> </a> </li> <li id="total"> <a href="#"> <header>Total:</header> <span class="time">3:50:05</span> </a> </li> </ul> <nav> <ul> <li id="addProject"><a href="#addProject"><header>Add new project</header></a></li> <li id="stopTimer" class="hideSpan"><a href="#stopTimer"><span>Stop timer</span></a></li> <li id="settings" class="hideSpan"><a href="#settings"><span>Tools</span></a></li> </ul> </nav> </body> </html> ul, li { margin: 0; padding: 0; list-style: none none inside; text-indent: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } #projects { position: fixed; top: 2px; left: 2px; right: 2px; bottom: 36px; overflow-x: hidden; overflow-y: auto; } #projects li { position: relative; background: #259; color: #fff; height: 32px; margin-top: 2px; overflow: hidden; } #projects a.activate { position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; } #projects header { position: absolute; display: block; left: 8px; top: 0; right: 80px; bottom: 0; overflow: hidden; font-weight: normal; line-height: 32px; text-decoration: inherit; } #projects .time { position: absolute; display: block; right: 0px; width: 70px; padding-right: 8px; top: 0; bottom: 0; border-left: solid 1px #fff; overflow: hidden; line-height: 32px; font-size: 80%; text-decoration: none; text-align: right; background-color: #259; transition: background-color 0.25s ease-in-out; } #projects .running .time { background-color: #5f3; color: #281; font-weight: bold; } #projects #total { background: #ddd; } #projects #total header { text-align: right; } #projects #total .time { color: #000; font-weight: bold; } #projects li:first-child { margin-top: 0; } li { border-radius: 3px; } nav { position: fixed; bottom: 2px; left: 2px; right: 2px; height: 32px; } nav > ul { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } nav li#addProject { position: absolute; left: 0; top: 0; bottom: 0; right: 68px; background: #4a2; color: #fff; } nav li#stopTimer { position: absolute; top: 0; bottom: 0; right: 34px; width: 32px; background: #a31 url('stop.png') no-repeat scroll 50% 50%; color: #fff; } nav li#settings { position: absolute; top: 0; bottom: 0; right: 0; width: 32px; background: #259 url('settings.png') no-repeat scroll 50% 50%; color: #fff; } nav a { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0 8px 0 8px; line-height: 32px; } .hideText span { display: none; }

My thought is to simply click on a project to start that project's time clock (and stop any other running time clock), click on Add new project to pop up a dialog where I enter my project's name, and then the new project's time clock starts. When I go to lunch, I click the stop button. If I want to remove all projects, set all time clocks to zero, or export everything as a CSV file (using the CSV framework I've made), I click the "settings" button in the lower right corner.

I think this looks good for now. Next time, I'll start writing some JavaScript

EDIT: Tajmkiper is now publicly available to anyone who wants to use it.
Try it:

Tajmkiper, part 1 (this part)
Tajmkiper, part 2
Tajmkiper, part 3

Add a comment