Reverse Clock Bookmarklet

E Sreedharan, also known as "Metro Man," is said to have installed reverse clocks in the offices and work sites of Konkan Railways and the Delhi Metro Rail Corporation (DMRC) to create a sense of urgency among team members and encourage them to work towards their goals without wasting any time.

Inspired by this approach, I decided to create a Reverse Clock Bookmarklet to help me allocate time for my daily tasks and improve my ability to estimate how much time I need to complete them. By visually counting down the minutes and seconds, it would also cultivate a heightened awareness of the precious moments slipping away.

To use this bookmarklet, create a new bookmark in your browser and paste the above code as the URL. Then, navigate to any webpage and click the bookmark(let) to activate the countdown. 

You'll be prompted to input the number of minutes you want the reverse clock to run for. A reverse clock with a semi-transparent black background and white text will appear in the top right corner of the page, counting down from the number of minutes you entered. The clock displays the remaining time in hours, minutes, and seconds, and updates every second. The current date and time are also displayed.

It won't disappear or move when you scroll the page but you can make it go away if you want by refreshing the page.

This handy tool counts down the time you set, helping you stay focused and improve your estimation skills for tasks like reading articles, watching videos, or completing online assignments. 

I co-created this bookmarklet with the help of AI assistants.

Code Explanation (refer to the code for line numbers to follow along):

1. This line starts the self-invoking function.

2. Declare variables and creates a div element: This element will hold the countdown timer and styles it to cover the entire page with a semi-transparent background.

3. Sets the id of the created div to "revClock".

4. By adding position:fixed; to the CSS, the div element will remain fixed at the specified position (top:10px and right:10px) relative to the viewport, even when the user scrolls the page. The z-index:9999; ensures that the div remains on top of other elements on the page.

5. document.body.appendChild(f); - Appends the created div to the document body.

7. Prompts for input: Asks the user to enter the number of minutes for the countdown and assigns it to variable t.

13. ts = parseInt(t) * 60; - Converts the input minutes to seconds and assigns it to variable ts, time in seconds.

14. u = function() { ... } - Defines a function u that updates the countdown timer and current time.

15. h = Math.floor(ts / 3600); - Calculates the hours from the input seconds and assigns it to variable r.

16. m = Math.floor((ts % 3600) / 60); - Calculates the remaining minutes from the input seconds and assigns it to variable m.

35. c = setInterval(u, 1000); - Calls the function c (countdown) every second to update the countdown timer.

36. u(); - Immediately calls the function u to initialize the countdown timer.

37. })() - Closes the self-invoking function and immediately invokes it.