โฒ Clock Tools in your Address bar (Bookmarklets)
I'm a software engineer in Hawaii w/8 yrs exp that builds small projects and games in JavaScript.
I also respond to student career interviews and I am fairly active on Quora. If you're just starting out and want to chat, reach out. I've been there before and I wish I had someone in the industry to chat with.
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(':')`">โ
