Skip to content
Share
Explore

CSD 3103 - NPM Node Application Development Lab Test

Develop a Node.js application that serves random trivia facts from a dynamically updated list stored in the server file. Integrate the application with a front-end HTML page to display the facts.
Additionally, implement functionality to add new facts via a form on the front-end.

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.
mkdir dynamic-trivia-facts-app
cd dynamic-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 API endpoints to fetch a random fact and add a new fact.
Include middleware to handle JSON data.
⁠
image.png
⁠
⁠
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, a form to add a new fact, and a paragraph to display the fact.
Add basic CSS styling for a better user interface.
⁠
image.png
⁠
⁠
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.
Add functionality to submit a new fact to the server and display a success or error message.
⁠
image.png
⁠
⁠
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, input[type="submit"] {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#factDisplay, #message {
margin-top: 20px;
font-size: 18px;
color: #333;
}

form {
margin-top: 20px;
}

input[type="text"] {
padding: 10px;
font-size: 16px;
width: 300px;
}

Run the Application:
Start the server and test your application.
bash
Copy code
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.
Add a new fact using the form and verify that it appears in the random facts list.

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.
Screenshots of adding a new fact and seeing the success message.
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.