Search results for 'ITS'

New Perspectives HTML5 and CSS3 7th Edition Tutorial 10 Case 4 VoterWeb

VoterWeb Pam Carls is a manager for the website Voter Web, which compiles voting totals and statistics from local and national elections. Pam has the results of recent congressional elections from eight districts in Minnesota stored as multidimensional arrays in a JavaScript file. Pam wants you to create a script displaying these results and calculating the vote percentage for each candidate within each race. A preview of the page is shown in Fig 10-38

Complete the following:
1. Use your editor to open the vw_election_txt.html and vw_results_txt.js files from the html10 case4 folder. Enter your name and the date in the comment section of each file, and save them as vw_election.html and vw_results.js respectively.

2. Go to the vw_election.html file in your editor. Directly above the closing tag, insert script elements to link the page to the vw_congminn.js and vw_results.js files in that order. Defer the loading and running of both script files until after the page has loaded.

3. Scroll down the file and, directly above the footer, insert an empty section element. You will write the HTML code of the election report in this element. Save your changes to the file.

4. Open the vw_congminn.js file in your editor and study the contents. Note that the file contains the results of 8 congressional elections in Minnesota. The candidate information is stored in multidimensional arrays named candidate, party, and votes. Do not make any changes to this file.

5. Go to the vw_results.js file in your editor. Declare a variable named reportHTML containing the following HTML text
<h1>title</h1>
where title is the value of the raceTitle variable stored in the vw_congminn.js file.

6. Create a for loop that loops through the contents of the race array using i as the counter variable. Place the commands specified in Steps a through e within this program for loop:
a. Create a variable named totalVotes that will store the total votes cast in each race. Set its initial value to 0.
b. Calculate the total votes cast in the current race by applying the forEach() method to ith index of the votes array using the calcSum() function as the callback function.
c. Add the following HTML text to the value of the reportHTML variable to write the name of the current race in the program loop
<table>
<caption>race</caption>
<tr><th>Candidate</th><th>Votes</th></tr>
where race is the ith index of the race array.
d. Call the candidateRows() function (you will create this function shortly) using the counter variable i and the totalVotes variable as parameter values. Add the value returned by this function to the value of the reportHTML variable.
e. Add the text </table> to the value of the reportHTML variable.

7. After the for loop has completed, write the value of the reportHTML variable into the innerHTML of the first (and only) section element in the document.

8. Next, create the candidateRows() function. The purpose of this function is to write individual table rows for each candidate, showing the candidate's name, party affiliation, vote total, and vote percentage. The candidateRows() function has two parameters named raceNum and totalVotes. Place the commands in Steps a through c within this function.
a. Declare a local variable named rowHTML that will contain the HTML code for the table row. Set the initial value of this variable to an empty text string.
b. Create a for loop in which the counter variable j goes from 0 to 2 in steps of 1 unit. Within the for loop do the following:
 i. Declare a variable named candidateName that retrieves the name of the current candidate and the current race. (Hint: Retrieve the candidate name from the multidimensional candidate array using the reference, candidate[raceNum][j].)
 ii. Declare a variable named candidateParty that retrieves the party affiliation of the current candidate in the current race from the multidimensional party array.
 iii. Declare a variable named candidateVotes that retrieves the votes cast for the current candidate in the current race from the multidimensional votes array.
 iv. Declare a variable named candidatePercent equal to the value returned by the calcPercent() function, calculating the percentage of votes received by the current candidate in the loop. Use candidateVotes as the first parameter value and totalVotes as the second parameter value.
 v. Add the following HTML code to the value of the rowHTML variable
 <tr>
 <td>name (party)</td>
 <td>votes (percent)</td>
 </tr>
 where name is the value of candidateName, party is the value of candidateParty, votes is the value of candidateVotes, and percent is the value of candidatePercent. Apply the toLocaleString() method to votes in order to display the vote total with a thousands separator. Apply the toFixed(1) method to percent in order to display percentage values to 1 decimal place.
c. Return the value of the rowHTML variable.

9. Save your changes to the file, and then load vw_election.html in your browser. Verify that the three candidate names, party affiliations, votes, and vote percentages are shown for each of the eight congressional races.

