Skip to content

Instantly share code, notes, and snippets.

@lewdev
Last active June 9, 2023 02:05
Show Gist options
  • Select an option

  • Save lewdev/a749ed1bbaedebbcac8d918b01a68c46 to your computer and use it in GitHub Desktop.

Select an option

Save lewdev/a749ed1bbaedebbcac8d918b01a68c46 to your computer and use it in GitHub Desktop.
⏲ Alarm Clock in 25 lines and bookmarklet

⏲ Alarm Clock Bookmarklet (584b)

This tiny app displays a clock and a dropdown of the hour and minute for the alarm time. The borderless input field is there so you can add the purpose of the alarm.

When the hour and time match, the text will flash red and beeping will persist until the hour and minute no longer match the dropdown values.

data:text/html,Alarm<select id=h></select>:<select id=m></select> <input style=border:0><body onload='p=u=>(u>9?"":"0")+u;b=_=>{d=new AudioContext;l=d.createOscillator();l.frequency.value=800;l.connect(d.destination);l.start();setTimeout(()=>l.stop(),500)};u=n=>Array(n).fill().map((_,i)=>`<option>${p(i)}</option>`).join``;h.innerHTML=u(24);m.innerHTML=u(60);setInterval(()=>{d=new Date;a=[H,M,S]=[d.getHours(),d.getMinutes(),d.getSeconds()].map(p);e=H===h.value&&M===m.value;if(e)b();o.style.color=(e&&S%2?"red":"");o.innerHTML=a.join`:`;},1000)'><center id=o style=font:25vw/90vh'>

In this bookmarklet, I was able to put all code into the onload in the <body> tag to save a lot of

Alarm <select id=h></select>:<select id=m></select> <input style=border:0>
<script>
p = u => (u > 9 ? "" : "0") + u;
b = _ => { //plays a sound for half a second
d = new AudioContext;
l = d.createOscillator();
l.frequency.value = 800;
l.connect(d.destination);
l.start();
setTimeout(() => l.stop(), 500)
};
u = n => Array(n).fill().map((_,i)=>`<option>${p(i)}</option>`).join``;
h.innerHTML = u(24); // populate the dropdowns
m.innerHTML = u(60);
setInterval(() => {
d = new Date;
a = [H, M, S] = [d.getHours(), d.getMinutes(), d.getSeconds()].map(p);
e = H === h.value && M === m.value;
if (e) b();
o.style.color = (e && S % 2 ? "red" : "");
o.innerHTML = a.join`:`;
}, 1000)
</script>
<center id=o style=font:20vw/90vh'>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment