testing
This commit is contained in:
parent
60e25685ee
commit
8ccea88f08
32
handler.js
32
handler.js
|
|
@ -1,10 +1,26 @@
|
||||||
app: nodejs-docker-app-sample
|
function toNumber(value) {
|
||||||
region: asia-south1
|
const n = Number(value);
|
||||||
entrypoint: "index.js"
|
return Number.isFinite(n) ? n : 0;
|
||||||
|
}
|
||||||
|
|
||||||
build:
|
function updateSum() {
|
||||||
builtin: dockerfile
|
const aEl = document.getElementById("numA");
|
||||||
ignorefile: .gitignore
|
const bEl = document.getElementById("numB");
|
||||||
|
const resultEl = document.getElementById("result");
|
||||||
|
|
||||||
env:
|
if (!aEl || !bEl || !resultEl) return;
|
||||||
PORT: '8080'
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
|
|
||||||
68
index.html
68
index.html
|
|
@ -15,15 +15,83 @@
|
||||||
place-items: center;
|
place-items: center;
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
|
||||||
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
padding: 24px;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(2rem, 6vw, 4rem);
|
font-size: clamp(2rem, 6vw, 4rem);
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
margin: 0;
|
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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="card stack">
|
||||||
<h1>Hello World</h1>
|
<h1>Hello World</h1>
|
||||||
|
|
||||||
|
<div class="row" aria-label="Addition inputs">
|
||||||
|
<label>
|
||||||
|
Number A
|
||||||
|
<input id="numA" type="number" inputmode="numeric" placeholder="e.g. 10" />
|
||||||
|
</label>
|
||||||
|
<div class="op" aria-hidden="true">+</div>
|
||||||
|
<label>
|
||||||
|
Number B
|
||||||
|
<input id="numB" type="number" inputmode="numeric" placeholder="e.g. 5" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result" aria-label="Result">
|
||||||
|
Result
|
||||||
|
<input id="result" type="text" readonly value="0" />
|
||||||
|
<div class="hint">Type in either box to instantly see the sum.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="/handler.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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}`);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user