CIS 119 - Create links assignment

The objectives of this assignment are:

1. create and use an array in JavaScript
2. use a loop to process an array
3. create HTML elements using JavaScript
4. create and set HTML attributes using JavaScript
5. upload files to a remote server
6. create subdirectories and organize files on a remote server
7. test and debug a website

Overview

This assignment involves creating a list of links on a web page after it has been loaded into a browser. The web page starts off with almost nothing on it. As soon as the page is done loading JavaScript should take over and add a list of properly functioning hypertext links to the page. The data for the links will be stored in an array in the JavaScript file.

Resources

1. createLinks.html: starting HTML page
2. createLinks.css: starting CSS file
3. additional notes on arrays and creating elements

Requirements

1. The starting HTML page has already been created for you. The only things you should change are the file extension (from .html.txt to .html) and the comments (to add your name and change the date). The only other changes you are allowed to make to the createLinks.html file are the names of the subdirectories that the CSS and JavaScript files are stored in.
2. The starting CSS file has already been created for you. The only things you should change are the file extension (from .css.txt to .css) and the comments (to add your name and change the date).
3. The JavaScript file has these requirements:
   1. It should be named createLinks.js and be located in a subdirectory named scripts or javascript.
   2. Create documentation comments at the start of the file which include the name of the file, your name, the course number, the date, and a short description of what the code does. See the .css and .html starting files for examples of documentation comments. JavaScript block comments look like CSS block comments.
   3. Create an array which holds the URLs of at least four websites that you like. The URLs are strings that start with http://.
   4. Create a function that will do the following:
      1. Get and store in a variable a reference to the element with the id: links
      2. Create an ordered list (ol element) and store it in a variable.
      3. Add (append) the ordered list as a child of the parent element of the "links" element.
      4. Create a loop that will process each member of your array of URLs. The loop must do the following:
         1. Create a list item (li element) and store the reference in a variable.
         2. Create an anchor (a element) and store the reference in a variable.
         3. Create a text node containing the text from the appropriate element of your URLs array and store the reference in a variable.
         4. Set the "href" attribute of the anchor element to be the value of the appropriate element of your URLs array.
         5. Add the text node to the anchor element as a child node.
         6. Add the anchor element to the list item element as a child node.
         7. Add the list item element to the ordered list element as a child node.
   5. Write a statement that will run the above function as soon as the page is done loading.
4. Upload your files (including subdirectories) to the remote server. Test and debug your program. When you are done, let the instructor know via email that your assignment is ready to be graded.

Grading rubric

1. 2 pts: HTML file uploaded properly, comments modified properly, and no unallowed changes made.
2. 2 pts: CSS file uploaded properly to subdirectory, comments modified properly, and no unallowed changes made.
3. 2 pts: JavaScript file uploaded properly to subdirectory and named correctly.
4. 2 pts: JavaScript file has required documentation comments.
5. 3 pts: Array is properly created.
6. 2 pts: Function created properly.
7. 2 pts: The main element (id = links) obtained.
8. 2 pts: The ordered list is created.
9. 2 pts: The ordered list is added to the document.
10. 5 pts: The loop for processing the array is correct.
11. 2 pts: The list items are created properly.
12. 2 pts: The anchors are created properly.
13. 2 pts: The text nodes are created properly.
14. 2 pts: The text nodes are added to the anchors correctly.
15. 2 pts: The anchors work properly (the href attribute is set correctly).
16. 2 pts: The anchors are added to the list items.
17. 2 pts: The list items are added to the list.
18. 2 pts: The window.onload function is properly used to call your function after the page has loaded.

Example