How to use this application

• Top row, 3 input boxes is default working week setup, please change if needed.
• Middle row, 3 input boxes is used for calculations. Try to change Clocked In and Clocked Out fields. Semicolon, colon, double colon, dot can be used as divider.
• Bottom row, 3 input boxes display results of calculations.

Sorry, I think I need Interactive Demo

Simple time clock app

This app uses cookies / local storage and Ajax for some persistance and calculations. While this could be done differenly, I have chosen local storage so demo could be tested without storing anything on the server. Also the goal was to demonstrate usage of various frontend and backend technologies as is often real case with web apps.

This simple app helps to solve problem many of employees have with flexible hours. It can help them answers following questions:

• If I have already worked 15 hours and want to go home at 4pm today, how many hours on average I need to work each day for the rest of the week?
• or: If I clocked in at 8am and will clock out at 1pm taking 15 minutes coffee break, how many hours I have worked today?

Synopsis

Very lightweight application simulating clock hours at work. Uses PHP (called via Ajax), lightweight JavaScript and Pure CSS framework from Yahoo.