MAD9014

# Assignment List

  1. DOM Content
  2. DOM Cascade
  3. Fetch Reddit
  4. Fetch Github
  5. Data Management

# 1. DOM Content

This first assignment requires you to take an array of objects and create HTML from the data.

Create an HTML file with a <header> that contains an <h1> and an <h2>, plus a <main> element. Load the data-generated HTML into the <main> element.

<body>
  <header>
    <h1></h1>
    <h2></h2>
  </header>
  <main>
    <!-- content will be built here by javascript -->
  </main>
</body>
1
2
3
4
5
6
7
8
9

Start with this sample Array, and replace the value of the content properties with actual information about yourself. You will also need to create a folder called img and put an image or avatar of yourself into a img folder with the filename me.jpg.

let info = [
  { tag: 'h3', content: 'Your Name' },
  {
    tag: 'p',
    content: 'Born in City, Country.',
    children: [{ tag: 'img', content: 'Your Name', src: './img/me.jpg' }],
  },
  { tag: 'p', content: 'Something about pets that you may have had.' },
  { tag: 'p', content: 'Something about your siblings.' },
];
1
2
3
4
5
6
7
8
9
10

Use an Array forEach() method to loop through the info Array. The value of the tag property is to be used to create an element. Use the document.createElement() method to create each element.

The content property will be used as either the textContent of the element or the value of an alt attribute, if the element is an <img>. If the element is an img then there should be a src property.

For each item in the array, you need to check if there is a children property. If there is a children property, then you must loop through it and add an element for whichever tag is defined.

Use the in keyword to check for properties in the Array. Eg:

if ('propName' in myObject) {
  //yes myObject.propName exists
}
1
2
3

Remember, if any of the tag items have the value img, then use the value of the src property as the value of the <img> src attribute.

Use the append() method to add your newly created elements to the page.

# Challenge

Try to only make one call to append() to the <main> element. The browser should not be forced to re-paint the page more than once. The append() call should be called after the forEach method is called. Hint: Use a documentFragment as a temporary wrapper for the elements while you are inside the forEach loop and then append the documentFragment after the loop.

# Submission

Due Date **Week 5**

(See BS LMS for exact date)

Create a private Github Repo called dom-content. Copy the URL for your repo. Then in VSCode, in the Terminal type:

git init
git add -A
git commit -m "message about code added to project"
git remote add "<paste your repo url here>"
git push origin main
1
2
3
4
5

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

Go to the DOM 1 and submit the link to your repository into the text area. Then submit the form and look for confirmation.

# 2. DOM Cascade

Create a set of cascading select lists, where the selection of an item from the first list determines which list to display in the second list.

Create an HTML file with two empty <select> elements inside a <form>, which is inside a <main> element. Make sure each <select> has a <label> element. Alternatively, you can make two <input> elements that have a list attribute that points to a <datalist>. You can populate the two <datalist> elements with the information in the data array.

In the JS you need to create your own array of objects that will hold all the content for both lists.

Try to put this data into its own JavaScript file and then import it into your main script.

Here is an example of what the structure would look like. Replace all the values with ones of your own.

let data = [
  { item: 'Cheese', subitems: ['Cheddar', 'Mozzarella', 'Blue', 'Stilton'] },
  { item: 'Beer', subitems: ['Corona', 'Modelo', 'Heineken', 'Del Sol'] },
  { item: 'Artists', subitems: ['VanGogh', 'Picasso', 'Monet', 'Bateman'] },
  {
    item: 'Movies',
    subitems: ['Inception', 'Memento', 'Dunkirk', 'The Dark Knight'],
  },
];
1
2
3
4
5
6
7
8
9

Use the same value for both the text and value of each <option> that you generate.

Use addEventListener to add a change event listener to the first <select> element. When the change event is triggered, load the matching subitems into the second <select>. Alternatively, if you are using the two <input list> elements instead of the <select> elements, you can listen for the input event.

When the DOMContentLoaded event is triggered load the item values into the first <select> or <datalist> and the matching subitems into the second <select> or <datalist>.

# Submission

Due Date **Week 7**

(See BS LMS for exact date)

Create a private Github Repo called dom-cascade. Copy the URL for your repo. Then in VSCode, in the Terminal type:

git init
git add -A
git commit -m "message about code added to project"
git remote add origin "<paste your repo url here>"
git push origin main
1
2
3
4
5

After you have uploaded your code, go to the Settings page and click on the Collaborators link in the left-hand menu. Add the user prof3ssorSt3v3 as a collaborator to your repo.

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

Go to the DOM 2 assignment and submit the link to your repository into the text area. Then submit the form and look for confirmation.

# 3. Fetch Reddit

In this assignment we will use the Reddit website API feature that allows developers to simply add .json on to the end of any URL to get the JSON version of the data that is displayed on the page.

you should also change the www part of the url to api.

You are to create a webpage that has three sections. Each section needs a title <h2> plus a <button>LOAD</button> and an unordered list <ul>.

Each title is the name of a subreddit that you like.

Add the following functionality to the page:

  • Each time the user clicks one of the LOAD buttons, it will trigger a fetch of the JSON version of the home page for the subreddit from that section.
  • when the JSON for the subreddit is returned, clear out the old contents of the <ul> in that section (using innerHTML), then you need to loop through the contents of the data.children array. For each of the objects in the children array, take the data.title property and display it as the contents of a new <li> in the <ul>.
  • Use just the same one function for all three button instead of duplicating the code three times. Inside the function you only need to determine which URL to fetch and which list to write the content inside of. You can use the id or class or data- properties in the buttons to figure this out.

The layout of the sections should be responsive. If the page is less than 900px (or 60rem) wide, then stack the sections vertically on top of each other. If the page is more than 900px (or 60rem) then display the three sections beside each other.

# Demo Animation

This screen capture shows the idea behind what your web app should be doing.

Reddit Fetch screencap

# Submission

Due Date **Week 10**

(See BS LMS for exact date)

Create a private Github Repo called fetch-reddit. Copy the URL for your repo. Then in VSCode, in the Terminal type:

git init
git add -A
git commit -m "message about code added to project"
git remote add origin "<paste your repo url here>"
git push origin main
1
2
3
4
5

After you have uploaded your code, go to the Settings page and click on the Collaborators link in the left-hand menu. Add the user prof3ssorSt3v3 as a collaborator to your repo.

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

Go to the Fetch Reddit assignment and submit the link to your repository into the text area. Then submit the form and look for confirmation.

# 4. Fetch Github

For this assignment you are to use the Github REST APIs (opens new window). You can use either the Octokit library or the plain fetch() approach to calling the API.

Your assignment is to create a webpage that will make API calls to Github for the list of repositories that belong to a user OR a list of followers for a user.

The URL you will be calling is https://api.github.com/users/{username}/repos OR https://api.github.com/users/{username}/followers. Your webpage should have an <input type="text" /> and a <button>.

The user will enter a username in the input and then click the button. This needs to trigger the API call. Take whatever the user typed in the input, do a trim() on the value and then put that value in the URL in place of the {username}.

If the trimmed string value from the input is empty, then do NOT do the fetch call.

If no matches come back, you need to display a message on the page about there being no match.

If you do get a valid list of repos, then display those on the page as a series of HTML elements like this:

<!-- for repo list -->
<li>
  <p><a href="${html_url}" target="_blank">${name}</a></p>
  <p>Watchers: ${watchers}</p>
  <p>Open Issues: ${open_issues}</p>
</li>

<!-- for follower list -->
<li>
  <img src="${avatar_url}" alt="${login}" />
  <a href="${html_url}" target="_blank">${login}</a>
</li>
1
2
3
4
5
6
7
8
9
10
11
12

The text in the anchors should be the name or login property of the repo or follower object. The value of the href attribute should use https://www.github.com/ plus the value from the full_name or url property as the link. The value of the img src attribute should use the value from the avatar_url property.

Whether you use name or login or url or full_name will depend on whether you are displaying the list of repos or the list of followers.

# Demo Animation

This screen capture shows the idea behind what your web app should be doing.

Github Fetch screencap

# Submission

Due Date **Week 11**

(See BS LMS for exact date)

Create a private Github Repo called fetch-github. Copy the URL for your repo. Then in VSCode, in the Terminal type:

