HangerThem/P2B-WEB-2026_2025
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Block 01, Week 01 added a bit of styling

Browse source
This commit is contained in:
HangerThem 2026-05-25 17:10:08 +02:00
parent 1934ea0c44
commit d686066339
2 changed files with 97 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
block-01/week-01-the_web_under_the_hood/demo/public/style.css Normal file
View file

@ -0,0 +1,76 @@
* {
font-family: "Courier New", Courier, monospace;
box-sizing: border-box;
}
body {
background-color: #040b04;
color: #7cff7c;
text-shadow: 0 0 5px rgba(124, 255, 124, 0.35);
line-height: 1.5;
margin: 0;
padding: 24px;
}
h1 {
color: #a8ff9f;
text-shadow: 0 0 8px rgba(124, 255, 124, 0.55);
}
p {
color: #7cff7c;
font-size: 18px;
}
a {
color: #9fffa0;
text-decoration: underline;
}
a:hover {
color: #d6ffd6;
}
ul {
list-style-type: square;
padding-left: 24px;
}
::selection {
background: rgba(124, 255, 124, 0.25);
color: #ffffff;
}
form {
margin-top: 16px;
max-width: 400px;
}
label {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
input {
padding: 8px;
border: 1px solid #7cff7c;
background-color: transparent;
color: #7cff7c;
font-size: 16px;
outline: none;
}
button {
padding: 10px 16px;
background-color: #7cff7c;
color: #040b04;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #9fffa0;
}

31
block-01/week-01-the_web_under_the_hood/demo/server.ts
View file

@ -24,9 +24,13 @@ app.use((req, res, next) => {
next()
})
// Serve static files from the "public" directory (for CSS, images, etc.)
app.use(express.static("public"))
// Simple GET: echoes request info back as HTML
app.get("/", (req, res) => {
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>HTTP Echo Server</h1>
<p>Check your terminal — the server printed everything it received.</p>
<h2>Try these:</h2>
@ -35,6 +39,8 @@ app.get("/", (req, res) => {
<li><a href="/set-cookie">Set a cookie</a></li>
<li><a href="/show-cookies">Show cookies the server received</a></li>
<li><a href="/json">JSON response</a></li>
<li><a href="/delay">Delayed response</a></li>
<li><a href="/status">HTTP status codes</a></li>
</ul>
`)
})
@ -42,10 +48,11 @@ app.get("/", (req, res) => {
// Form page: allows to submit a POST and see the body
app.get("/form", (req, res) => {
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>Login Form</h1>
<form method="POST" action="/login">
<label>Username: <input name="username" type="text" /></label><br/><br/>
<label>Password: <input name="password" type="password" /></label><br/><br/>
<label>Username: <input name="username" type="text" /></label>
<label>Password: <input name="password" type="password" /></label>
<button type="submit">Login</button>
</form>
<p>Submit this and watch the terminal. Also check DevTools → Network tab.</p>
@ -56,6 +63,7 @@ app.get("/form", (req, res) => {
app.post("/login", (req, res) => {
const { username, password } = req.body
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>Server received your POST</h1>
<p><strong>Username:</strong> ${username}</p>
<p><strong>Password:</strong> ${password}</p>
@ -71,6 +79,7 @@ app.get("/set-cookie", (req, res) => {
maxAge: 60 * 60 * 1000, // 1 hour
})
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>Cookie Set</h1>
<p>The server sent a <code>Set-Cookie</code> header. Check DevTools → Network → Response Headers.</p>
<p>Now visit <a href="/show-cookies">show-cookies</a> — the browser will automatically send it back.</p>
@ -81,6 +90,7 @@ app.get("/set-cookie", (req, res) => {
app.get("/show-cookies", (req, res) => {
const cookieHeader = req.headers["cookie"] || "none"
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>Cookies the server received</h1>
<p><code>Cookie: ${cookieHeader}</code></p>
<p>The browser sent this automatically — you didn't write any JavaScript for that.</p>
@ -100,15 +110,17 @@ app.get("/json", (req, res) => {
// Delayed response: simulates a slow server
app.get("/delay", (req, res) => {
setTimeout(() => {
res.send(
"<h1>Delayed Response</h1><p>This response was delayed by 5 seconds.</p>",
)
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>Delayed Response</h1><p>This response was delayed by 5 seconds.</p>
`)
}, 5000)
})
// Show all the different HTTP status codes
app.get("/status", (req, res) => {
res.send(`
<link rel="stylesheet" href="/style.css" />
<h1>HTTP Status Codes</h1>
<h2>2xx Success</h2>
<ul>
@ -155,11 +167,10 @@ app.get("/status", (req, res) => {
// Demonstrates different status codes
app.get("/status/:code", (req, res) => {
const code = parseInt(req.params.code)
res
.status(code)
.send(
`<h1>Status ${code}</h1><p>This response was sent with HTTP status ${code} (${status[code as keyof typeof status]}).</p>`,
)
res.status(code).send(`
<link rel="stylesheet" href="/style.css" />
<h1>Status ${code}</h1><p>This response was sent with HTTP status ${code} (${status[code as keyof typeof status]}).</p>
`)
})
app.listen(3000, () => {