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.

Verifying this POSTMAN (not necessary for now_

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

⁠

https://www.dropbox.com/request/nepGQ7DZQa9GBNjxiA8D⁠

⁠

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

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.