10. Pam also wants the report to display the vote percentages as bar charts with the length of the bar corresponding to the percentage value. Return to the vw_results.js file in your editor. At the bottom of the file, create a function named createBar() with one parameter named partyType. Add the commands described in Steps a through b to the function:
a. Declare a variable named barHTML and set its initial value to an empty text string.
b. Create a switch/case statement that tests the value of the partyType parameter.
If partyType equal "D" set barHTML equal to:
<td class="dem"></td>
If partyType equals "R" set barHTML equal to:
<td class="rep"></td>
Finally, if partyType equals "I" set barHTML to:
<td class="ind"></td>

11. Return the value of barHTML.
Next, add these empty data cells to the race results table, with one cell for every percentage point cast for the candidate.

12. Scroll up to the candidateRows() function. Directly before the line that adds the HTML code to the value of the rowHTML variable, insert a for loop with a counter variable k that goes from 0 up to a value less than candidatePercent in increments of 1 unit. Each time through the loop call the createBar() function using candidateParty and candidatePercent as the parameter values.

13. Add comments throughout the file with descriptive information about the variables and functions.

14. Save your changes to the file, and then reload vw_election.html in your browser. Verify that each election table shows a bar chart with different the length of bars representing each candidate’s vote percentage.

New Perspectives HTML5 and CSS3 7th Edition Tutorial 10 Case 1 Trophy Case Sports

Trophy Case Sports Sarah Nordheim manages the website for Trophy Case Sports, a sports memorabilia store located in Beavercreek, Ohio. She has asked you to work on creating a script for a shopping cart page. The script should take information on the items that the customer has purchased and present in it table form, calculating the total cost of the order. A preview of the page you will create is shown in Figure 10-35.

Sarah has already designed the page layout. Your job will be to use JavaScript to enter the order information (this task will later be handled by a script running on website) and to write a script that generates the HTML code for the shopping cart table.

Complete the following:
1. Use your editor to open the tc_cart_txt.html, tc_cart_txt.js and tc_order_txt.js files from the htm10 case 1 folder. Enter your name and the date in the comment section of each file, and save them as tc_cart.html, tc_cart.js and tc_order.js respectively.

2. Go to the tc_cart.html file in your editor. Directly above the closing </head> tag, insert script elements to link the page to the tc_order.js and tc_cart.js files in that order. Defer the loading and running of both script files until after the page has loaded.

3. Scroll down the file and directly below the h1 heading titled "Shopping Cart" insert a div element with the ID cart.

4. Save your changes to the file and go to the tc_ordet.js file in your editor.

5. Within the tc_order.js file, you will create arrays containing information on a sample customer order. Create an array named item that will contain the ID numbers of the items purchased by the customer. Add the following four item numbers to the array: 10582, 23015, 41807, and 10041.

6. Create an array named itemDescription containing the following item descriptions:
• 1975 Green Bay Packers Football (signed), Item 10582
• Tom Land, 1955 Football Card (unsigned), Item 23015
• 1916 Army-Navy Game, Framed Photo (signed), Item 41807
• Protective Card Sheets, Rem 10041

7. Create an array named itemPrice containing the following item prices: 149.93, 89.98, 334.93, and 22.67.

8. Create an array named itemQty containing the following quantities that the customer ordered of each item: 1, 1, 1, and 4.

9. Save your changes to the file, and then open the tc_cart.js file in your editor.

10. In your script, you will calculate a running total of the cost of the order. Declare a variable named orderTotal and set its initial value to 0.

11. Declare a variable named cartHTML that will contain the HTML code for the contents of the shopping cart, which will be displayed as a table. Set its initial value to the text string:
<table>
<tr>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr>

12. Create a for loop that loops through the entries in the item array. Each time through the loop, execute the commands described in Steps a through e.
a. Add the following HTML code to the value of the cartHTML variable
<tr> <td><img src='tc_item.png' alt='item' /> </td>
where item is the current value from the item array.
b. Add the following HTML code to the cartHTML variable to display the description, price, and quantity ordered of the item
<td> description</td> <td>price</td> <td>quantity</td>
where description is the current value from the itemDescription array, price is the current value from the itemPrice array preceded by a $ symbol, and quantity is from the itemQty array.
c. Declare a variable named itemCost equal to the price value multiplied by the quantity value for the current item.
d. Add the following HTML code to the cartHTML variable to display the cost for the item(s) ordered, completing the table row
<td>$cost</td></tr>
where cost is the value of the itemCost variable, preceded by a $ symbol.
e. Add the value of the itemCost variable to the order Total variable to keep a running total of the total cost of the customer order.

13. After the tor loop has completed, add the following HTML code to the value of the cartHTML variable, completing the shopping cart table
<tr>
<td colspan= '4'>Subtotal</td>
<td>Total</td>
</tr>
</table>
where total is the value of the orderTotal variable, preceded by a $ symbol.

