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.

Mockup

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

Tajmkiper mockup 1

<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
    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
    color
}
nav li#settings {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 32px;
    background: #259 url('settings.png') no-repeat scroll 50
    color
}
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.com

Posted by Anders Tornblad on Category JavaScript Labels
Tweet this