Roman V.
Casupang
BSIT-4C
ACTIVITY 1
Const http = require(‘http’);
Const fs = require(‘fs’);
Const path = require(‘path’);
Const PORT = 3000;
// Helper functions for handling responses
Const respondWithText = (res, status, content) => {
Res.writeHead(status, { ‘Content-Type’: ‘text/plain’ });
Res.end(content);
};
Const respondWithJson = (res, status, data) => {
Res.writeHead(status, { ‘Content-Type’: ‘application/json’ });
Res.end(JSON.stringify(data));
};
Const respondWithHtml = (res, status, content) => {
Res.writeHead(status, { ‘Content-Type’: ‘text/html’ });
Res.end(content);
};
// Request handlers
Const handleHomePage = (res) => {
respondWithText(res, 200, ‘Welcome to the Home Page’);
};
Const handleJsonResponse = (res) => {
respondWithJson(res, 200, { message: ‘Hello, JSON world!’ });
};
Const handleHtmlPage = (res) => {
Const htmlContent = `
<html>
<head>
<title>Personal Info</title>
<style>
Body {
Font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
Background: #e0f7fa; /* Light blue background */
Color: #333;
Display: flex;
Justify-content: center;
Align-items: center;
Height: 100vh;
Margin: 0;
}
.profile-card {
Background: linear-gradient(145deg, #00bcd4, #006064); /*
Teal gradient */
Border-radius: 15px;
Box-shadow:
5px 5px 15px rgba(0, 0, 0, 0.2),
-5px -5px 15px rgba(0, 188, 212, 0.5);
Max-width: 380px;
Width: 100%;
Text-align: center;
Padding: 25px;
Color: #fff;
}
.profile-card .header {
Background: #00838f; /* Darker teal */
Padding: 15px;
Border-radius: 8px;
Margin-bottom: 15px;
Box-shadow: 0px 0px 10px rgba(0, 131, 143, 0.5);
}
.profile-card .header h1 {
Color: #ffffff;
Font-size: 1.8em;
Margin: 0;
}
.profile-card .info-section {
Padding: 15px;
}
.profile-card .info-section p {
Font-size: 1em;
Color: #b2ebf2;
Margin: 0.5em 0;
Transition: color 0.3s ease;
}
.profile-card .info-section p:hover {
Color: #004d40; /* Slightly darker teal */
}
.profile-card .info-section .info-label {
Font-weight: bold;
Color: #ffffff;
}
.divider {
Height: 1px;
Background: #4dd0e1;
Margin: 20px 0;
Box-shadow: 0px 0px 8px rgba(77, 208, 225, 0.4);
}
</style>
</head>
<body>
<div class=”profile-card”>
<div class=”header”>
<h1>Roman V. Casupang</h1>
</div>
<div class=”info-section”>
<p><span class=”info-label”>Course:</span> BSIT4-C</p>
<div class=”divider”></div>
<p><span class=”info-label”>Age:</span> 22 y/o</p>
<div class=”divider”></div>
<p><span class=”info-label”>Location:</span>POBLACION,
URBIZTONDO, PANGASINAN</p>
<div class=”divider”></div>
<p><span class=”info-label”>Gender:</span> Male</p>
</div>
</div>
</body>
</html>
`;
respondWithHtml(res, 200, htmlContent);
};
Const handleJsonPost = (req, res) => {
Let body = ‘’;
If (req.headers[‘content-type’] !== ‘application/json’) {
Return respondWithJson(res, 400, { error: ‘Invalid content-type.
Expected application/json’ });
}
Req.on(‘data’, chunk => {
Body += chunk.toString();
});
Req.on(‘end’, () => {
Try {
Const jsonData = JSON.parse(body);
respondWithJson(res, 200, { message: ‘Data received successfully’,
data: jsonData });
} catch (error) {
respondWithJson(res, 400, { error: ‘Invalid JSON format’ });
}
});
};
Const handleNotFound = (res) => {
respondWithText(res, 404, ‘404 Not Found’);
};
// Main server
Const server = http.createServer((req, res) => {
If (req.method === ‘GET’ && req.url === ‘/’) {
handleHomePage(res);
} else if (req.method === ‘GET’ && req.url === ‘/json’) {
handleJsonResponse(res);
} else if (req.method === ‘GET’ && req.url === ‘/html’) {
handleHtmlPage(res);
} else if (req.method === ‘POST’ && req.url === ‘/submit’) {
handleJsonPost(req, res);
} else {
handleNotFound(res);
}
});
// Start server
Server.listen(PORT, () => {
Console.log(`Server running at http://localhost:${PORT}/`);
});
