⏲ Clock Tools in your Address bar (Bookmarklets)

For the past year or so, I have gotten fascinated with having small apps using HTML, CSS, JavaScript that I can execute within the address bar. I'm not sure if there is an official name for these apps; I like to call them "Bookmarklets," but I suppose "Address Bar Apps" works too.

There's just something about having an app you don't need to load some massive, ad-riddled website to perform one or a few simple tasks. You also don't have to save it to a file, you can instead save it as a bookmark.

To run the following code snippets, copy-paste them into your address bar and save them as a bookmark to use again for future reference.

⏱ Running Timer 196b

data:text/html,<center id=o style=font:20vw/96vh'><svg onload="w=_=>new Date;s=w();setInterval`t=w()-s;o.innerHTML=[36e5,6e4,1e3,10].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`">

⏱ Running Timer (less dramatic) 193b

It doesn't have the milliseconds.

data:text/html,<center id=o style=font:20vw/96vh'><svg onload="w=_=>new Date;s=w();setInterval`t=w()-s;o.innerHTML=[36e5,6e4,1e3].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`">

⏳ 5-minute Timer (🔈 no sound) 201b

Adjust the time at "3e5" which equates to 300,000 ms. 60k ms is one minute.

data:text/html,<center id=o style=font:20vw/96vh'><svg onload="w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);o.innerHTML=[36e5,6e4,1e3].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`">

⏳ 5-minute Timer (w/🔊 Beep) 360b

Adjust the time at "3e5" which equates to 300,000 ms. 60k ms is one minute.

Click to start and restart timer.

data:text/html,<center id=o style=font:20vw/96vh' onclick="a=0;p=_=>{a=1;d=new AudioContext();l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),1e3)};w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);if(t<=0&&!a)p();o.innerHTML=[36e5,6e4,1e3].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`">5m

Same but uses an emoji. 378b

data:text/html,<meta charset=utf8><center id=o style=font:20vw/96vh' onclick="a=0;p=_=>{a=1;d=new AudioContext();l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),1e3)};w=_=>new Date();s=w();setInterval`t=3e5-(w()-s);if(t<=0&&!a)p();o.innerHTML=[36e5,6e4,1e3].map(u=>{v=t>=u?~~(t/u):0;t%=u;return v>9?v:'0'+v}).join(':')`">⌚