Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


HTML 5 Break and Lunch calculator?

  • Please log in to reply
No replies to this topic

#1 Steakboy


  • Members
  • 22 posts
  • Local time:04:58 PM

Posted 09 May 2017 - 02:34 PM

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!

BC AdBot (Login to Remove)


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users