Skip to main content

Lab-1-1

(4% of the course mark)

Node.js Lab​

  • The first Node.js lab introduces learners to the fundamentals of server-side JavaScript development. Through hands-on exercises, participants gain an understanding of setting up a basic Node.js environment.

Lab objectives​

  • Understand the basics of server-side JavaScript development.

  • Set up a Node.js development environment on your local machine.

Create basic Node.js app​

  1. Open VSCode and create a folder named First-Node-Js-App.

  2. Open the terminal and change the directory to First-Node-Js-App.

  3. Initialize the app by typing the command below:

npm init
  1. For now keep on pressing enter to accept the defaults.
submission
info

Use the command below to accept all defaults and skip the individual prompts.

npm init -y
  1. Create a file named index.js and enter the following code.
console.log("Hello World");

  1. Save the changes.

  2. On the terminal enter the command below and press enter.

node index.js
  1. Capture a screenshot of the terminal output and name it node-js-hello-world.png.

Modify basic Node.js app​

  1. Modify index.js and implement the specifications below.

  2. Create a constant JS object variable named person that has the following properties.

  • firstName

  • lastName

  • An array of artists which has artistName and songName

  1. Create a function named displayData with the following specifications.

  • This function will accept the constant variable person created on the previous step.

  • This function will display firstName and lastName from the constant variable.

  • This function will display the contents of the artists array using a loop.

  1. Save the changes.

  2. On the terminal enter the command below and press enter.

node index.js
  1. Capture a screenshot of the terminal output and name it node-js-hello-world-modified.png.

Using sakura.css and normalize.css​

  1. Open VSCode and create a folder named app.

  2. Download the files sakura.css and normalize.css to the app folder. Make sure to rename then to sakura.css and normalize.css.

  3. Copy node-js-hello-world.png and node-js-hello-world-modified.png to the app folder.

  4. On the app folder create a file named: lab-1-1.html and copy the HTML code below.

<!-- 
Developer: 
Purpose: 
-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Update title -->
    <title></title>
    <!-- Reset styles using normalize -->
    <link rel="stylesheet" href="./normalize.css" />
    <!-- Classless css  -->
    <link rel="stylesheet" href="./sakura.css" />
  </head>
  <body>
    <!-- Enter the HTML codes to display the captured screen shots -->
  </body>
</html>
  1. For each screenshot implement the HTML codes to display a title, short description, and screenshot image.

Submission​

  1. Create a folder named submit.

  2. Copy the First-Node-Js-App and app folders to the submit folder.

  3. Create a zip file of the submit folder.

  4. Navigate back to where the lab was originally downloaded, there should be a Submissions section (see below) where the zip file can be uploaded.

submission