My buddy recently purchased a "sunrise alarm clock" that gradually brightens to mimic a sunrise and make waking up easier.
I had the thought of replicating this effect with my laptop, but I've been facing issues with getting the JavaScript time function to work correctly. Any assistance in making this concept a reality would be greatly appreciated.
I've been attempting to adjust the minutes value (wakeupM) based on how long I intend to sleep, aiming to delay the setTimeout function until it's time to wake up. However, my goal is to set a specific time in the input box and have the "sunrise" feature activate only when that time arrives.
Thanks in advance for your help!
var countTime;
function mySleep() {
var now = new Date();
var nowM = now.getMinutes();
var wakeup = new Date();
var wakeupM = wakeup.getMinutes() + 3;
var timeDif = wakeupM - nowM;
countTime = 6000 * timeDif;
document.getElementById("settime").innerHTML = countTime;
}
function mySunrise() {
var colors = ['orange', 'yellow', 'white'];
var active = 0;
setInterval(function() {
document.querySelector('body').style.background = colors[active];
active++;
if (active == colors.length) active = 0;
}, 3000);;
}body {
background: green;
/* initial color */
transition: background 5s;
/* .5s how long transition should take */
}<input type="time" id="myTime" value="22:15:00">
<button onclick="setTimeout(mySunrise, countTime); mySleep();">Wake me up</button>
<h1>waking you up at:</h1>
<p id="settime"></p>