14. Apply the cartHTML value to the inner HTML of the div element with the ID cart.

15. Document your script file with appropriate comments, and then save your work.

16. Open the tc_cart.html file in your browser and verify that the page now shows the shopping cart data for the sample customer order.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 2 JSWorks

Data Files needed for this Case Problem: js.css, jslogo.png, modernizr-1.5.js, nodestxt.htm, tree.css, treetxt.js

JSWorks Jorge Soto is the owner and administrator of JSWorks, a Web site containing JavaScript tutorials, tips, and specialized apps. Jorge is working on a multipage tutorial concerning the creation and use of document nodes. You are helping Jorge maintain his Web site. You've volunteered to work on his Web page that describes the appearance of the document node tree. Jorge would like you to include a node tree that is based on the article he's writing so that visitors to his site can see the complete appearance of the node tree for a sample HTML fragment. Figure 14-67 shows a preview of the Web page you'll complete for Jorge.

The JavaScript program you'll design will need to use recursion to navigate through the entire structure of Jorge's article. As it proceeds through the article, it will record each element, attribute, and text node and display those nodes in a nested list alongside the article text. The CSS styles for the nested list already have been created for you; your only job will be to generate the HTML code of the nested list. Jorge also wants your code to keep a running count of the total number of nodes, element nodes, attributes, and text nodes, including text nodes containing only white space.
Complete the following:
1. Using your text editor, open nodestxt.htm and treetxt.js from the tutorial.14\case2 folder. Enter your name and the date in the comment section, and then save the files as nodes.htm and tree.js, respectively.
2. Go to the nodes.htm file in your text editor and add a link element to connect the document to the tree.css style sheet. Also add a script element to connect the file to the tree.js JavaScript file.
3. Take some time to study the contents and structure of the document and then close the file, saving your changes.
4. Go to the tree.js file in your text editor. Declare the following global variables: nodeCount to keep a running count of all of the nodes in the source document; elemCount to count the element nodes; attCount to count the attribute nodes; textCount to count the text nodes; and wsCount to count the text nodes containing white space only. Set the initial value of all of these variables to 0.
5. Insert a command to run the setup() function when the page is initially loaded by the browser.
6. Create the writeElemLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of an element node. The structure of the list item is shown in Figure 14-68.
The function has two parameters: elemNode, which represents the element node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create a list item element named liElem containing the text string +--.
b. Create a span element named spanElem. Set the class attribute of the span element to elemLI. (Hint: Use the className property to set the value of the class attribute.)
c. Declare a variable named elemText setting its initial value to the text string <elem where elem is the node name of the element specified in the elemNode parameter.
d. Next you'll examine all of the attribute nodes for the element specified by the elemNode parameter. Create a for loop to go through the nodes in the attributes collection for the elemNode parameter. Each time through the loop increase the value of the nodeCount and attCount variables by 1. Also add the following text string to the value of the elemText variable att='value'
where att is the node name of the attribute node and value is the node value of the attribute node.
e. After the for loop completes, append the text string > to the value of the elemText variable.
f. Create a new text node named elemTextNode containing the text of the elemText variable.
g. Append elemTextNode to spanElem; append spanElem to liElem; and finally, append liElem to nestedList.
7. Create the writeTextLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of a text node. The structure of the list item will be one of the two structures shown in Figure 14-69.
The function has two parameters: textNode, which represents the text node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create the liElem variable for a list item element node containing the text string +--.
b. Create the spanElem variable for a span element node.
c. Store the node value of the textNode parameter in the variable textString.
d. Jorge has provided a function named isWhiteSpaceNode() to determine whether
a text node represents white space or not. Call the isWhiteSpaceNode() function using textString as the parameter value.
e. If the isWhiteSpaceNode() function returns the value true, then: i) increase the value of the wsCount variable by 1; ii) set the class name of spanElem to wsLI; and iii) set the inner HTML of spanElem to the text string #text.
f. If the isWhiteSpaceNode() function returns the value false, then: i) set the class name of spanElem to textLI; and ii) set the inner HTML of spanElem to the value of the nodeValue property for the textNode parameter.
g. Append the spanElem node to the liElem node, and then append the liElem node to the nestedList parameter.
8. Create the makeTree() function. The purpose of this function is to recursively generate all of the nested lists contained in the node tree diagram. The function has two parameters: sourceNode, which represents the current node in the source document being added to the node tree diagram, and nestedList, which represents the nested list in the tree diagram that is being written. Add the following commands to the function:
a. Increase the value of the nodeCount variable by 1.
b. Using the nodeType property, determine whether sourceNode represents an element node or a text node. If it represents an element node, increase the value of the elemCount variable by 1 and call the writeElemLI() function using sourceNode and nestedList as parameter values. If it represents a text node, increase the value of the textCount variable by 1 and call the writeTextLI() function using sourceNode and nestedList as parameter values.
c. Use the childNodes.length property value to determine whether sourceNode contains any child nodes. If it does, then do the following: i) declare the newList variable containing an element node for the ol element; ii) store the text string | in newList; iii) loop through all of the child nodes for sourceNode, and for each child node call the makeTree() function using the child node and newList as the values for the sourceNode and nestedList parameters; and iv) after the loop has finished, append newList to nestedList.
9. Create the setup() function. The purpose of this function is to set up the node tree diagram and report the results. The function has no parameters. Add the following commands to the function:
a. Declare the sourceNode variable referencing the article element with the id main in the current document.
b. Declare the treeBox variable containing an aside element node. Set the id of treeBox to treeBox and set the innerHTML property to h1 Node Tree </h1>.
c. Declare the newList variable containing an ol element node, and then call the makeTree() function using sourceNode and newList as parameter values.
d. Append newList as a child of treeBox.
e. Append treeBox as a child of the section element with the id main.
f. Using the innerHTML property, display the values of the nodeCount, elemCount, attCount, textCount, and wsCount variables within the span elements whose ids are totalNodes, elemNodes, attNodes, textNodes, and wsNodes, respectively.
10. Use comments to document your JavaScript code throughout the program.
11. Save your changes to the file, and then load nodes.htm in your Web browser. Verify that a node tree similar to that shown in Figure 14-67 is displayed alongside Jorge's article, and that the article contains 247 total nodes, 99 element nodes, 8 attribute nodes, and 140 text nodes, of which 56 are white space nodes. (Note: Safari running under iOS may report 57 white space nodes.)
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 2 The VoterWeb

