Share
Explore
s24 CSD3101 Lab 1
This is the lab sheet we did last week to prepare for this:
Assignment Instructions: Node.js Application Development Assignment
Assignment Title: Creating a Web Server using Express.js
**Course:** CSD-3103 - Full Stack JavaScript
**Instructor:** Peter Sigurdson
**Date:** s24 June 19
---
Objective
Develop a web server using Express.js with multiple endpoints demonstrating different use cases.
The aim is to understand the basics of
server-side programming with Node.js and Express.js,
handling HTTP requests, and
providing appropriate responses.
Assignment Instructions:
1. **Setup Visual Studio Environment:**
- Ensure Node.js and npm are installed on your machine.
- Create a new directory for your project and initialize it with `npm init`.
- Install Express.js using `npm install express body-parser`.
2. Create the Server:
- Create a file named `app.js`. → Ensure it is at the root of your project directory, same place as package.json
Goal = - Set up a basic Express.js server that listens on port 3000.
- Include middleware (body-parser) for logging requests and handling JSON data.
3. **Create the API Endpoint for Klingon Jokes:**
- Define a route `/joke` that returns a random Klingon joke in JSON format.
4. Do some static middleware: Create the Public Directory and HTML File:
- Create a `public` directory.
- Inside `public`, create an `index.html` file.
5. **Create Client-side JavaScript and CSS Files:**
- Inside public directory, create `style.css` and `script.js`.
6. ntegrate Client-side with Backend: using HTTP Routes:
- Ensure the HTML form in the BOM connects to the backend Node.js program to fetch and display jokes.
7. **Testing:**
- Test your endpoints using Postman or a similar tool to ensure they work correctly.
8. How to Package this for Submission:
Create the following Documentation:
- Create a Word document.
- Include screenshots of your VS code panels and the terminal showing the server running.
- Include screenshots of Postman (or similar tool) showing the requests and responses for each endpoint.
- Include screenshots of the web interface with the jokes displayed.
9. **Submission:**
- Name the Word Document: StudentName_StudentID.docx with the screenshots to the class portal.
Upload to Dropbox.
Example Code:
app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// List of Klingon jokes
const jokes = [
"A Klingon, a Ferengi, and a Betazoid woman were sitting around in Quark's bar...",
"Q: How many Klingons does it take to change a light bulb? A: None. Klingons aren't afraid of the dark.",
"Klingons do not make software bugs. Their software is perfect from the first compile.",
"Klingon programming does not tolerate error messages."
];
// Middleware to serve static files (HTML, CSS, JS)
app.use(express.static('public'));
app.use(bodyParser.json());
// API endpoint to get a random joke
app.get('/joke', (req, res) => {
const randomIndex = Math.floor(Math.random() * jokes.length);
const joke = jokes[randomIndex];
res.json({ joke });
});
app.listen(port, () => {
console.log(`App listening at http://localhost:${port}`);
});
```
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klingon Jokes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Klingon Jokes</h1>
<button id="jokeButton">Get a New Joke</button>
<p id="jokeDisplay"></p>
<script src="script.js"></script>
</body>
</html>
```
**public/style.css**
```css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#jokeDisplay {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
**public/script.js**
```javascript
document.getElementById('jokeButton').addEventListener('click', () => {
fetch('/joke')
.then(response => response.json())
.then(data => {
document.getElementById('jokeDisplay').innerText = data.joke;
});
});
```
---
Grading Rubric:
---
Important Notes:
- Follow all instructions carefully.
- Ensure your code is well-documented with comments.
- To submit and Present this Lab:
Screen shot all your deliverables of your use cases clearly labeled in the Word document.
Screen shots:
Visual Studio Code
(optional) - Postman showing the output for all end points
Web browser showing your displays of the JOKES
Labeling each section: Copy paste your Code from VSC into your Word Document.
Save your Word Document as StudentName_StudentID.docx
Close and Save your Word Document and upload this Dropbox LINK:
Submission Upload to Moodle Assignment Location
s1 WED PM
- Your work will be evaluated based on functionality, adherence to instructions, and documentation quality.
- Part of your grade will be based on in-class checkpoint reviews by the instructor.
---
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.