/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import confetti from "https://esm.sh/canvas-confetti@1.6.0"; function App() { const [checklist, setChecklist] = useState([ { id: 1, text: "Slept enough", checked: false }, { id: 2, text: "Drank enough water", checked: false }, { id: 3, text: "Ate balanced meals", checked: false }, { id: 4, text: "Exercised recently", checked: false }, { id: 5, text: "Managed stress levels", checked: false }, ]); const handleCheck = (id) => { setChecklist(checklist.map(item => item.id === id ? { ...item, checked: !item.checked } : item )); }; useEffect(() => { if (checklist.every(item => item.checked)) { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); } }, [checklist]); return (

Why am I tired? 😴

Make sure you don't forget the obvious subjects

{checklist.map(item => ( handleCheck(item.id)} /> {item.text} ))}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Why am I tired?

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #3498db; margin-bottom: 0.5rem; } h2 { color: #7f8c8d; font-size: 1rem; margin-bottom: 1.5rem; } .checklist { text-align: left; } .checklist-item { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 18px; user-select: none; } .checklist-item input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 5px; } .checklist-item:hover input ~ .checkmark { background-color: #ccc; } .checklist-item input:checked ~ .checkmark { background-color: #2ecc71; } .checkmark:after { content: ""; position: absolute; display: none; } .checklist-item input:checked ~ .checkmark:after { display: block; } .checklist-item .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } .footer { margin-top: 1rem; font-size: 0.8rem; } .footer a { color: #3498db; text-decoration: none; } .footer a:hover { text-decoration: underline; } `;

saleh