Time clock machine.

From lucasoft.info with love by Rad

...

AJAX RESPONSE

...

How to use this app

  • Top row, 3 input boxes is default setup of woek week, 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 is for solving problem many of employees have with flexi hours face. It can help them answers following questions:

  • If I have alredy 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 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 yet modern app simulating clock hours at work. Uses PHP (called via Ajax), lightweight JavaScript and Pure css framework from Yahoo.