index.js :-
const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const home = fs.readFileSync('index.html')
const about = fs.readFileSync('./about.html')
const services = fs.readFileSync('./services.html')
const contact = fs.readFileSync('./contact.html')
const server = http.createServer((req, res)=>{
console.log(req.url);
url = req.url;
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
if(url == '/'){
res.end(home);
}
else if(url == '/about'){
res.end(about);
}
else if(url == '/services'){
res.end(services);
}
else if(url == '/contact'){
res.end(contact);
}
else{
res.statusCode = 404;
res.end("<h1>404 not found</h1>");
}
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
ul{
display: flex!important;
}
li{
margin: 23px;
list-style: none;
}
</style>
<body>
<nav>
<ul>
<li class="item"><a href="/">Home</a></li>
<li class="item"><a href="/about">About</a></li>
<li class="item"><a href="/services">Services</a></li>
<li class="item"><a href="/contact">Contact</a></li>
</ul>
</nav>
<div class="container">
This is the home
</div>
</body>
</html>
contact.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
ul{
display: flex!important;
}
li{
margin: 23px;
list-style: none;
}
</style>
<body>
<nav>
<ul>
<li class="item"><a href="/">Home</a></li>
<li class="item"><a href="/about">About</a></li>
<li class="item"><a href="/services">Services</a></li>
<li class="item"><a href="/contact">Contact</a></li>
</ul>
</nav>
<div class="container">
This is the contact
</div>
</body>
</html>
services.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
ul{
display: flex!important;
}
li{
margin: 23px;
list-style: none;
}
</style>
<body>
<nav>
<ul>
<li class="item"><a href="/">Home</a></li>
<li class="item"><a href="/about">About</a></li>
<li class="item"><a href="/services">Services</a></li>
<li class="item"><a href="/contact">Contact</a></li>
</ul>
</nav>
<div class="container">
This is the services
</div>
</body>
</html>
about.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<style>
ul{
display: flex!important;
}
li{
margin: 23px;
list-style: none;
}
</style>
<body>
<nav>
<ul>
<li class="item"><a href="/">Home</a></li>
<li class="item"><a href="/about">About</a></li>
<li class="item"><a href="/services">Services</a></li>
<li class="item"><a href="/contact">Contact</a></li>
</ul>
</nav>
<div class="container">
This is the about
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.