PI Clock
PI Clock
Supplies
- Text editor, web viewer
Code to Build the HTML Page
PI is a special number we all like and love.
With this page you will be able to keep track on how many PI-hours have passed today.
Taking this code and making it into a .html file will let you open it and use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PI Time</title>
<style>
:root {
color-scheme: dark;
--bg1: #0f172a;
--bg2: #020617;
--text: #f8fafc;
--muted: #94a3b8;
--accent: #a78bfa;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
padding: 24px;
background:
radial-gradient(circle at top, rgba(167, 139, 250, 0.18), transparent 35%),
linear-gradient(180deg, var(--bg1), var(--bg2));
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wrap {
text-align: center;
width: min(100%, 1100px);
}
.pi-value {
font-size: clamp(3rem, 12vw, 8.5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
text-wrap: balance;
text-shadow: 0 0 32px rgba(167, 139, 250, 0.18);
}
.label {
margin-top: 18px;
font-size: clamp(0.95rem, 2.3vw, 1.4rem);
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.actual-time {
margin-top: 10px;
font-size: clamp(0.9rem, 2vw, 1.1rem);
color: color-mix(in srgb, var(--muted) 85%, white 15%);
}
.accent {
color: var(--accent);
}
</style>
</head>
<body>
<main class="wrap" aria-live="polite">
<div id="piValue" class="pi-value">0.000000 <span class="accent">PI</span></div>
<div class="label">Hours passed today divided by π</div>
<div id="actualTime" class="actual-time"></div>
</main>
<script>
const piValueEl = document.getElementById('piValue');
const actualTimeEl = document.getElementById('actualTime');
function formatClock(date) {
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
function update() {
const now = new Date();
const midnight = new Date(now);
midnight.setHours(0, 0, 0, 0);
const elapsedMs = now - midnight;
const piHours = elapsedMs / (Math.PI * 60 * 60 * 1000);
piValueEl.innerHTML = `${piHours.toFixed(6)} <span class="accent">PI</span>`;
actualTimeEl.textContent = `Local time: ${formatClock(now)}`;
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>