68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
const toggle = document.getElementById('toggle');
|
|
const track = document.getElementById('track');
|
|
const knob = document.getElementById('knob');
|
|
const rays = document.getElementById('rays');
|
|
const stateLabel = document.getElementById('state-label');
|
|
const themeRoot = document.getElementById('themeRoot');
|
|
|
|
let isDay = true;
|
|
|
|
const RAY_COUNT = 8;
|
|
for (let i = 0; i < RAY_COUNT; i++) {
|
|
const r = document.createElement('div');
|
|
r.className = 'ray';
|
|
r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
|
|
rays.appendChild(r);
|
|
}
|
|
|
|
function applyState() {
|
|
if (isDay) {
|
|
track.className = 'track day';
|
|
knob.className = 'knob day';
|
|
toggle.setAttribute('aria-checked', 'true');
|
|
themeRoot.classList.remove('night');
|
|
} else {
|
|
track.className = 'track night';
|
|
knob.className = 'knob night';
|
|
toggle.setAttribute('aria-checked', 'false');
|
|
themeRoot.classList.add('night');
|
|
}
|
|
}
|
|
|
|
toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
|
|
toggle.addEventListener('keydown', e => {
|
|
if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
|
|
});
|
|
|
|
function copyClass() {
|
|
navigator.clipboard.writeText(classOut.textContent).catch(() => {});
|
|
}
|
|
// just some fun.
|
|
console.log("%c👀 hi there!", "font-size:20px")
|
|
|
|
|
|
|
|
// about.js
|
|
function closeOverlay() {
|
|
document.getElementById('overlay').style.display = 'none';
|
|
}
|
|
|
|
// or toggle it from anywhere:
|
|
function openOverlay() {
|
|
document.getElementById('overlay').style.display = 'flex';
|
|
}
|
|
|
|
function InterestShow() {
|
|
const body = document.getElementById('interests-body');
|
|
const chevron = document.getElementById('interests-chevron');
|
|
chevron.classList.add("hidden")
|
|
body.classList.remove("hidden")
|
|
chevron.textContent = hidden ? '▶' : '▼';
|
|
}
|
|
|
|
function toggleInterests() {
|
|
const body = document.getElementById('interests-body');
|
|
const chevron = document.getElementById('interests-chevron');
|
|
const hidden = body.classList.toggle('hidden');
|
|
chevron.textContent = hidden ? '▶' : '▼';
|
|
} |