const defaultTemp = 5500 function colorTemperatureToRGB(kelvin) { // https://gist.github.com/paulkaplan/5184275 let temp = kelvin / 100 let red, green, blue if (temp <= 66) { red = 255 green = temp green = 99.4708025861 * Math.log(green) - 161.1195681661 if (temp <= 19) { blue = 0 } else { blue = temp-10 blue = 138.5177312231 * Math.log(blue) - 305.0447927307 } } else { red = temp - 60 red = 329.698727446 * Math.pow(red, -0.1332047592) green = temp - 60 green = 288.1221695283 * Math.pow(green, -0.0755148492) blue = 255 } return { r : clamp(red, 0, 255), g : clamp(green, 0, 255), b : clamp(blue, 0, 255), } } function clamp(x, min, max) { if (xmax) {return max} return x } function changeTemp(e) { let tempIn = document.querySelector("#temp") let tempOut = document.querySelector("#tempOut") let temp if (!e) { temp = localStorage.temp || defaultTemp } else if (e.target) { temp = Number(e.target.value) } else { temp = e } let color = colorTemperatureToRGB(temp) document.body.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")" tempOut.textContent = temp tempIn.value = temp localStorage.temp = temp } function keydownEvent(event) { let temp = Number(localStorage.temp || defaultTemp) switch (event.key) { case "ArrowLeft": case "ArrowDown": event.preventDefault() changeTemp(temp - 100) break case "ArrowRight": case "ArrowUp": event.preventDefault() changeTemp(temp + 100) break } console.log("new temp is", temp) } function init() { document.querySelector("#temp").addEventListener("input", changeTemp) document.addEventListener("keydown", keydownEvent) changeTemp() if (navigator.serviceWorker) { navigator.serviceWorker.register("sw.js") } } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init) } else { init() }