CSC 223 — Authoring for the Web

Scripted Product List

Overview

In this assignment you'll use JavaScript to dynamically generate a product list from a JSON array.

Assignment

1. Create a new HTML page.

2. Add the necessary tags to your HTML page to display a header that says "Today's Menu". Then add an empty div tag to your page with an id of "menu".

3. Create a new JavaScript file and link it to the page with a <script> tag.

4. In the JavaScript file, add the necessary code to create an array of menu items for a restaurant and store that array in a variable.

5. Write the necessary JavaScript code to get a reference to the empty div tag you created in step 2.

6. Add the necessary JavaScript to loop through the array you created in step 4 and add a new paragraph item to the div for every item in the array. Give each paragraph a class of "menu-item".

7. Add the necessary CSS to style your menu and menu items.

8. Update the table of contents link on your index page if necessary.

9. Submit the url to your github pages site to MySVU. (This should be something like https://USERNAME.github.io/REPOSITORYNAME).

Hints

• Step 6 is the only step containing things we've never done in an assignment before. Break the problem down into smaller pieces and figure out how to solve each piece.

• Refer to the examples in Chapter 5 of your text, as well as hints on the W3 Schools site.