BTI225 A4

Specification:

This assignment is built upon Assignment 3. If you are unable to start this assignment because Assignment 3 was incomplete - email me for a clean version of the Assignment 3 files to start with.

This assignment includes 2 parts, DOM and CSS.

Specification (Part A):

You will add DOM features to the existing HTML files in your A3. See details below:

1. Unzip a4.zip.

2. Copy the directory "PartA/js" with its files to your A3 working directory where stores A3 html files and two directories media and css. When you transfer your work to zenit, make sure you upload all the files and directories in the same structure to public_html on zenit. The file structure is as follows: see image.

"HTML Lists" - list.html:

Update the "HTML Lists" page as follows:

In the end of the file, before closing < /section>, after the list definition.

1. Include the list.js file to list.html (< script>).

2. Provide a comment < !-- A4 -->

Draw a horizontal line (< hr>). Add a header "Fruit List" (< h2>) as a title for the next section (step 4)

3. create a container (i.e.: < div>) with unique id value (e.g., "list1"). Be prepared for the following step 4.

4. Use the fruits array inside the lists.js file (js/list.js) to write (using JavaScript) an ordered list containing all the fruit inside the array to the above container (id "list1", which was created in step 3) in the list.html page. Be sure to write to your container (using JavaScript) after the window has completely loaded (window.onload). The ordered list should look like the image below when complete:

1. Apples
2. Oranges
3. Pears
4. Grapes
5. Pineapples
6. Mangoes

5. Draw a horizontal line (< hr>). Add a button "Add Lists of Directories and Files". When user clicks this button, it will add a nested list to the following container (list2), which will be generated using JavaScript as described below.

(< button onclick="addList2();> . < /button>)

6. Create a container (i.e.: < div>) with unique id value (e.g., "list2"). Be prepared for the following step 7.

7. Use the directory array inside the list.js file (js/list.js) to write (using JavaScript) a nested unordered list containing all the files and directories (with their files) inside the array to the above container (id "list2", which was created in step 6) in the list.html page. (refer to the following screenshot).

In js/list.js, you will notice that files have the type "file" and consist of a "name" property, whereas directories have the type "directory" and consist of a "name" property in addition to an array of files. Use these properties to correctly construct your nested unordered list (using JavaScript).

The nested unordered list should look like the image below when complete:

• file1.txt
• file2.txt
• HTML Files
  • file1.html
  • file2.html
• file3.txt
• JavaScript Files
  • file1.js
  • file2.js
  • file3.js

"HTML Tables" - table.html:

Update the "HTML Tables " page as follows:

1. Include the table.js file to table.html (< script>).

2. Provide a comment < !-- A4 -->

Draw a horizontal line (< hr>). Add a header "User Information" (< h2>) as a title for the next section (step 4)

3. Update the table.html page to include an additional container (i.e.: < div>) with a unique id value.

4. Use the users array inside the table.js file (js/table.js) to write a complete table containing all the users inside the array (and an appropriate header row), to your container in the table.html page.

You will notice that users consist of the properties: first_name, last_name, age, and email.

hint: use for/in loop to loop through the object properties, then use notation obj[prop] to access the value for each property.

Use the following to set the border for td. You can do the similar for table element

td.style.border = "2px solid";

Use these properties to correctly construct your table (using JavaScript) with the following headers: First Name, Last Name, Age and Email. You must also ensure that all email addresses are rendered as a valid "mailto" link and will open as a new message in the user's default mail client when clicked.

Be sure to write to your container after the window has completely loaded. The table should look like the image below when complete:

"HTML Images" - image.html:

Update the "HTML Images " page as follows:

1. Include the image.js file to image.html (< script>).

2. Provide a comment < !-- A4 -->

Draw a horizontal line (

3. Update the image.html page to include an additional container (i.e.: < div>) with a unique id value.

4. Use the images array inside the image.js file (js/image.js) to write 5 new < figure> elements to your container in the image.html page (using JavaScript). You will notice that each image in the array has the following properties: caption, alt and url. Use these properties to correctly construct (using JavaScript) your < figure> elements such that each element contains a valid image (using url and alt) as well as a caption underneath the image with the message contained within the caption property

Hint: HTML tag < figure> < figcaption> in lecture note, bti225-wk6.ppt, page 13

< figure> specifies self-contained content, frequently with a caption ( < igcaption> ), and is typically referenced as a single unit. Example HTML code snippet:

< div class="picture">
< figure>
< figcaption>
This is a figure caption
< /figcaption>
< img src="image-01.jpg" alt="landscape 1"
title="landscape 1" />
< /figure>
< /div>

In this assignment, you are going to use JavaScript to generate the < figure> and < figcaption> elements. The following screenshot shows the first 2 images as example. Your work should display all the images with captions.

Be sure to write to your container after the window has completely loaded (using JavaScript).

Specification (Part B):

For Part B, we will create a new CSS file to be used in the "CanadianPT.html" file located within the PartB folder.

Open the uncompressed folder (a4) and locate the directory "PartB". Copy the file "CanadianPT.html" and the directory images to A3 working directory, which will later be transferred to the directory public_html on your zenit. The file structure is as follows see image.

Getting Started

• locate the "css" directory and add/create the file "site.css".
• Open file "canadianPT.html" for editing and add the < link> tag to include your new site.css file.
• Open both "site.css" and canadianPT.html for editing/viewing.
• Open "index.html", in the < nav> < div> < ul> section, in the end before < li> ... Honesty < /li>, add a new list item < li>. Its content/text is Canadian Provinces and Territories, click this text, it will open the canadianPT.html page in a new tab. The following is part of index.html screenshot. see image.
• Open "canadianPT.html" in a web browser or click the tab/menu item from the above index.html. It looks like the following (the screenshot is not complete, you should see more content): see image.

Step 1 - Syling the main contianers

• Notice how the page "canadianPT.html" is broken up into major sections: < div class=main- container>< /div>, < header>< /header>, < nav>< /nav>, < section class=main>< /section> and < footer>< /footer>
• We need to apply styles to these sections, so add the following CSS Selectors (in the file site.css) to your page. For each selector, use the suggested CSS Properties to achieve each design requirement. See the completed sample for reference

After you finish the above CSS, the canadianPT.html page looks like the following (the screenshot is not complete, you should see more content): see image.

Step 2 - Styling the navigation and logo

• Now that the page is looking a little more organized, we want to update the "Canada" logo (flag & name) as well as the side navigation to look a little cleaner. For each selector, use the suggested CSS Properties to achieve each design requirement. See the completed sample for reference

After you finish the above CSS, the canadianPT.html page looks like the following (the screenshot is not complete, you should see more content): see image.

Step 3 - Styling the province containers (complete CSS)

• Everything is looking pretty good, but the page is very vertical. For a more modern design, we will render all of the provinces as "cards" and allow them to sit side-by-side horizontally. We also want to allow them to move onto the next line and render correctly if the user decides to resize the browser window. For each selector, use the suggested CSS Properties to achieve each design requirement. See the completed samples for reference

After you finish the above CSS, the canadianPT.html page looks like the following (the screenshot is not complete, you should see more content): see image.

If you resize to a smaller screen, you will see something like the following screenshot: see image.

Other Requirements

• All tags/attributes must be in lower case.
• Validate all your html files using the W3C Markup Validation Service: https://validator.w3.org/ .
• Validate all your CSS using the W3C CSS Validation: https://jigsaw.w3.org/css-validator