coding snippets

current date & time

html

<p>right now it's <span id="date"></span> <b>♥</b> <span id="time"></span></p>

javascript

function getTime() { d = new Date(); h = d.getHours(); m = d.getMinutes(); s = d.getSeconds(); timeOfDay = h >= 12 ? "PM" : "AM"; h = h > 12 ? h - 12 : h; h = h == 0 ? h + 12 : h; document.getElementById("date").innerHTML = (d.getMonth() + 1).toString().padStart(2, "0") + "/" + d.getDate().toString().padStart(2, "0") + "/" + d.getFullYear(); document.getElementById("time").innerHTML = h.toString().padStart(2, "0") + ":" + m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0") + " " + timeOfDay; } getTime(); setInterval(getTime, 1000);

low contrast overlay

css

change the background rgba values and the hue-rotate amount to get different color effects.

.overlay { position: fixed; top: 0; left: 0; height: clamp(100vh, 100vh, 100vh); width: clamp(100vw, 100vw, 100vw); background: rgba(255, 0, 150, 0.15); background-size: 100% 2px; pointer-events: none; backdrop-filter: sepia(0.5) hue-rotate(360deg); } .hide { display: none; }

html

<div id="overlay" class="overlay hide"></div>

javascript

this will remember what the user selects (localStorage), so next time they visit it will default to on/off.

function getSettings() { mode = localStorage.getItem("mode"); if (mode == "lowcontrast") { document.getElementById('overlay').classList.remove('hide'); current = localStorage.setItem("mode", "lowcontrast"); } else { document.getElementById('overlay').classList.add('hide'); current = localStorage.setItem("mode", "highcontrast"); } } getSettings(); function toggleMode() { mode = localStorage.getItem("mode"); if (mode == "lowcontrast") { document.getElementById('overlay').classList.add('hide'); current = localStorage.setItem("mode", "highcontrast"); } else { document.getElementById('overlay').classList.remove('hide'); current = localStorage.setItem("mode", "lowcontrast"); } }