Reference no: EM132258096

Scripting for Design Assignment - Creating Custom Objects

ASSIGNMENT OVERVIEW: In this assignment your task is to write the HTML markup and JavaScript code to display information about the five courses in the first common semester of the Interactive Media Design and Contemporary Web Design programs.

The five courses about which information will be displayed are:

1. Web Design I (CWMD1100)

2. Digital Illustration & Imaging (CWMD1200)

3. Photography for Integrated Media (CWMD1300)

4. Design and Conceptual Process (CWMD1400)

5. Web Technologies (CWMD1500)

For each course, the following data will be displayed in the HTML page:

1. its code, name, and the number of course hours

2. a (brief) description of what the course covers

3. the 3 key skills you learned or developed in the course

4. an image of work you produced in the course

5. a caption or description of your image

The above information will be added to the page in a(n):

1. h2

2. p

3. ol with 3 li's

4. img

5. p (or other element like figcaption)

HTML element(s) respectively. In addition the course information displayed will be selected using a select element with 5 associated option elements.

All of the data about the five courses will be stored in and retrieved from one array. This array will contain 5 separate elements, one for each course. All of the data about and the actions to perform for each course will be collected together and stored in a (custom) JavaScript object. These five objects will in turn be stored as the five elements in the array.

At any one time only the information for one course is displayed. The page is updated by selecting a new course from a drop down list (created with select and option elements).

The "change" event handler on the drop down runs the JavaScript code that updates the page. Using the selectedIndex DOM property, the event handler retrieves the appropriate course object from the array and, using the object's properties and methods, updates the page.

The objects for the five courses will be created as object literals and each object will have seven (7) properties - code, name, desc, hours, skills, sampleImage, sampleDesc and one method: toString().

There is not much code in the "change" event handler - the challenge in this assignment is to create the five course objects, store them in the array, and reference them as necessary to update the page.

CODING INSTRUCTIONS:

STEP 1 - Write the HTML markup

This assignment requires the following HTML elements:

• a select and 5 option elements to select the course
• an h2 element to display the course code, name, and hours
• a p element to display the course description
• an ol with 3 li's to display skills
• an img element to render a work sample from the course
• a p (or other) element to display the a caption for the work image

Create an .html file and add to it these required elements and content so that it has the required content and structure, then validate your HTML.

STEP 2 - Code the JavaScript

A. Create a .js file for your JavaScript code and load it in your .html file. All the data and code required will be placed inside one function that is assigned to the window.onload event

B. Declare and create an array to store data about the five (5) courses. Each element in this array will consist of an object housing the properties and methods for one course (see next instruction).

C. Create the five course objects as literals. Use the exercises on slides 20-24 and 97-99 from the Topic 5 notes as your guide.

D. Store the objects created in step C as elements to the array from step B.

E. Attach a "change" event handler to the drop down list selecting the course.

F. In this event handler function, use the selectedIndex DOM property to determine which course was selected from the list and then use the value of this same property to retrieve the correct course object from the array.

G. Reference the selected course object's properties and methods to update the page. Make sure to use the toString() method when updating the page i.e. use the toString() method to return the string that will be used to update the h2 element.

H. Use the getElementsByTagName() DOM method to update the 3 skill li's. Use the exercise in slides 100-105 from the Topic 5 notes as your guide.

I. Also code your solution to follow these best practices:

i. no globals - all variables are declared inside the onload function

ii. use const and let to declare variables, not var

iii. all DOM elements are referenced once and stored using const.

Attachment:- Assignment Files.rar