Description

Assessment Weight:
5% of your final course Grade Objective:
This first assignment will get the “Teams” Web API ready for use with the WEB422 course as well as reinforce the use of the jQuery and Bootstrap frameworks for rendering API data.
Specification:
For this assignment, we will be publishing our own personal version of the “Teams” API on Heroku. We will then write jQuery code to request data and render it on the page using Bootstrap (3.3.7).

Step 1: Obtaining the Code Examples / teams-api from GitHub
The first step will be downloading (“cloning”) The web422 repository, located here:
https://github.com/sictweb/web422

This can be done by opening a Command Prompt / terminal window and entering the command:

git clone https://github.com/sictweb/web422.git

Once this operation completes successfully, open the newly received folder (this will be “web422”) and open the “Code Examples” folder. Here you will see a “teams-api” folder – this is the main folder with all of the API / Server logic in it, so it’s best to copy this whole folder out of “Code Examples” and into another location that’s easy to remember. We will be updating it during this and future assignments.

Once you have the “teams-api” folder in a more permanent location, open it in Visual Studio Code.

Step 2: Following the Guide
Now that you have obtained the source code and have the folder open in Visual Studio Code, the next step involves following along with the instructions located online here. This will help you to get a new MLab Database set up, as well as configure the server.js file correctly and push the solution to Heroku.

Step 3: Boilerplate Client Side Code
Once you have completed the guide (Step 2), and have the Teams API running on Heroku (this can be tested by accessing the newly-created Heroku URL in a web browser and using one of the API routes such as “/teams”) we need to create some code on the client-side to work with the data.

To get started, create a new Assignment 1 folder and open it up in Visual Studio Code (this folder is what we will be submitting as the completed assignment)
• First, create the following folder / file structure
o css
▪ main.css o js
▪ main.js o index.html
• Next, we will use some boiler-plate code to start our index.html. You can copy and paste the index.html file from the WEB422 “static-server” example – this can be found online here.
• Be sure to add a CSS reference to “css/main.css” and a JavaScript reference to “js/main.js”
• Lastly, ensure that the <title> element is changed from “Welcome” to “student – WEB422” where student is your first and last name, ie: “Patrick Crawford – WEB422”
Step 4: Static Content
Before we start accessing the API and populating our page with data, we should create some static page elements that support our dynamic data. Make use of the Official Bootstrap 3 Documentation to create the following static page elements on your index.html page:
• A Navbar element (using the main example) consisting of the following:
o The “navbar-brand” text should read “Assignment 1 – Data” o Do not include the element: <ul class=”nav navbar-nav”>…</ul>
o Do not include the element: <form class=”navbar-form navbar-left”>…</form> o The element: <ul class=”nav navbar-nav navbar-right”>…</ul> must consist of a dropdown menu, with a dropdown-toggle that reads “Collection” containing the following items:

<li><a href=”#” id=”teams-menu”>Teams</a></li>
<li><a href=”#” id=”employees-menu”>Employees</a></li>
<li><a href=”#” id=”projects-menu”>Projects</a></li>
<li><a href=”#” id=”positions-menu”>Positions</a></li>

o When complete, the navbar should look like the image below:

• Next, you must include A responsive grid with a single column (ie, “col-md-12” – see the notes on “Responsive Grid System” from Week 11 in WEB322) that contains a single “well” with id=”data”. Essentially, we’re creating a horizontally centered container for our data.
• To ensure that the “well” doesn’t grow too large when populated with data, add some CSS to your main.css file to ensure that it does not exceed 300px high (HINT: use the max-height and overflow-y properties)

When complete, the page should look like this:

Step 5: Accessing the API and updating the DOM
Now that we have a reliable WEB API that we can use to access data, as well as an HTML page with the correct controls and container, we can start writing code to fetch the data and update the DOM.
The first step is to create a DOM ready handler inside your main.js file to execute all of your jQuery code. Inside the ready callback, output some text to the console (ie: “jQuery working”) so that you know that jQuery is working properly before you proceed.
Next, we need to wire up all 4 menu items in the “Collection” menu to fetch some data and update the DOM when clicked (HINT: use the “on” method for each element to bind the “click” event) according to the following specification:

<a href=”#” id=”teams-menu”>Teams</a> is Clicked
• Prevent the “default action” using event.preventDefault(). This will stop the element from behaving like a regular link.
• Make an AJAX GET request to your Teams API hosted on Heroku to GET all teams (/teams). When this is “done”:
o Clear the contents of the “well” (id=”data”) element using the .empty() method o Add the element <h3>Teams</h3> to the “well”
o Append the results of the AJAX query to the “well”. HINT: Be sure to call
JSON.Stringify(data) on the returned data, so that it can render as plain text in the browser
• When complete, it should look like this:

<a href=”#” id=”employees-menu”>Employees</a> is Clicked
• Prevent the “default action” using event.preventDefault(). This will stop the element from behaving like a regular link.
• Make an AJAX GET request to your Teams API hosted on Heroku to GET all employees (/employees). When this is “done”:
o Clear the contents of the “well” (id=”data”) element using the .empty() method
o Add the element <h3>Employees</h3> to the “well”
o Append the results of the AJAX query to the “well”. HINT: Be sure to call
JSON.Stringify(data) on the returned data, so that it can render as plain text in the browser
• When complete, it should look like this:

<a href=”#” id=”projects-menu”>Projects</a> is Clicked
• Prevent the “default action” using event.preventDefault(). This will stop the element from behaving like a regular link.
• Make an AJAX GET request to your Teams API hosted on Heroku to GET all projects (/projects). When this is “done”:
o Clear the contents of the “well” (id=”data”) element using the .empty() method o Add the element <h3>Projects</h3> to the “well”
o Append the results of the AJAX query to the “well”. HINT: Be sure to call
JSON.Stringify(data) on the returned data, so that it can render as plain text in the browser
• When complete, it should look like this:

<a href=”#” id=”positions-menu”>Positions</a> is Clicked
• Prevent the “default action” using event.preventDefault(). This will stop the element from behaving like a regular link.
• Make an AJAX GET request to your Teams API hosted on Heroku to GET all positions (/positions). When this is “done”:
o Clear the contents of the “well” (id=”data”) element using the .empty() method o Add the element <h3>Positions</h3> to the “well”
o Append the results of the AJAX query to the “well”. HINT: Be sure to call
JSON.Stringify(data) on the returned data, so that it can render as plain text in the browser
• When complete, it should look like this:

Assignment Submission:
1. Add the following declaration at the top of your main.js file

/********************************************************************************* * WEB422 – Assignment 1
* I declare that this assignment is my own work in accordance with Seneca Academic Policy. * No part of this assignment has been copied manually or electronically from any other source * (including web sites) or distributed to other students.
*
*
*
********************************************************************************/

2. Compress (.zip) the files in your Visual Studio working directory (this is the folder that you opened in Visual Studio to create your client side code Important Note:
• Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will result in a grade of zero (0) for the assignment.