Keyboard Event Logger

\n {events.map((event, index) => (\n

\n {event.timestamp}\n {event.type}\n \n Key: {event.key}, Code: {event.code}, KeyCode: {event.keyCode}\n \n \n Ctrl: {event.ctrlKey.toString()}, \n Alt: {event.altKey.toString()}, \n Shift: {event.shiftKey.toString()}, \n Meta: {event.metaKey.toString()}\n \n Repeat: {event.repeat.toString()}\n

\n ))}\n

Start typing to see keyboard events logged above.

\n View source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Keyboard Event Logger\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\nh1 {\n color: #333;\n}\n.log {\n height: 400px;\n overflow-y: auto;\n border: 1px solid #ccc;\n padding: 10px;\n margin-bottom: 20px;\n font-family: monospace;\n background-color: #f8f8f8;\n}\n.log-entry {\n margin-bottom: 5px;\n padding: 5px;\n border-bottom: 1px solid #eee;\n}\n.timestamp {\n color: #888;\n margin-right: 10px;\n}\n.event-type {\n font-weight: bold;\n margin-right: 10px;\n}\n.keydown { color: #4CAF50; }\n.keyup { color: #F44336; }\n.keypress { color: #2196F3; }\n.key-info, .modifiers, .repeat {\n margin-right: 10px;\n}\np {\n color: #666;\n}\na {\n color: #0066cc;\n text-decoration: none;\n}\na:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/curtcox/keyboardEventLogger/code/main.tsx","extension","actionData","errors"]