VoterWeb is an online source for election news and results from national. state, and local races. Faye Summerall is one manager of the Web site development team. Faye wants to add horizontal bar charts to Web pages displaying election results. The length of each bar should correspond to the percentage of votes that a candidate receives in a given race. She has asked you to develop a JavaScript program that automatically writes the bar chat. Figure 12-37 shows a preview of the Web page for a series of Congressional races.

The horizontal bar charts will be created within table rows. The length of each bar will be determined by the number of blank table cells it contains. For example, to display a horizontal bar representing 45% of the vote, you'll write 45 blank table cells. The color of each bar is determined by the background color of its table cells. To apply the background color, you'll add class attributes to the blank table cells. A style rule in the results. css style sheet will determine the background color for each class of table cells.
The data for each election has been stored in arrays in an external file named votes.js. The file includes data from five elections for different Congressional seats. The names of the races have been stored in an array named race. The name1 array contains the candidate names for the first race, thename2 array contains the candidate names for the second race, and so on through the name5array. The party affiliations for the candidates in the first race have been stored in theparty1 array, for the second race in the party2 array, and so forth. The votes1 through votes5 arrays store the votes for each candidate in each of the five races.

Complete the following:
1. Using your text editor, open electtxt.htm and bartxt.js from the tutorial.12\case2 folder, enter your name and the datein the head section, and then save the files as election.htm and barchart.js, respectively.

2. Open the votes.js ile from the tutorial.12\case2 folder in your text editor, study the file to become familiar with the different arrays and their contents, and then close the file. Return to theelection.htmfile in your text editor, and then add two script elements to the head section of the file pointing to thebarchart.js and votes.jsfiles. Save your changes to the document.

3. Go to the barchart.jsfile in your text editor. Insert a function namedtotalvotes(). The purpose of this function is to calculate the sum of all the values within an array. The function has a single parameter, votes, representing one of the five vote arrays (vote1 through vote5). Add the following commands to the function:
a. Declare a variable named total, setting its initial value to 0.
b. Create a for loop that loops through each of the items in the votes array, adding that item's value to the total variable.
c. After the for loop is completed, return the value of the total variable from the function.

4. Insert another function named calcPercent(). The purpose of this function is to calculate a percentage, rounded to the nearest integer. The function has two parameters: item and sum. Have the function return the value of the item parameter divided by sum, multiplied by 100, and then rounded to the nearest integer. (Hint: Use the Math.round() method to round the calculated percentage.)

