To Tutorials and Projects
IT 231 -- Tutorial 2
Tutorial 2: Part a
Goal: Display a random item from an array of notable items.
- Create a new project folder named Tutorial2aSmith or tutorial2a-smith
(replace smith by your last name). In your project folder, create a JavaScript file named
main.js.
- The notable items can be a quotes from well-known persons, interesting
facts, jokes, riddles, etc. Include at least eight notable items in your array.
Do not use predictions from a Magic Eight Ball as your notable items because
that example was shown in class.
- Here is an array of three Magic 8 Ball predictions that we used:
var predictions = ["Signs point to yes.",
"Cannot predict now.",
"My reply is no."];
Look up Magic 8 Ball on Wikipedia to see all 20 predictions.
- To determine the number of items in the array, use a statement something like this:
var numItems = predictions.length;
- Then choose a random number like we did in the Math Methods section:
var randomIndex = Math.floor(Math.random( ) * numItems);
- Place the statements in a, b, and c in a function named
chooseRandomItem.
- Finally, return the notable item with that index:
return predictions[randomIndex];
- Also in main.js, after the chooseRandomItem function definition,
use the
console.log method to write a statement that calls your
chooseRandomItem function to
display a random item to the Node console. Include output that explains what
your notable item is.
Grading Breakdown: Functionality: 30, Creativity: 10,
Source Code Comments: 5, Submitted Correctly: 5 (Include a header with your
name, project number, and submit date.)
20 point deduction for using Magic
8-ball notable items.
20 point deduction for only 3 notable items instead of
8.
Tutorial 2: Part b
Goal: Display a list (ordered or unordered) of notable items in a
localhost browser.
Important: you must create the Node project and install the http-status-codes module
before you can test and submit Tutorial 2b.
- Create a new project folder named Tutorial2bSmith or tutorial2b-smith
(replace smith by your last name).
- Open a Command Prompt Window (Windows) or Terminal Window (Mac) and navigate to it using
cd
and dir.
- Create a new Node project:
C:\it231\tutorial2b-smith> npm init
Enter main.js as the startup file.
- Install the Node package http-status-codes:
C:\it231\tutorial2b-smith> npm install http-status-codes
- Create a file named main.js that contains this source code:
const http = require("http");
const httpStatus = require("http-status-codes");
function processRequest(request, response) {
console.log("Received an incoming request.");
response.writeHead(httpStatus.StatusCodes.OK, {"Content-type": "text/html"});
var responseMessage = "<h1>Hello, World.</h1>";
response.write(responseMessage);
response.end( );
console.log("Sent this response message: " + responseMessage);
}
const server = http.createServer(processRequest);
server.listen(3000);
console.log("Server started and is listening on port 3000");
Start the project:
C:\it231\tutorial2b-smith> node main.js
- Open a browser and enter this URL: localhost:3000/. The Hello, World message should be displayed:
- Enter Control-C in the Command Prompt or Terminal Window to close the Node project.
- Make these changes in your main.js file:
- Define the constant PORT with value equal to 3000. Change all occurrances of 3000 to
PORT.
- Change all string expressions that use concatenation to a string expression that uses
expression interpolation.
- Change the "Hello, World" message to display an
ordered list of all of the notable items that you used for Tutorial 2a. Put
the notable items in an array like you did for Part a. Here is the code that we used in class
to display the notable items:
responseMessage += "<ol>";
for(var p of notableItems) {
responseMessage += `<li>${p}</li>`;
}
responseMessage += "</ol>"
- Instead of using the function processRequest, pass in the statements of
this function
as an anonymous function, written in arrow notation.
Grading Breakdown: Functionality: 30, Creativity: 10, Source
code comments: 5, Source Code Headers: 2.5, Submitted Correctly: 2.5
Source code comments explain the lines of code that you submit for Tutorial 2b.
Source Code Headers are comments that contain your name, project number and submit date.
Submitted correctly means that you named your source code folder tutorial2b-smith or tut2b-smith
(replace tut2b with the actual tutorial or project number; replace smith with your last name.
Tutorial 2: Part c
Goal: Display a random item in the Node console.
Grading Breakdown: Functionality: 30, Creativity: 10, Source
code comments: 5, Source Code Headers: 2.5, Submitted Correctly: 2.5
Don't forget to:
- include source comments to explain what your code does.
- include source code headers, which are comments that contain your name, project number and submit date.
- name your source code folder tutorial2c-smith or
Tutorial2cSmith (replace tutorial2c with the actual tutorial or project number;
replace smith with your last name). Also, zip up your project folder and submit
it. Don't zip up individual files or submit unzipped files.