SOEN287-Assignment 2 Formatting List and Table Solved

Question #1: – Formatting a list and table/External style sheet

Script the webpage in figure 2 using an html file for the format and content and an external CSS file for the presentation. You choose the topic; here are a few ideas: cars, animals, sports, foods ….

Here are the specifications:

1.     The background of your page has a repeated image of your choice.

2.     The header must be formatted using the box model. 

The image to the right illustrates the CSS box model. 

To accomplish this use the <div tag. You can use any color combinations for the border and the background. The color of your header must be the same color as the border of the box model. Set the margin of the box model to be the same as the margin of the table that follows (so they line up nicely). Set the border to be at least 10px and solid. Set the internal padding to be at least 10px. Set the width to a value of your choice other than 100%.

3.     The table must have 3 rows and 2 columns.

a.     Set the table margin the same as the header margin.

b.     Set the border of the table to be at least 15px, dashed and a different color from any other colors in the table.

c.      The 1st row is for headings. The background color must be different from any of the other cells in the table, and the text must be any color other than black. Add a padding of at least 10px for the heading cells.

d.     The cells in rows 2 and 3 must all have a different color background and a different colored border. 

e.     The cells in the column 1 of row 2 and 3 each have an ordered list whose list style is upper roman.  Notice that the numbering of the list items in the cell col 1/row 3 starts at 3 (and not 1).

f.       The cell in row 2/col 2 has an ordered list whose list type is uppercase letters. The 1st nested unordered list has bullets that are a 25px x 25px image of your choice and first element of this list has one nested unordered list. The second nested unordered list’s bullets are the default circle. The color of the text in the 2nd unordered list is the same as the border of that cell.

g.     The cell in row 3/col 2 has an ordered list whose list type is armenian numbering. The 1st nested unordered list’s bullets are square. The 2nd nested unordered list has bullets that are a 25px x 25px image of your choice, different from the image used in cell Row 2/col 2. The color of the text in the 1st unordered list is the same as the border of that cell.

h.     The borders on top and bottom sides of the table are dashed and on the left and right sides of the table are dotted.

4.     All style need to be entered in an external CSS.

5.     Be sure to include your name in the page as well as the sources of your images with links to the pages at a location of your choice.

6.     Validate your code using the HTML5 validator.

 

 

1. Figure 2 - Template of page to script for question #1

                

Question #2:

Write a script that prompts the user to enter numerical data until they click “OK” with an empty string input. The program displays the following results:

•        The total number of values entered.

•        The number of odd values entered.

•        The number of even values entered.

The program should only accept positive integer values and ignore other values. If the user clicks cancel, then it should ignore all values entered and output zeroes for all results.

Here is a sample to illustrate the expected behavior of your program if you enter 10, 15, 14.5, 21, A, -17 and then an empty string:

 

 

 

 

Question #3:

Write a script in the head section that prompts the user to enter a number and then shows the multiplication table of that numbers. The program displays the resulting values in HTML5 table format including the width = 50% and border = 1, below is one example for the case that user enters 6:

 

Note:You don’t need to develop any function to calculate the multiplications.

 

Question #4:  

Write a function named a2q4 in JavaScript declared in an external file named a2q4.js, and included in the html file in the head element. This function takes as a parameter an array of strings called names. This function returns the number of names in the given array that start with either the "pa" or "po" patterns and that do not contain the letter “u” in their names.

The function must be called from inside the body element with these array values:

"party", "flight", "cave", "whole", "bubble", "pollution"

The program displays the result as follows:

   

Hint:  

•        Use a for loop

•        Use the existing method search() to provide you the position of these patterns in the array.

 

                

 


 


 

Evaluation Criteria or Assignment #2 
JavaScript Source Code
Points
Question #1 
 
                  Page background & Header
 
                  Table properties
 
                  Row 1

                  Row 2

                  Row 3
 
                  All styles are to be entered in an in-document style sheet
 
                  sources of your images with links to the pages (or name of image)
0.5 pt.
Question #2
 
                 Declaring and initializing variables 

                 Prompting user/reading data 

                 Using a while or do...while loop  
                 Ignore invalid inputs
 
                 Displaying the results

Question #3
 
          Prompting the user for input

         HTMT5 table format with different tags
.
         Calculating the multiplications

           Displaying the result in the table

Question #4 
 
Function a2q4 defined in external js file and included in the html file head element
 
             Using a for loop 
 
             Using the If statement 
 
             Searching with the proper regular expressions

              Calling the function in body section and displaying the proper result