5. Insert a function named createbar(). The purpose of this function is to write the blank table cells that make up each horizontal bar in the election results. The function has two parameters: partytype and percent. The partyType parameter will be used to store the party affiliation of the candidate (D, R, I, G, or L). The percent parameter will be used to store the percentage the candidate received in the election, rounded to the nearest integer. Add the following commands to the function:
a. Create a switch statement that tests the value of the partyType parameter. If partyType equals D, store the following text string in a variable named bartext: <td class='dem'> </td> If partyType equals R, barText should equal the following: <td class='rep'> </td> If partyType equals I, barText should equal the following: <td class='ind'> </td>
If partyType equals G, barText should equal the following: <td class='green'> </td> Finally, if partyType equals L, barText should equal the following: <td class='lib'> </td> Be sure to add a break statement after each case statement so browsers do not attempt to test additional cases after finding a match.
b. Create a for loop in which the counter variable goes from 1 up through the value of the percent parameter in increments of 1. At each iteration, write the value of the barText variable to the Web document.

6. Insert a function named showresults(). The purpose of this function is to show the results of a particular race. The function has four parameters: race, name, party, and votes. The race parameter will contain the name of the race. The name parameter will contain the array of candidate names. The party parameter will contain the array of party affiliations. Finally, thevotes parameter will contain the array of votes for each candidate in the race. Add the following commands to the function:
a. Declare a variable named totalv equal to the value returned by the totalVotes() function using votes as the parameter value.
b. Write the HTML code <h2>race</h2> <table> <tr> <th>Candidate</th> <th class='num'>Votes</th> <th class='num'>%</th> </tr> to the document, where race is the value of the race parameter.

7. Next, within the showResults() function, add a for loop in which the counter variable starts at 0 and, while the counter is less than the length of the name array, increase the counter in increments of 1. At each iteration of the for loop, run the commands outlined in the following five steps:
a. Write the HTML code <tr> <td>name (party)</td> <td class='num'>votes</td> where name, party, and votes are the entries in the name, party, and votes arrays, respectively, for the index indicated by the counter variable.
b. Create a variable named percent equal to the value returned by the calcPercent() function. Use the current value from the votes array for the value of the item parameter, and use the value from totalV for the value of the sum parameter.
c. Write the HTML code <td class='num'>(percent%)</td> where percent is the value of the percent variable.
d. Call the createBar() function using the current value of the party array and percent as the parameter values.
e. Write a closing </tr> tag to the document.

8. After the for loop has completed within the showResults() function, write a closing </table> tag to the document.

9. Write comments throughout your code to document your work.

10. Save your changes to the file, and then return to theelection.htmfile in your text editor. Scroll down the document. After the Congressional Races h1 heading, insert a script element containing the following commands:
a. Call the showresults() function using race[0], name1, party1, and votes1 as the parameter values.
b. Repeat the previous command for the remaining four races, using race[1] through race[4] as the parameter values for the race parameter, party2 through party5 for the party parameter, name2 through name5 for the name parameter, and votes2 through votes5 for the votes parameter.

11. Save your changes to the file, and then openelection.htm in your Web browser. Verify that the correct percentage appears for each candidate, and that a horizontal bar chart representing the percent value is displayed next to each candidate.

12. Submit your completed Web site to your instructor, in either printed or electronic form, as requested.

CIS363A Week 3 iLab 3 Create a Web Page Using CSS

A local recruiter wants you to make a Web page for his information technology staffing company. He wants a Web page that has informed recent graduates about careers as Web programmers and Web designers. Create a Web page that will give information about each of the positions mentioned. The page content should be as followed:
Descriptions about each of the positions
Skills and/or education required for these positions
Salaries, benefits associated with these positions
Professional organizations of which people who hold these positions are typical members

This page must have at least five graphical elements. You must implement the following CSS features:
Box Model
Floating Elements
Borders
Remember that the recruiter wants this page to be well organized, informative, and attractive. Use colors and great graphics to make this Web page interesting so that he can attract more business.

Software Citation Requirements
This course uses open-source software which must be cited when used for any student work. Citation requirements are on the Open Source Applications page.
Please review the installation instruction files to complete your assignment

Deliverables
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions. (See the Syllabus section "Due Dates for Assignments & Exams" for due dates.)
Submit a Week 3 Lab folder, including
The HTML Web page
Associated CSS files
Images and multimedia (if any)

