🧮 Kindergarten Addition Game

\n {num1} + {num2} = ?\n

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n background-color: #f0f8ff;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.container {\n background-color: white;\n border-radius: 20px;\n padding: 2rem;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\nh1 {\n color: #4a4a4a;\n margin-bottom: 1rem;\n}\n\n.problem {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n color: #2c3e50;\n}\n\ninput {\n font-size: 1.5rem;\n padding: 0.5rem;\n width: 100px;\n margin-right: 0.5rem;\n border: 2px solid #3498db;\n border-radius: 5px;\n}\n\nbutton {\n font-size: 1.2rem;\n padding: 0.5rem 1rem;\n background-color: #2ecc71;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #27ae60;\n}\n\n.message {\n margin-top: 1rem;\n font-size: 1.2rem;\n font-weight: bold;\n min-height: 1.5em;\n}\n\n.score {\n margin-top: 1rem;\n font-size: 1.2rem;\n color: #3498db;\n}\n\n.new-problem {\n margin-top: 1rem;\n background-color: #3498db;\n}\n\n.new-problem:hover {\n background-color: #2980b9;\n}\n\n.view-source {\n display: inline-block;\n margin-top: 1rem;\n font-size: 0.9rem;\n color: #7f8c8d;\n text-decoration: none;\n}\n\n.view-source:hover {\n text-decoration: underline;\n}\n\n@keyframes glitter {\n 0% {\n background-position: 0 0, 0 0;\n }\n 100% {\n background-position: 100% 100%, 0 0;\n }\n}\n\n.glitter::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n right: -50%;\n bottom: -50%;\n background: \n linear-gradient(45deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%),\n linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%);\n background-size: 200% 200%, 200% 200%;\n animation: glitter 0.5s ease-in-out infinite;\n z-index: -1;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/efoley/SimpleAddition/code/main.tsx","extension","actionData","errors"]