In: Computer Science
Write a simple javascript program using express and node.js to create a simple webpage that can lead to other pages within the program. if possible, Comment everything out so I could understand how every things works. But basically, server should be hosted on localhost:8000 and should have a simple starting page. Maybe a welcome message, with at least two "links" that goes to a "homepage" and then a "exit" page.
Answer 1) Below is the javascript program using express and node.js. Below is app.js
// importing the express module
const express = require("express");
const app = express();
// when request is send to home page this returns the home.html
// That is when we type http://localhost:3000/ in URL of browser
app.get("/", function (req, res) {
res.sendFile(__dirname + "/home.html");
});
// When request to contact page that is http://localhost:3000/contact in the URL
app.get("/contact", function (req, res) {
res.sendFile(__dirname + "/contact.html");
});
// When request to about page that is http://localhost:3000/about in the URL
app.get("/about", function (req, res) {
res.sendFile(__dirname + "/about.html");
});
// listen for request.
app.listen(3000, function () {
console.log("server started at port 3000");
});
Code for home page is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This is the home page</title>
</head>
<body>
<h1>This is the Home Page of the Application.</h1>
<h3>Welcome to the Online Aplication</h3>
<button onclick="contactRedirect()">contact page</button>
<button onclick="aboutRedirect()">about page</button>
<script>
function contactRedirect() {
window.location.replace("http://localhost:3000/contact");
}
function aboutRedirect(){
window.location.replace("http://localhost:3000/about");
}
</script>
</body>
</html>
code for contact page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Page</title>
</head>
<body>
<h1>This is the contact Page.</h1>
<h3>Contact me at satwindersinghsaini</h3>
<address>
62 West Street
New York
</address>
</body>
</html>
code for about.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
</head>
<body>
<h1> I am Currently a student of computer Science engineering</h1>
<h4>My hobbies are playing cricket, table tennis and coding.</h4>
</body>
</html>
CODE SCREENSHOTS
1) app.js
2) home.html
3) contact.html
4) about.html
OUTPUT SCREEN SHOTS
1) home page screen shot
2) contact page screen shot