Category Points
Use of Box Model, bordering, and floating elements 15
Completed Web page based on project specifications 15
Correct External CSS file that attaches to each page 10
Total 40

Required Software
Software Name 1
Access the software at https://lab.devry.edu.
Steps: 1, 2, and 3
Software Name 2
Access the software at https://devrydesktop.rkon.com.
Steps: 4 and 5

Lab Steps
STEP 1: Gather Web Content
Create written Web content about each of the positions.
Gather all images that you will use.

STEP 2: Create Your Web Page
Create an informal page layout for the Web page.
Create the Web page based on criteria mentioned.

STEP 3: Submit Your Assignment
Upon completion of this step, upload your site to the Web server and attach a copy of the zipped folder to the Dropbox.
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 13 Case 1 Twin Life Magazine

Twin Life Magazine Elise Howard is the editor of Twin Life, a magazine for parents of twins, triplets, and other multiple births. The magazine is upgrading its Web site and Elise has approached you to help with the website design. She would like to give readers the ability to increase or decrease the font size of the articles the magazine publishes to make the text easier to read, or to allow readers to view an entire article on the same screen. Although readers can use their Web browsers to zoom in and zoom out of the Web pages, Elise wants an app that will affect only the article text and accompanying photo, while leaving the rest of page features - the magazine logo and list of links - unaffected.
To create this effect, her sample page has two buttons: one to increase the font size and other to decrease it. All text and page objects that are to be resized have been set using the relative em unit, while the other page text and objects that are to remain fixed in size have been set in pixels. Thus to change the size of all of the resizable objects, your code simply needs to change the default size of the document page body; all of the resizable objects will change proportionally based on the default font size. Figure 13-39 shows a preview of the article and resizing buttons that you'll work on for Twin Life.

Complete the following:
1. Using your text editor, open twinstxt.htm, tlmtxt.css, and fonttxt.js from the tutorial.13\case1 folder. Enter your name and the date in the head section, and then save the files as twins.htm, tlm.css, and fontsizer.js, respectively.
2. Go to the twins.htm file in your text editor and add a script element linking to the fontsizer.js file.
3. Scroll down the file and locate the fontbuttons div element, which contains two image buttons. Place both image buttons in the fontsizer class. Set the values associated with those buttons to -0.1 for the fontdown.png image and 0.1 for fontup.png.
4. Save your changes to the file, and then go to the tlm.css file in your text editor.
5. At the bottom of the file, insert a style rule to set the width of the inline image within the figure box in the article element to 12em.
6. Add another rule to set the font size of paragraph text within the article element to 1em.
7. Save your changes to the file, and then go to the fontsizer.js file in your text editor.
8. Add a command to run the startup() function when the page is initially loaded by the browser.
9. Create the startup() function. The purpose of this function is to apply onclick event handlers to the two font resize buttons. Create the fontButtons variable containing all of the page elements that belong to the fontsizer class. Loop through that collection and add an event handler to each item in the collection to run the resizeText() function when clicked.
10. Create the resizeText() function. The purpose of this function is to change the default font size of the document body based on the value of the font button being clicked. When that value is changed, all object sizes based on em units automatically will be resized. Add the following commands to the function:
a. Using the parseFloat() function, store the numeric value of the button being clicked in the fontChange variable.
b. Next, you must determine whether an inline style has been used to set the default document body font size. First, test whether the font size of the document body is equal to an empty text string. If it is, set the font size to 1.0em. (Hint: Use the reference document.body to reference the document body.)
c. Use the parseFloat() function to store the numeric value of the document body font size in the currentFontSize variable.
d. Change the document body font size to the text string current font size + font change + "em" where current font size is the value of the currentFontSize variable and font change is the value of the fontChange variable.
11. Document your code with appropriate comments throughout.
12. Save your changes to the file, and then load twins.htm in your Web browser. Verify that when you click the buttons to increase or decrease the font size, the paragraph text and the size of the author’s photo change in response, but no other part of the Web page changes in size.
13. Submit your completed files to your instructor, in either printed or electronic form, as requested.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 12 Case 1 The Lighthouse

The Lighthouse is a charitable organization located in central Kentucky that matches donors with needy groups. The fundraising coordinator for The Lighthouse is Aaron Kitchen. On an administration Web page available only to Lighthouse staff, Aaron wants to display a list of information on recent donations, including the name and address of the donor, the amount donated, and the date of the donation. A list of donations from the last month has been downloaded from an external database and stored in a collection of arrays named firstName, lastName, street, city, state, zip, amount, and date. Aaron needs your help with displaying the data from those arrays in a Web table. He also wants a summary table that displays the total number of contributors and the total contribution amount. Figure 12-36 shows a preview of the Web page you’ll create.

