I work for a small SOHO (small office/home office) and Ive made a little website to save on printing things out. Now im trying to add a timer for peoples breaks and lunch.
Here is a quick picture i made to help visually describe what i would like.
So there will be 5 sections, Account Creation, Customer Service, Tech Support, Internet Orders, Close Out.
Under each section will be the first and last names of the employees, followed by 2 buttons. BREAK and LUNCH
When we click on the break button, what i would want to happen is it is replaced by a countdown timer starting at 15:00 minutes going down to 00:00. and CONTINUES to go into the negative untill the button is pressed again. That way we can see if they are late or anything.
When we click on the Lunch button, what i would want to happen is the same thing. Replaced by a count down timer starting at 30:00 minutes, going down to zero, and continues into the negatives untill it is pressed again.
Some icing on the cake would be if according to how much longer they have on their clock, their name was highlighted in a color. IE: Break 10min+ is green, 5min+ is yellow. 0min+ is orange. negative is red.
Double icing is if the names would migrate to the top as they went on their break. So all the red names would be at the top, then the orange, then yellow, green, then at the bottom no highlight.
TRIPLE icing is creating a log file that says "EMPLOYEE NAME; DATE & TIME TOOK BREAK (or lunch) DURATION (in minutes) TIME CLOCKED BACK IN(so we can do the math ourselves for the duration if we want to)
I have basic knowledge in HTML 5, so im at a lost of how to start. Ive googled arround quite a bit and i havent found anything that leads me in the correct direction. Any help (or the exact code :D ) would be much appreciated!