To Tutorials and Projects

IT 231 -- Tutorial 2

Tutorial 2: Part a

Goal: Display a random item from an array of notable items.

  1. 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.
  2. 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.
    1. 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.
    2. To determine the number of items in the array, use a statement something like this:
      var numItems = predictions.length;
      
    3. Then choose a random number like we did in the Math Methods section:
      var randomIndex = Math.floor(Math.random( ) * numItems);
      
    4. Place the statements in a, b, and c  in a function named chooseRandomItem.
    5. Finally, return the notable item with that index:
      return predictions[randomIndex];
      
  3. 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.

  1. Create a new project folder named Tutorial2bSmith or tutorial2b-smith (replace smith by your last name).
  2. Open a Command Prompt Window (Windows) or Terminal Window (Mac) and navigate to it using cd and dir.
  3. Create a new Node project:
    C:\it231\tutorial2b-smith> npm init
    
    Enter main.js as the startup file.
  4. Install the Node package http-status-codes:
    C:\it231\tutorial2b-smith> npm install http-status-codes
    
  5. 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
    
  6. Open a browser and enter this URL: localhost:3000/. The Hello, World message should be displayed:
  7. Enter Control-C in the Command Prompt or Terminal Window to close the Node project.
  8. Make these changes in your main.js file:
    1. Define the constant PORT with value equal to 3000. Change all occurrances of 3000 to PORT.
    2. Change all string expressions that use concatenation to a string expression that uses expression interpolation.
    3. 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>"
      
    4. 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:

  1. include source comments to explain what your code does.
  2. include source code headers, which are comments that contain your name, project number and submit date.
  3. 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.