Complete the following:
1. Using your text editor, open clisttxt.htm and tablestxt.js from the tutorial.12\case1 folder. Enter your name and the date in the head section, and then save the files as clist.htm and tables.js, respectively.
2. Go to the clist.htm file in your text editor. The firstName, lastName, street, city, state, zip, amount, and date arrays have been created and populated for you in the april.js file. In the head section of the document, insert a script element that points to this file.
3. Aaron already has created a style sheet for the tables that will display the list of contributors and the summary of their contributions. Add a link to the tables.css style sheet in the Web page.
4. Save your changes to the file, and then go to the tables.js file in your text editor.
5. Add a function named showTable() that will be used to display the table containing the contributor list. The function has no parameters. Add the following commands to the function:
a. Write the following code to the document to create the header row for the table of contributions:
<table id='contributors'>
<thead>
<tr>
<th>Date</th><th>Amount</th>
<th>First Name</th><th>Last Name</th>
<th>Address</th>
</tr>
</thead>
b. Write the <tbody> tag to the document.
c. Next, you’ll create a table row for each person listed in the lastName array. Create a for loop that loops through each entry in the lastName array. Each time through the loop, write the HTML code
<tr>
<td>date</td>
<td class='amt'>amount</td>
<td>firstName</td>
<td>lastName</td>
<td>street <br />
city, state zip
</td>
</tr>
to the document, where date, amount, firstName, lastName, street, city, state, and zip are the items from the date, amount, firstName, lastName, street, city, and zip arrays, respectively, corresponding to the value from the counter variable in the for loop.
d. After the for loop, write the </tbody> tag to close off the table body.
e. Write the </table> tag to close off the Web table.
6. Create a function named showSummary() that will be used to calculate and display the total number of contributors and the total amount of contributions. The function has no parameters. Add the following commands to the function:
a. Declare the total variable, setting its initial value to 0.
b. Loop through each of the entries in the amount array, adding each item's value to the total variable.
c. Write the HTML code
<table id='sumTable'>
<tr>
<th id='sumTitle' colspan='2'>Summary</th>
</tr>
<tr>
<th>Contributors</th>
<td>contributors</td>
</tr>
<tr>
<th>Amount</th>
<td>$total</td>
</tr>
</table>
to the document, where contributors is the length of the lastName array and total is the value of the total variable.
7. Document your code using descriptive comments. Close the file, saving your changes, and then return to the clist.htm file in your text editor.
8. Add a script element to link to the tables.js file you created.
9. Scroll down to the figure box for the contribution totals. Within the figure box, insert a script element that runs the showSummary() function.
10. Scroll down to the figure box for the contributors data list. Within the figure box, insert a script element that runs the showTable() function.
11. Save your changes to the file, and then open clist.htm in your Web browser. Verify that the summary and contributor list tables appear as shown in Figure 12-36.
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.

New Perspectives on HTML and CSS Edition 6 Tutorial 4 Case Problem 2 Creating Page Layouts with CSS

Data Files needed for this Case Problem: modernizr-1.5.js, notice.png, pizzatxt.c, rblogo.png, redhalltxt.htm, redbar.png, slice.png, toppings.png
Red Ball Pizza Alice Nichols is the owner of Red Ball Pizza, a well-established pizzeria in Ormond Beach, Florida. She's asked for your help in creating a design for the company's Website. After discussing the issue with Alice, you settle on a fixed width layout. Alice has created a sample home page for you to work on. She already created all of the content and the graphics. She needs your help with the design. Figure 4-79 shows a preview of the page you'll create for her.

