Current Time

/** @jsxImportSource https://esm.sh/preact */ import { h, render } from "https://esm.sh/preact"; import { useState, useEffect } from "https://esm.sh/preact/hooks"; import htm from "https://esm.sh/htm"; const html = htm.bind(h); function App() { const [time, setTime] = useState(new Date()); useEffect(() => { const timer = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(timer); }, []); const formattedTime = time.toTimeString().split(' ')[0]; return html`

${formattedTime}

`; } function client() { render(h(App, {}), document.getElementById("root")); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Current Time

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #root { text-align: center; background-color: white; padding: 2em; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { margin: 0; } `;

HTTP_digitalClock

Version 2