Assignment 2 Create a webpage

Assignment 2 
Create a webpage:
JavaScript
Create an HTML file called users.html that contains a form with a button tag (you should not use a
submit input here as we are not sending anything to the server). The HTML file should contain a form
asking for the following inputs:
- Name (type: textbox)
- Email (type: email)
- Birthday: (type: date)
Each time the user clicks on the button, the new user should be added to the HTML file (you do not
need a database here, you may simply add to the DOM). The age of the current users and a row
containing the average ages should also be displayed. For example, after entering three users,
something like this should be displayed on your page:
USERS:
Name Email Birthday Age
Jane Doe jdoe@domain.ca 1990-10-03 30
Joe Smith joesmith@domain.ca 1985-06-07 35
Steve Smith smith@domain.ca 1994-12-12 25
The average age of users is 30.667.
In addition, add three buttons that will allow the user to display the users in sorted order of each of the
inputs described earlier. For example, clicking on the “SORT by BIRTHDAY” will now display the names
as:
USERS:
Name Email Birthday Age
Steve Smith smith@domain.ca 1994-12-12 25
Jane Doe jdoe@domain.ca 1990-10-03 30
Joe Smith joesmith@domain.ca 1985-06-07 35
The average age of users is 30.667.
They could also be sorted from smallest to largest. Please write your own JavaScript comparator for the
sort function.
CSS
Include a CSS style that changes the default look of the browser. In this assignment, you are free to play
around with CSS frameworks that will make the application look more consistent and more responsive
to user input. 
Assignment 2 – due Oct 18 (midnight)
Create a Web Server
The purpose of this part of the assignment is to create a Windows Server 2016 virtual machine on the
Google Cloud, install IIS, and to set up and test your JavaScript file.
Log into the Google Cloud Platform Console
1. Go to https://console.cloud.google.com/
2. Log in and click on Go to Console.
3. Create a new project and name it [your_firstname_lastname][student_number]. For example,
bobbychan30025555.
Create and Connect to a New Virtual Machine Instance
1. Take a look at the How-to-Guides (https://cloud.google.com/compute/docs/how-to) on
Creating VM instances and Connecting to Instances.
2. Create a new virtual machine called win2016-asn2 on Compute Engine with the following
characteristics:
• 2 vCPUs (7.5 GB memory)
• Windows Server 2016 (DataCenter)
• Use a new 50GB standard persistent disk
• Allow HTTP traffic
3. Connect to your instance using Remote Desktop Protocol (RDP). You will need to use a RDP
client (including Windows Remote Desktop Connection, available on Windows and MacOSX),
click the RDP button's overflow menu and download the RDP file. Open the RDP file with your
client.
Running and Connecting to IIS on your Virtual Machine
1. Click on Add Roles and Features under the Server Manager Window. Under Server Roles, make
sure Web Server (IIS) is selected to be installed.
2. In your Server Manager, click on Tools à Internet Information Services (IIS) Manager. This
should bring up our familiar web server manager.
3. Make sure that the default page is running by going to your external IP (i.e.
http://35.229.117.56).
Set up Your Own Pages
1. Take a look at the How-to-Guides (https://cloud.google.com/compute/docs/instances/transferfiles#gcstransfer) under Transferring Files to Instances. Transfer the HTML and JavaScript files
you created in the previous section to your server into a folder called users (found under
C:\inetpub\wwwroot\); make this folder your default folder for your site. Then, add users.html
as a default file for that folder. You should be able to see your file by navigating to
http://[your_external_IP]/. For example, http://35.229.117.56/
Add us to your project
1. You must now add the TA and I as Owners of your project so that we can start up your instance
and do the appropriate marking (I am still actively trying to find a better way but for now…). Go
to IAM&adminàIAM section of your project.
2. Click on the ADD button
 
Assignment 2 – due Oct 18 (midnight)
3. Add the following emails as Owners of your project:
- bobbyctchab@gmail.com (NO typo)
- tienvsfu@gmail.com
Shutting Down Your Virtual Machine
1. In your VM Instances page on GCP, click on the three vertical dots on the right side of your
machine and select STOP. Make sure that the icon on the left side is no longer green:
2. You can also restart your virtual machine here at any time. Please make sure your virtual
machine is turned OFF (STOPPED) at the due date, otherwise you will not receive marks :(
Submission and Marking
Submit a text file to coursys (courses.cs.sfu.ca) with the following information:
- Your google ID
Marking Scheme:
(15 Marks) – working JavaScript component
(3 Marks) – CSS / Creativity and Effort
(6 Marks) – proper configuration of server
(-5 Marks) – improper submission