Complete the following:
1. In your text editor, open the pizzatxt.css and redballtxt.htm files from the tutorial.04\case2 folder. Enter your name and the date in the comment section of each file. Save the files as pizza.css and rcdhall.htm, respectively.
2. Return to the redball.htm file in your text editor. Take some time to review the content and structure of the document, and then link the file to the pizza.css style sheet. Close the file, saving your changes.
3. Go to the pizza.css file in your text editor. Create a style rule to display the header, section, aside, tooter, and nav elements as blocks.
4. Set the default padding and margin size to 0 pixels.
5. Create a style for the body element to: a) set the background color to red; and b) set the font family to Verdana, Geneva, or sans-serif.
6. The entire content of the page has been enclosed in a div container element with the id container. Create a style rule for this container to: a) set the width to 1000 pixels; b) center the container in the browser window by selling the top/bottom margins to 0 pixels and the left/right margins to auto; c) display a 1-pixel solid black border on the left and right edges; and d) set the background color to white and display the redbar.png image file as the background image, placing the image file in the top-left corner of the container and tiling it in the vertical direction only.
7. Change the background color of the header element to white and set its height to 100 pixels.
8. Create a style rule for the horizontal navigation list to: a) set the height to 70 pixels and the width to 100%; and b) set the background color to white.
9. For eath list item within the horizontal navigation list, create a style rule to: a) set the background color to white; b) set the font size to 16 pixels, the height and the line height to 50 pixels, and the width to 180 pixels; c) display the item as a block and float it on the left; d) set the left and right margins to 5 pixels; and e) horizontally center the contents.
10. For each hypertext link within a list item in the horizontal navigation list, create a style rule to: a) display the link as a block; b) set the background color to red and the text color to white; c) create elongated corners with a horizontal radius of 10 pixels and a vertical radius of 25 pixels (use progressive enhancement to support browser extensions); and d) remove the text underlining. If a user hovers a mouse pointer over these links, change the background color to the value (255, 101, 101) and the text color to black.
11. Create a style rule for the vertical navigation list to: a) float it on the left only when the left margin is clear; and b) set the width to 200 pixels.
12. For list items within the vertical navigation list, create a style rule to: a) remove the list item marker; b) indent the text 20 pixels; and c) set the top and bottom margins to 20 pixels.
13. For hypertext links within the vertical navigation list, set the text color to white and remove the text underlining. When a user hovers the mouse pointer over these links, change the text color to black.
14. The main content of the Web page is contained in a section element with the id main. Create a style rule for this element to: a) change the background color to the value (255, 211, 211); b) float the element on the left; and c) set the width to 600 pixels.
15. For paragraphs that are direct children of the main section, set the font size to 20 pixels and the margin to 15 pixels.
16. For inline images within the main section, create a style rule to: a) float the image on the right; b) set the margin to 15 pixels; c) set the width to 350 pixels; and d) set the radius of the bottom-left corner to 350 pixels (use progressive enhancement to support the Mozilla and WebKit browser extensions).
17. Alice has included six coupons in the home page that have been nested within div elements belonging to the coupon class. For each coupon div element: a) add a 5-pixel dashed black border; b) float the coupons on the left; c) set the width to 170 pixels and the height to 150 pixels; and d) set the top and bottom margins to 20 pixels, and the left and right margins to 10 pixels.
18. To the style rule for the coupons, add style properties to create the following two background images: a) place the slice.png image in the center of the coupon without tiling; and b) place the notice.png image in the bottom-right corner of the coupon without tiling. Set the background color of the coupon to white.
19. For h1 headings within the coupons, add a style rule to: a) set the text color to white on a background with the color value (192, 0, 0); b) set the font size to 16 pixels and the kerning to 2 pixels; c) center the text; d) set the height to 25 pixels; and e) display the text in small caps.
20. For paragraphs within the coupons, create a style rule to: a) set the font size to 14 pixels; b) center the text; and c) set the margin to 5 pixels.
21. Alice has placed interesting tidbits about pizza in an aside element. Float the aside element on the left with a width of 200 pixels.
22. For h1 headings within the aside element, create a style rule to: a) set the text color to the value(l92, 0,0); b) set the font size to 20 pixels and the kerning to 2 pixels; c) set the font weight to normal; and d) center the text of the headings.
23. For list items within the aside element, create a style rule to: a) set the background color to the value (255, 135, 1 35); b) add round corners with a 5-pixel radius; c) set the text color to black; d) remove the list style maker; and e) set the margin to 10 pixels and the padding to 5 pixels.
24. Display the footer element when the left margin is clear, and set the size of the left margin to 200 pixels.
25. For the address element within the footer element, create a style rule to: a) add a l-pixel solid red border to the top of the element; b) change the text color to red; c) set the font size to 10 pixels, set the font style to normal, and center the address text; and d) set the top margin to 25 pixels and the bottom padding to 20 pixels.
26. Add style comments throughout your style sheet to document your work and then save your changes.
27. Open the redhall.htm file in your Web browser and verify that the design and layout resemble that shown in Figure 4-79.
28. Submit your completed files to your instructor, in either printed or electronic form, as requested.