Explore

CSD 3103 - NPM Node Application Development Lab Test

Objective::

Develop a Node.js application that serves a random trivia fact from an array of facts stored in the server file and integrates with a front-end HTML page to display the fact. Additionally, include basic CSS for styling.

Instructions:

Set up the Project:

Ensure Node.js and npm are installed.

Create a new directory for your project and initialize it with npm init -y.

Install necessary packages: express and body-parser.

bash

Copy code

mkdir trivia-facts-app

cd trivia-facts-app

npm init -y

npm install express body-parser

Create the main application file (app.js):

Set up an Express server that serves static files and an API endpoint to fetch a random fact from an array.

Include middleware to handle JSON data.

⁠

Create the Public Directory and HTML File:

Create a public directory and inside it, create an index.html file with a button to fetch a new fact and a paragraph to display it.

Add basic CSS styling for a better user interface.

⁠

Create the Client-side JavaScript (public/script.js):

Add functionality to fetch a fact from the server and display it when the button is clicked.

⁠

Create the CSS file (public/style.css):

Add basic styling for the HTML elements.

css

Copy code

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

}

button {

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

}

#factDisplay {

margin-top: 20px;

font-size: 18px;

color: #333;

}

Run the Application:

Start the server and test your application.

node app.js

Test the Application:

Open your web browser and navigate to http://localhost:3000.

Click the "Get a New Fact" button to fetch and display a random trivia fact.

Submission:

Documentation: Create a Word document including:

Screenshots of your Visual Studio Code panels and terminal showing the server running.

Screenshots of your browser displaying the facts.

Copy-paste your code for app.js, index.html, script.js, and style.css.

Name the document StudentName_StudentID.docx.

Upload: Submit the Word document to the class portal.

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.