zeek67(index.js and index.html ,about.html , services.html , contact.html )

index.js

//In this nodejs we have made a page with fully working navbar by nodejs using custom

 backend.

//Steps to create custom backend

//1- Set (http and fs) setup by require.

//2-Use nodejs site about and copy paste code.

//3-Create html pages and link them to js file by fs.readFileSync

//4-Write url=req url; to create url .

//5- Use if and else statement to create conditions for url to work for different

  pages.

//6-Run the server.

//1- Set (http and fs) setup by require.

const http = require('http');

const fs= require('fs');

const hostname = '127.0.0.1';

const port = 3000;

//Making html pages and linking them

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) => {

//Requesting a url

  console.log(req.url);

  url = req.url;

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/html');

  

  //Setting conditions for different pages url

  

  if (url=="/"){

    res.end(home);   //This means if url is / then display index.html 

  }

 

  else if (url=="/about.html"){

    res.end(about);    

  }

 

  else if (url=="/services.html"){

    res.end(services);    

  }

 

  else if (url=="/contact.html"){

    res.end(contact);    

  }

  

  else{res.statusCode = 404;

      console.log("page not found");}

});

//Running server

server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

});

index.html

<!DOCTYPE html>

<html lang="en">

<!-- Tough Web Learn by doing. -->

<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>

    <style>.....</style> /* bottom of blog*/

</head>

<body>

   

   <header>

    

    <nav class="navBar" >

        <ul> 

            <li> <a href="/">Home</a></li>

                <li> <a href="/about.html">About</a> </li>

                <li> <a href="/services.html">Services</a> </li>

                <li> <a href="/contact.html"> Contact us</a></li>

            </ul>

    </nav>

</header>

<h1>This is Home Page.</h1>

</body>

</html>

about.html

<!DOCTYPE html>

<html lang="en">

<!-- Tough Web Learn by doing. -->

<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>About</title>

    <style>......</style> /* bottom of blog*/

</head>

<body>

   

   <header>

    

    <nav class="navBar" >

        <ul> 

            <li> <a href="/">Home</a></li>

                <li> <a href="/about.html">About</a> </li>

                <li> <a href="/services.html">Services</a> </li>

                <li> <a href="/contact.html"> Contact us</a></li>

            </ul>

    </nav>

</header>

<h1>This is About Page.</h1>

</body>

</html>

services.html

<!DOCTYPE html>

<html lang="en">

<!-- Tough Web Learn by doing. -->

<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>Services</title>

    <style>....</style> /* bottom of blog*/

</head>

<body>

   

   <header>

    

    <nav class="navBar" >

        <ul> 

            <li> <a href="/">Home</a></li>

                <li> <a href="/about.html">About</a> </li>

                <li> <a href="/services.html">Services</a> </li>

                <li> <a href="/contact.html"> Contact us</a></li>

            </ul>

    </nav>

</header>

<h1>This is Services Page.</h1>

</body>

</html>

contact.html

<!DOCTYPE html>

<html lang="en">

<!-- Tough Web Learn by doing. -->

<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>Contact</title>

    <style>....</style> /* bottom of blog*/

</head>

<body>

   

   <header>

    

    <nav class="navBar" >

        <ul> 

            <li> <a href="/">Home</a></li>

                <li> <a href="/about.html">About</a> </li>

                <li> <a href="/services.html">Services</a> </li>

                <li> <a href="/contact.html"> Contact us</a></li>

            </ul>

    </nav>

</header>

<h1>This is Contact Page.</h1>

</body>

</html>

<style>......</style>

   <style>

     h1{padding-left: 600px;

    color: green;}

    .navBar{

    background-color: rgb(165, 165, 223);

    padding: 1px 10px;

    border-radius: 15px; }

         

    .navBar ul{overflow: auto;}

        

    .navBar li{float: left;

    list-style-type: none;

    margin: 2px 10px; }

    .navBar li a{text-decoration: none;

    color: rgb(8, 23, 235);

    font-weight: bold;

    font-size: 23px;}

        

    .navBar li a:hover{background-color: yellow;

    color: rgb(104, 16, 0);}

    </style>