WDD 230 - Web Frontend Development I

09: Collaboration Activity - JSON Menu

Overview

This activity will have you demonstrate your understanding of the learning activities by applying the concepts to your home page. ♨️Work with your group to apply the following specifications to enhance your own, course home page which you will submit individually.

Instructions

This part of the assignment has you change your static activity links on your home page to a dynamic list of links using a JSON data source.

JSON Data

1. Create a new folder named "data" within your wdd230 root folder.
2. In that new data folder, create a new JSON file named "links.json"
3. In the links.json file, add a single array of objects named "lessons"
4. Add two properties to the first array object named "lesson" and "links".
5. The lesson property value should contain the lesson number as a string written out like this: "01"
6. The links property contains an array of objects with two properties "url" and "title".
7. The url property value contains the relative address to the learning activity file.
8. The title property value contains a short descriptive name of the learning activity.
9. Add addition lesson array values in the same way for weeks 2 through 10.

{
  "lessons": [
    {
      "lesson": "02",
      "links": [
        {
          "url":"lesson02/mediaquery.html",
          "title":"Media Queries"
        },
        {
          "url":"lesson02/design-principles.html",
          "title":"Design Principles Document"
        }
      ]
    },
  ...

JavaScript - Build Link Menu Dynamically

Use JavaScript and this new JSON source file to replace the static activity links with dynamically built list.

1. In your scripts folder within the wdd230 root folder, add a new JavaScript file named "links.js".
2. In the links.js file, create a baseURL variable that references your root wdd230 repository, GitHub pages URL.
   Example

   const baseURL = "https://yourgithubusername.github.io/wdd230/";

3. Next, add a variable named linksURL that references your links.json data file.
   Example

   const linksURL = "https://yourgithubusername.github.io/wdd230/data/links.json";

4. Write an asynchronous function to get the links data in the links.json data file.
5. Test the JSON result by writing the data to the console. In order to test your work at this point, you will need to write a line of code in links.js which calls the getLinks() function. Once your are satisfied or producing links, remove the console.log() statement.
   Example

   async function getLinks() {
     const response = await fetch(linksURL);
     const data = await response.json();
     console.log(data);
   }
   
   getLinks();

6. In the getLinks function, add a new line of code at the end that calls a function that will build out the available activity links from the data response.
   • Name the function displayLinks.
   • Send the data as an argument.
   Example

   async function getLinks() {
     const response = await fetch(linksURL);
     const data = await response.json();
     displayLinks(data);
   }

7. Create the displayLinks() function and name the function's single parameter weeks. Remember from the json data that you wrote and tested that the data is an array of objects representing weeks of the term.
8. Using your existing static HTML links structure in your index.html document as a guide, use a loop to process each week using it's "week" string and "links' object ("url" and "title") to create the output.
   The latter-day prophets application in the learning activity provided you with an example to follow.

Testing

• Always practice good design and development techniques by adhering to the course development standards.

Submission

1. Commit your local repository and push your work to your wdd230 GitHub Pages enabled repository on GitHub.
2. Submit your home page URL in I-Learn.