Assignment List

1. Data import and process

Create a private repo on GitHub called data-process-assign. Clone that repo on your computer.

This will be a NodeJS assignment, not a browser-based one.

Inside the repo folder, add a JavaScript file called main.js where you will write your scripts.

Next, create either a JSON or a JS file where you will put your data. If it is a JS file then remember to do the module export. Here is some sample starter code for whichever file you create.

{
  "owner": "abcd0001",
  "info": [{ "id": 1, "name": "bob", "flavour": "vanilla", "age": 43 }]
}

const data = {
  owner: 'abcd0001',
  info: [{ id: 1, name: 'bob', flavour: 'vanilla', age: 43 }],
};

Create the data

Replace the abcd0001 with your own username.

Add at least six more objects inside the info Array. The properties inside the objects can be whatever you want. There should be at least 4 properties per object. Every object in the Array should have the same properties, with different values.

Your Script

Use the NodeJS require method to import either your JSON or JS data.

Your script must use a namespace to contain all your variables and functions except the imported one. There needs to be two functions inside your namespace.

1. The first function needs to accept an Array, and two property names (Strings). The first property String should be the name of a property that exists inside each Object in the Array. The second property String should be the new name for that property. Use the Array.map() method to create the new Array that uses the new property name inside each object. The function will return the newly created Array of Objects.

2. The second function will accept an Array and one property name (String). This function needs to use the Array.from() method to create a copy of the Array and the Array.sort() method to do a custom sort of the Objects in the Array. Use the property name passed to the function as the field to do the sort on. The function will return the sorted copy Array.

Below your namespace, show examples that call your two functions at least twice each.

Submission

Due Date

Friday Oct 23 by 11pm (Week 7)

Open BS LMS and go to the Activities > Assignments page.

Go to the Data Process assignment. Submit URL for private GitHub Repo.

Invite griffis@algonquincollege.com to your private repo.

---

READING WEEK

---

2. DOM from DATA

Step one is for you to create a private repo on Github called DOM-assignment. Clone that repo on your computer.

The starter code for this assignment can be found here. You can clone this repo on your computer and then copy the files into your own local repo OR you can just copy and paste the contents of each file into your own files.

There are two script files. One has the data and the other file uses that data. Include the data from the provided data.js file by attaching both javascript files to the HTML page with <script> tags. (this is already done if you used the starter files). Put the data.js <script> first.

Add one more Object with the same properties to the Array in the data.js file. Use your own name for this new person object. You don't have to use your personal phone or email. Put your new object first in the Array.

Use a function that gets called after the DOMContentLoaded event which will loop through the Array from the data file and create one card, that looks like the sample one in the HTML, for each person object. This is in the starter code.

The function must remove the sample card before looping through your data to build the new cards.

Use the provided CSS. You can edit the contents of the provided CSS selectors. There is no need to add more selectors.

Create your own colour-scheme and replace any instances of rebeccapurple or white with a colour from your colour-scheme. You may edit the CSS beyond this if you like.

Here is an example of what the page will look like once the data has been loaded, but before you update the colour-scheme.

Submission

Due Date

Friday Nov 20 by 11pm (Week 10)

Open BS LMS and go to the Activities > Assignments page.

Go to the Data Process assignment. Submit URL for private GitHub Repo.

Invite griffis@algonquincollege.com to your private repo.

---

3. Simple SPA

In this assignment you will be building a simple Single Page Application that uses The MovieDB API. You will need to create an account with the site and then request your own API Key to use.

You need to create your own private repo called simple-spa which will hold all your code. Create it on Github first, and clone or connect it with your own empty local repo first. Then, add the starter code from the provided repo.

Starter Code for Assign 3

TheMovieDB API Documentation

Notes about Images from the API

Logos and Attribution

Here is an introductory tutorial about the specifics about the API.

Here is a summary of the features in the Assign SPA and a demonstration of how it should work.

App Required Features:

1. The web app must work with a single HTML file.
2. The web page must be a mobile-first responsive site. Layout and font-sizes should adjust based on screen size.
3. The search field must always be visible.
4. Running a search needs to use fetch() to get all the actors whose names match the value in the search field. Do not call the fetch if the search field is empty.
5. Namespaces must be used to hold ALL of your JavaScript properties and functions.
6. The results of each search fetch need to be saved in the same property in a namespace so that it can be accessed again later on.
7. There needs to be three screens - home, search results for actors, and the movies & tv shows the actor is best known for.
8. The home page should provide an introduction to the web app and what it does. Just static content. This would be a good place to display TheMovieDB logo, which is required by the terms of service. Images and colours.
9. The actors page should display a series of cards or list items with information about each actor. You must put at least, the name, popularity, and image of each actor into the HTML. Their id should be kept in a data- property to be accessed later. Old search results must be removed before the new results are shown.
10. The media page should show a series of cards or list items with information about each of the shows or movies that the selected actor is best known for, according to the API. Their id should be kept in a data- property. Old results must be removed before the new results are shown.
11. Clicking on the search button needs to navigate the user to the actors page. This can be done from any screen.
12. Clicking on anywhere in an actors card or list item should navigate the user to the media page and show the proper information.
13. There needs to be an obvious way for the user to navigate back to the actors page.

You may add more information about the actor or show in their cards / list items.

You may make additional API calls to get more information to enhance the displayed info.

Submission

Due Date

Monday Dec 7 by 11pm (Week 13)

Open BS LMS and go to the Activities > Assignments page.

Go to the SPA assignment. Submit URL for private GitHub Repo.

Invite griffis@algonquincollege.com to your private repo.

---

4. Advanced SPA

This will build on top of the functionality from the Simple SPA

Create a new BRANCH repo in your called simple-spa on Github. Call the new branch assign-4. Github will copy all of assignment 2 into the new branch when you create it.

In your local copy you will need to create the branch too. git branch will tell you the names of all your branches plus which your current branch is. git branch assign-4 will create the new branch. git checkout assign-4 will switch you into that new branch

git branch
git branch assign-4
git checkout assign-4

Now, when we want to save and upload our changes (and you should be doing this all the time) we will still be using git add and git commit but our push command needs to point to the new branch.

git add -A
git commit -m "Finished the localstorage feature"
git push origin assign-4

Notice the last line? We no longer say main. We now use assign-4, the new branch name.

Once you have the new BRANCH created and ready with the finished version of Assign 3, and then apply fixes, missing features, and feedback.

Then, start on the new features:

New Features

1. Save search results to localStorage.

• Save the results from every search to localStorage. Use value from searchfield as the key.
• If key exists, don't do a fetch. Get the results array from localStorage instead.

2. Use History API to update the URL to reflect search term and current screen. Include the details about where you are in the app as part of the location.hash.

• # home page with no results
• #tim actors page with results from searching for "tim"
• #tim/123324 media page with results for actor id 123324. Actors page has results from #tim.

3. Add control to sort results by either name or popularity. The user should be able to toggle back and forth between ascending and descending sorts of either the name or popularity.
4. Use the popstate event to handle back button navigation. (Or you can use the hashchange event if you prefer).
5. Add CSS transitions for navigation between pages. Duration 0.3s - 0.9s.
6. Add a loading animation overlay that appears whenever a fetch is being done.
7. Add error message display for failure to fetch.

Submission

Due Date

Assignment Due by 5pm on Friday Final Deadline for late submissions is Friday Dec 18 by 11pm (Week 14)

Open BS LMS and go to the Activities > Assignments page.

Go to the SPA Final assignment. Submit URL for private GitHub Repo.

Invite griffis@algonquincollege.com to your private repo.

---