diff --git a/handler.js b/handler.js index 212968b..8c49335 100644 --- a/handler.js +++ b/handler.js @@ -1,10 +1,26 @@ -app: nodejs-docker-app-sample -region: asia-south1 -entrypoint: "index.js" +function toNumber(value) { + const n = Number(value); + return Number.isFinite(n) ? n : 0; +} -build: - builtin: dockerfile - ignorefile: .gitignore +function updateSum() { + const aEl = document.getElementById("numA"); + const bEl = document.getElementById("numB"); + const resultEl = document.getElementById("result"); -env: - PORT: '8080' \ No newline at end of file + if (!aEl || !bEl || !resultEl) return; + + const sum = toNumber(aEl.value) + toNumber(bEl.value); + resultEl.value = String(sum); +} + +document.addEventListener("input", (e) => { + const target = e.target; + if (!(target instanceof HTMLElement)) return; + if (target.id !== "numA" && target.id !== "numB") return; + updateSum(); +}); + +document.addEventListener("DOMContentLoaded", () => { + updateSum(); +}); diff --git a/index.html b/index.html index 464aed7..b041487 100644 --- a/index.html +++ b/index.html @@ -15,15 +15,83 @@ place-items: center; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; + padding: 24px; } h1 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.03em; margin: 0; } + .card { + width: min(520px, 100%); + border: 1px solid color-mix(in oklab, CanvasText 18%, transparent); + border-radius: 14px; + padding: 18px; + } + .stack { + display: grid; + gap: 14px; + } + .row { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 12px; + } + label { + display: grid; + gap: 6px; + font-size: 0.95rem; + } + input { + width: 100%; + padding: 10px 12px; + border-radius: 10px; + border: 1px solid color-mix(in oklab, CanvasText 18%, transparent); + background: Canvas; + color: CanvasText; + font-size: 1rem; + } + .op { + font-size: 1.6rem; + opacity: 0.8; + padding-top: 22px; + } + .result { + display: grid; + gap: 6px; + font-size: 0.95rem; + } + .hint { + opacity: 0.7; + font-size: 0.9rem; + line-height: 1.35; + } -

Hello World

+
+

Hello World

+ +
+ + + +
+ +
+ Result + +
Type in either box to instantly see the sum.
+
+
+ + diff --git a/server.js b/server.js new file mode 100644 index 0000000..c5b2e6d --- /dev/null +++ b/server.js @@ -0,0 +1,58 @@ +const http = require("node:http"); +const fs = require("node:fs"); +const path = require("node:path"); + +const PORT = Number.parseInt(process.env.PORT ?? "8080", 10) || 8080; + +function sendText(res, statusCode, text) { + res.writeHead(statusCode, { "Content-Type": "text/plain; charset=utf-8" }); + res.end(text); +} + +function sendFile(res, filePath, contentType) { + fs.readFile(filePath, (err, data) => { + if (err) { + sendText(res, 500, "Internal Server Error"); + return; + } + res.writeHead(200, { + "Content-Type": contentType, + "Cache-Control": "no-store", + }); + res.end(data); + }); +} + +const server = http.createServer((req, res) => { + if (req.method !== "GET") { + sendText(res, 405, "Method Not Allowed"); + return; + } + + const url = req.url ?? "/"; + + if (url === "/" || url === "/index.html") { + sendFile( + res, + path.join(__dirname, "index.html"), + "text/html; charset=utf-8", + ); + return; + } + + if (url === "/handler.js") { + sendFile( + res, + path.join(__dirname, "handler.js"), + "text/javascript; charset=utf-8", + ); + return; + } + + sendText(res, 404, "Not Found"); +}); + +server.listen(PORT, "0.0.0.0", () => { + // eslint-disable-next-line no-console + console.log(`Server running on http://0.0.0.0:${PORT}`); +});