git init
git add -A
git commit -m "message about code added to project"
git remote add origin "<paste your repo url here>"
git push origin main
1
2
3
4
5

After you have uploaded your code, go to the Settings page and click on the Collaborators link in the left-hand menu. Add the user prof3ssorSt3v3 as a collaborator to your repo.

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

Go to the Fetch Github assignment and submit the link to your repository into the text area. Then submit the form and look for confirmation.

# 5. Data Management

# Preparation

To do this assignment you will need to sign up for a developer api key with the Cat API (opens new window). Sign up for the free account.

Have a look through the Cat API documentation (opens new window).

Download a copy of the catlist.js script (opens new window) which you will import and use each time you need to generate a random cat name.

Download a copy of the utils.js script (opens new window) which you will import and use with all your API calls when you need to report an error. You can add other utility functions and use this file in other projects too.

# Description

The Cat API can return a list of categories and then use the id of a category to fetch a collection of cat images. Unfortunately, there are no names associated with any of the images. So, we are going to build a webpage that lets users search for random cat images from the Cat API and then generate random names for each cat image that is fetched.

However, we want to have the same name appear for each cat image every time it is shown. So, we will create an object that uses the cat image ids as the properties and assign a random name to each one. See below as an example of what the object could look like. It could be a global variable or a property in a namespace.

let catnames = {
  ab12: 'Muffin',
  df34: 'Willow',
  e766: 'Mr Boots',
};
1
2
3
4
5

Each name comes from the pickRandomName() function in the catlist.js file.

To make the association between the names and the images permanent you need to save the catnames object in localstorage. Everytime your webpage loads you need to check in localstorage for the cat name object. If it is in localstorage, then load it into the JavaScript catnames object. If it is not there then the catnames object will start as an empty {}.

Each time you make a change, or a group of changes, to the catnames object then you need to update what is stored in localstorage.

You need to have a unique key name for your localstorage cat name entry. A good approach to this is to have part of the name be descriptive of your app and the other part be unique to you. Eg: catnames-abcd0001 catnames plus your algonquin username.

# Demo

Here is a demo version of the assignment. Your CSS should not match this exactly. Make the design your own. This just explains how the web app should generally work. Feel free to ask questions in class and on Slack about the assignment.

# Requirements

  1. When the page loads - fetch the list of categories from the Cat API.
  2. When the page loads - check localstorage for the existing list of catnames assigned to image ids and load that object into a JS variable.
  3. When the user selects a category from the dropdown list - a fetch is made for random cat images that match the selected category from the Cat API. Your web app should retrieve between 10 and 30 images with each request.
  4. All the fetched cat images are displayed as cards in a responsive grid like layout.
  5. As the images are fetched, their ids are used as keys for randomly generated cat names in a cat name object.
  6. With each new fetch of cat images, the updated cat name object overwrites the old cat names in localstorage.
  7. When the page is reloaded and cat images are fetched, the previously generated cat names should still be shown in connection with the same cat images.
  8. Each cat card needs to display a cat image and a cat name.
  9. The cat card content is created using data.map().join() set to innerHTML.
  10. If an error occurs when fetching the cat categories or images then a message needs to be displayed to the user within the <main> area, not with an alert().
  11. If the grid of cat cards is empty because no results have been fetched yet, or because the fetch returned no results, or because there was an error in the fetching, then display a message in the <main> area about there being no results and asking the user to select a category.
  12. The repo uses Github Pages to display a working website version of the repo.

# Submission

Due Date **Week 13** (See BS LMS for exact date) :::

Create a private Github Repo called data-mgmt. Copy the URL for your repo. Then in VSCode, in the Terminal type:

git init
git add -A
git commit -m "message about code added to project"
git remote add origin "<paste your repo url here>"
git push origin main
1
2
3
4
5

After you have uploaded your code, go to the Settings page and click on the Collaborators link in the left-hand menu. Add the user prof3ssorSt3v3 as a collaborator to your repo.

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

Go to the data-mgmt assignment and submit the link to your repository PLUS the link to your github pages version into the text area. Then submit the form and look for confirmation.

Back to Assignments Page

Last Updated: 11/18/2022, 3:39:23 PM