HTML/JS

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 13 Case 3 The 221B Blog

The 221B Blog Kyle Harris is a fan of mystery stories. His favorites are the Sherlock Holmes stories by Sir Arthur Conan Doyle. Kyle decided to create a Web site for other fans of the fictional detective; the site is called The 221B Blog, named after the street number of Holmes’ fictional Baker Street address.
On his Web site, Kyle has added a discussion forum, links to other mystery Web sites, and a place for members to post artwork, essays, and fan fiction. Kyle also has created links to online text versions of all of the 56 short stories and four novels in the Sherlock Holmes canon. Kyle is concerned that having so many links on the home page will make it difficult for users to navigate the site. He’s seen sites in which lists of links are stored in popup or pull-down menus, remaining out of sight until needed by a user. Kyle wants to add a similar feature to his Web site and has asked you to help him write the code.
Each pull-down menu will have a heading that identifies the contents of the menu. Kyle envisions the HTML structure shown in Figure 13-41 in which the pull-down menus are nested within another list that acts as a menu bar. Each pull-down menu is identified with the class name submenu, and the h1 element containing each heading is identified with the class name submenuHead.

Kyle already has created the style sheet for the menus and the HTML code for the Web page. Your job will be to write the JavaScript code to control the operation of the pull-down menus on the page.

Complete the following:
1. Using your text editor, open the holmestxt.htm, pulltxt.css, and pulltxt.js files from the tutorial.13\case3 folder, enter your name and the date in the comment section of each file, and then save the files as holmes.htm, pullmenu.css, and pullmenu.js, respectively.
2. Take some time to view the contents of the holmes.htm file in your text editor, noting the structure of the two navigation lists and the submenus within each of those lists.
3. Open the holmes.htm file in your Web browser, and then study the placement of the six pull-down menus for the stories and novels of Sherlock Holmes. The page also contains four pull-down menus in the vertical navigation bar containing links to Web sites for User Submissions, Holmes on the Web, Arthur Conan Doyle, and Other Fictional Detectives, but these are obscured by the horizontal pull-down menus at the moment.
4. Go to the pullmenu.css file in your text editor. At the bottom of the file, insert the following two style rules: i) hide the ul elements nested within the li elements belonging to the submenu class by setting their display property to none; and ii) display a pointer cursor for h1 elements belonging to the submenuHead class.
5. Save your changes to the file and then return to the holmes.htm file in your text editor.
6. Add a script element linking the file to the pullmenu.js file and then close the file, saving your changes.
7. Go to the pullmenu.js file in your text editor. Insert a command to run the init() function when the page is loaded by the browser.
8. Create the init() function. The purpose of this function is to add a dynamic id attribute
to each pull-menu heading, and to create an onclick event handler for each submenu heading. Add the following commands to the function:
a. Create the submenuHeads variable containing the object collection for all elements in the document belonging to the submenuHead class.
b. Loop through the submenuHeads object collection, and for each item in the collection do the following: i) add the id attribute isubmenu_heading to the element, where i is the index number of the item in the object collection; and ii) run the showMenu() function when the item is clicked.
9. Create the hideAllMenuLists() function. The purpose of this function is to hide all pull-down menus on the page. Add the following commands to the function:
a. Create the allMenuLists variable referencing all of the ul elements in the document that are nested within the li elements belonging to the submenu class. (Hint: Use the querySelectorAll() method.)
b. Loop through the allMenuLists object collection. For each item in the collection, set the display style property value to none.
10. Create the showMenu() function. The purpose of this function is to display the pulldown menu corresponding to the menu heading that was clicked by the user. Add the following commands to the function:
a. Create the subIndex variable containing the index number found within the id property of the heading that was clicked by the user. (Hint: Use the parseInt() function to extract the index number.)
b. Create the allMenus variable containing the object collection of all elements belonging to the submenu class.
c. Create the currentMenu variable containing the element from the allMenus object collection with the index number indicated by the subIndex variable.
d. Create the currentMenuList containing the first ul element nested within the currentMenu object. This will be the pull-down menu that you will either hide or display on the page.
e. If the display property of currentMenuList is equal to block, change the display property to none to hide it; otherwise, because currentMenuList must be hidden, run the hideAllMenuLists() function to hide all other pull-down menus on the page and change the display style property of currentMenuList to block.
11. Document your code with informative comments throughout the JavaScript file.
12. Save your changes to the file, and then reload holmes.htm in your Web browser. Verify that when you click the pull-down menu headings located on the menu bar or on the vertical navigation list, the corresponding menu is displayed. Further verify that only one pull-down menu can be displayed at a time. Finally, verify that you can hide any pull-down menu by clicking the menu heading a second time.
13. Submit your completed files to your instructor, in either printed or electronic form, as requested.

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 1 New Accents Photography

After you have completed all of the tutorials in Chapter 14, turn to page 1001 in your textbook and do Case Problem 1, New Accents Photography. Make sure all files are uploaded to cPanel and submit your URL for the accents.htm file when you are finished.

Use JavaScript to create a dynamic style sheet switcher.

Data files needed for this Case Problem: accentstxt.htm, base.css, elegant.css, elegant.png, elegant_back.png, elegant_small.png, innovative.css, innovative.png, innovative_back.png, innovative_small.png, joyous.css, joyous.png, joyous_back.png, joyous_small.png, modernizr-1.5.js, nalogo.png, romantic.css, romantic.png, romantic_back.png, romantic_small.png, styletxt.js, zany.css, zany.png, zany_back.png, zany_small.png

New Accents Photography Christine Drake is the owner and chief photographer at New Accents Photography, a photography studio in Ashland, Oregon, that specializes in wedding photos. Wedding portraiture is a competitive business. and Christine wants to improve the design of her Web site's opening page to help interest couples in viewing her work. Christine is proud of the many and varied styles of portraiture that New Accents Photography offers, and she would like to create an interactive style sheet switcher that loads different style designs based on her photos.
Christine envisions making several style sheets, and she wants to limit the amount of work she'll have to do when updating the HTML code as she adds new sheets to her site. She would like your help with writing a JavaScript app that examines the list of style sheets in the site's home page and creates a figure box of clickable thumbnail images for each sheet design. A preview of the page you'll create for Christine is shown In figure 14-66.

Christine already has written the style sheet code and most of the HTML code. Your job will be to write the JavaScript code to enable her customers to switch from one style  design to another.

Complete the following:
1. Using your text editor, open accentstxt.htm and styletxt.js from the tutorial.14\case1 folder. Enter your name and the date in the comment section of each file, and then save the files asaccents.htm and stylebox.js, respectively.

2. Go to the accents.htm file in your text editor. Currently, Christine has only one persistent style sheet linked to her document. Create a link to the preferred style sheet romantic.css and give it the title romantic.

3. Create links to the following alternate style sheets: elegant.css, joyous.css, innovative.css, and zany.css. Give the style sheets the titles elegant, joyous, innovative, and zany, respectively. Do not disable any of these style sheets at this time. 

4. Create a link to the styleBox.js file. Take some time to study the rest of the HTML code and then close the file, saving your changes.

5. Go to the styleBox.js file in your text editor. Below the comments, declare a global variable named allSheets and set it equal to an empty array. The purpose of the allSheets variable will be to store references to each preferred and alternate style sheet in the document.

6. Add a command to run the loadStyles() function when the page is initially loaded.

7. Create the loadStyles() function. The purpose of this function is to load all of the preferred and alternate style sheets into the allSheets variable. Add the following commands to the function:
 a. Declare the links variable referencing all link elements in the document.
 b. Loop through the contents of the links object collection. For each item, determine whether it represents a preferred or alternate style sheet with a defined title.
 c. Disable each alternate style sheet, but leave the preferred style sheet enabled.
 d. Use the  push() array method to add each preferred or alternate style sheet to the allSheets array.
 e. After the completion of the for loop, call the displayThumbs() function.
 
8. Create the displayThumbs() function. The purpose of this function is to display thumbnail images of each style sheet design from the allSheets array. Add the following commands to the function:
 a. Create an element node for the figure element and store it in the figBox variable.
 b. Set the id of the figBox element node to the text string thumbnails.
 c. Loop through each item in the allSheets array, and do the following for each item:
  i)  create an element node for the img element and store it in the sheetImg variable;
  ii) set the source of the sheetImginline image to the file title_small.png, where title is the title value of the current style sheet in the loop; iii)set the title attribute of the inline image to match the title attribute of the current style sheet;
  iv) add an onclick event handler to the inline image to run the showSheet() function when clicked; and
  v)  append sheetImg to the figBox node.
 d. After the for loop has completed, append the figBox node to the document element with the id main.
  
9. Create the showSheet() function. The purpose of this function is to change the style sheet used in the document. Add the following commands to the function:
 a. Declare the variable sTitle, setting it equal to the title attribute of the inline image that called the showSheet() function. (Hint: Use the this keyword to reference the inline image.)
 b. Loop through all of the sheets in the allSheets array. Enable the style sheet whose title attribute equals sTitle and disable all of the others.
 
10. Document your work with descriptive comments throughout your code.

11. Save your changes to the file, and then open accents.htm in your Web browser. Verify that five inline images have been added near the bottom of the Web page. Click each thumbnail image and verify that it loads a different style sheet. (Note: If you are using Safari for Windows or Macintosh Version 5.1.2, this style sheet  switcher will not work.)

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

New Perspectives HTML5 and CSS3 7th Edition Tutorial 5 Case 3 Cauli-Wood Gallery

Cauli-Wood Gallery Sofia Fonte is the manager of the Cauli-Wood Gallery, an art gallery and coffee shop located in Sedona, Arizona. She has approached you for help in redesigning the gallery's website to include support for mobile devices and tablets. Your first project will be to redesign the site's home page following the principles of responsive design. A preview of the mobile and desktop versions of the website's home page is shown in Figure 5-61.

Sofia has already written much of the HTML code and some of the styles to be used in this project. Your job will be to finish the redesign and present her with the final version of the page.

Complete the following:
1. Using your editor, open the cw_home_txt.html and cw_styles_txt.css files from the html05 case3 folder. Enter your name and the date in the comment section of each file, and save them as cw_home.html and cw_styles.css respectively.

2. Go to the cw_home.html file in your editor. Within the document head, insert a meta element that sets the browser viewport for use with mobile devices. Also, create links to cw_reset.css and cw_styles.css style sheets. Take some time to study the contents and structure of the document and then close the file saving your changes.

3. Return to the cw_styles.css file in your editor. At the top of the file, use the @import rule to import the contents of the cw_designs.css file, which contains several style rules that format the appearance of different page elements.

Explore 4. At the bottom of the home page is a navigation list with the id bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. Be sure to include the WebKit browser extension in all of your flex styles.

5. Define flex values for ul elements within the bottom navigation list so that the width of those elements never exceeds 150 pixels but can shrink below that value.

6. Sofia wants more highly contrasting colors when the page is displayed in a mobile device. Create a media query for mobile screen devices with maximum widths of 480 pixels. Within that media query, insert a style rule that sets the font color of all body text to rgb(211,211,211) and sets the body background color to rgb(51, 51, 51).

7. Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following elements for mobile users: the aside element, any img element within the article element, and the spotlight section element.

8. At the top of the web page is a navigation list with the ID top. For mobile devices, display the ul element within this navigation list as a flexbox row with wrapping. For each list item within this ul element, set the font size to 2.2em. Size the list items by setting their flex values to 1 for the growth and shrink rates and 130 pixels for the basis value.

9. Under the mobile layout, the six list items in the top navigation list should appear as square blocks with different background images. Using the selector nav#top ul li:nth-of-type( 1 ) for the first list item, create a style rule that changes the background to the background image cw_image01.png. Center the background image with no tiling and size it so that the entire image is contained within the background.

10. Repeat the previous step for the next five list items using the same general format. Use the cw_image02.png file for background of the second list item, the cw_image03.png file for the third list item background, and so forth.

Explore 11. Sofia has placed hypertext links for the gallery's phone number and e-mail address in a paragraph with the id links. For mobile users, she wants these two hypertext links spaced evenly within the paragraph that is displayed below the top navigation list. To format these links, create a style rule that displays the links paragraph as a flexbox row with no wrapping, then add a style that sets the value of the justify-content property of the paragraph to space-around.

12. She wants the telephone and e-mail links to be prominently displayed on mobile devices. For each a element within the links paragraph, apply the following style rule that: a) displays the link text in white on the background color rgb(220, 27, 27), b) sets the border radius around each hypertext to 20 pixels with 10 pixels of padding, and c) removes any underlining from the hypertext links.

13. Next, you'll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the page body as a flexbox in row orientation with wrapping.

14. The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1,2, and 200 pixels.

Explore 15. For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul as a flexbox with a background color of rgb(51, 51, 51) and a height of 50 pixels. Use the justify-content and align-items property to center the flex items both horizontally and vertically.

16. Define the flex size of each list item in the top navigation list to have a maximum width of 80 pixels but to shrink at the same rate as the width if the navigation list is reduced.

17. Sofia doesn't want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph.

18. Save your changes to the style sheet and then open the cw_home.html file in your browser or device emulator. Verify that the layout and contents of the page switch between the mobile version and the tablet/desktop version shown in Figure 5-61 as the screen width is increased and decreased.

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 8 Case 2 Willet Creek Golf Course

Willet Creek Golf Course Willet Creek is a popular golf course resort in central Idaho. You’ve been asked to work on the design of the resort’s Web site by Michael Carpenter, the head of promotion for the resort. He would like you to add some CSS3 visual effects for drop shadows and gradients. Figure 8-66 shows a preview of the screen version of the Web page.

Complete the following:
1. In your text editor, open the willettxt.htm and wceffectstxt.css files from the tutorial.08\case2 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as willet.htm and wceffects. css, respectively.

2. Go to the wceffects.css file and create a shadow effect for the body element. The effect should contain two box shadows, both with a color value of (31, 61, 31) and an opacity of 0.9. Place the first shadow with a horizontal offset of 20 pixels, a vertical offset of 0 pixels, and a blur of 25 pixels. Do the same for the second shadow, except place the shadow with a horizontal offset of 220 pixels.

3. Set the opacity of the div elements nested within the aside elements to 75%. Use both the CSS3 opacity style and the IE Alpha filter. Add a box shadow that has a color value of (101, 101, 101) with an opacity of 0.7. Set the horizontal and vertical offsets to 5 pixels and the blur to 10 pixels. You do not have to add an IE filter for the box shadow.

4. Save your changes to the file, and then return to the willet.htm file in your text editor. Add a link to the wceffects.css style sheet file, using the style sheet for screen devices that have a minimum width of 501 pixels. Add the same media query for the wclayout.css style sheet file.

5. Use an Internet Explorer conditional comment for versions of IE before version 9 to link to the wclayout.css and wceffects.css style sheet files for screen devices.

6. Save your changes to the document, and then open the willet.htm file in your Web browser. Verify that the appearance and layout of your page resemble those shown in Figure 8-66.

7. Many golfers playing the courses at Willet Creek like to receive information and advice about each hole. Michael would like you to create a mobile version of the Web page so that golfers with mobile devices can view information about the course during their rounds. Figure 8-67 shows a preview of the Web app you’ll create.

8. Open the wcmobiletxt.css file from the tutorial.08/case2 folder in your text editor. Enter your name and the date in the comment section of the file, and then save it as wcmobile.css.

9. Within the style sheet file, add a style rule to hide the navigation list in the header, the inline image in the header, the main section, the aside
element, and the page footer.

10. Set the background color to the value (107, 140, 80).

11. For the header element, create a style rule to: a) change the background color to the value (151, 201, 151) with the image file willet.jpg placed in the left-center of the background with no tiling; b) set the size of the background image to contain; c) set the width to 100%; and d) set the height to 50 pixels.

12. The navigation list containing links to each of the 18 holes in the Grand Course has the id holes. Create a style rule to set the width of this navigation list to 100%.

13. For h1 elements within the holes navigation list, create a style rule to: a) set the font size to 25 pixels; b) set the font color to white; c) set the margin to 15 pixels; and d) center the text of the heading.

14. For list items in the holes navigation list, create a style rule to: a) display the items as blocks; b) add the background image file arrow.png to the right-center of the background with no tiling; c) set the width to 60% and the height to 50 pixels; d) add top and bottom margins of 5 pixels, and add left and right margins of auto; e) add a 1-pixel-wide solid white border to each list item and create rounded borders with a radius of 10 pixels; and f) add inset box shadows to the list items with a color value of (51, 51, 51) and an opacity of 50% (the inset shadows should appear in the lowerleft corner of each list item with a horizontal offset of 10 pixels, a vertical offset of 5 pixels, and a blur of 20 pixels).

15. For hypertext links within each list item, add a style rule to: a) display the link as blocks; b) set the width to 100% and the line height to 50 pixels; c) set the font color to white; and d) horizontally center the text of the link.

16. For odd-numbered list items, set the background color to the value (187, 105, 123). (Hint: Use the pseudo-class nth-of-type(odd).) For even-numbered list items, set the background color to the value (150, 80, 100).

17. The preceding styles will be applied by default to the page in portrait orientation. Create an @media rule for the page in landscape orientation.

18. Add the following style rule for list items displayed in landscape orientation: a) set the width to 30%; b) float the list items on the left; and c) set the margins to 5 pixels.

19. Save your changes to the style sheet, and then return to the willet.htm file in your text editor.

20. Within the willet.htm file, insert a viewport meta element.

21. Create a link to the wcmobile.css file to be accessed by only screen devices with maximum widths of 500 pixels.

22. Save your changes to the file, and then open the willet.htm file in your mobile device or with your browser window resized to a width of less than 500 pixels. Verify that for smaller screen widths, the mobile version of the page is displayed. Further verify that the layout of the links to individual holes changes depending on whether the page is in portrait or landscape orientation.

23. Submit your completed files to your instructor.

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.

IT 270 HTML Form Module 6 Assignment

In this assignment you need to create an HTML page that meets the following requirements. The theme and content of the page can be of your choice. (Refer to Tutorial 13)

1. Create an HTML form.
2. Create and Initialize three arrays.
3. Use for-loops to populate those arrays.
4. Add an element to the end of one array.
5. Remove an element from the end of another array.
6. Add a new element to the beginning of one array.
7. Add at least one additional array method of your choice.
8. Convert an array to a string.
9. Use the converted string, assign to a string variable, and use it to populate a form field.
10. Create different functions to handle the operations of steps 4, 5, 6, and 7. (You can create additional array methods.)
11. Create four or more buttons on the form with different event handlers to start the above functions upon clicking them.
12. Create an additional button with an event handler to complete the operation in step 10.
For additional details, refer to the IT 270 Assignments Rubric document in the Assignment Guidelines and Rubrics section of the course.

Critical Elements Exemplary Proficient Needs Improvement Not Evident Value
Design
The design is clean and professional looking and has a high level of creativity.
(27-30) Most of the design is clean and professional looking and has a moderate level of creativity.
(24-26) The design is adequate but shows little creativity.
(21-23) The design is poor and shows no creativity.
(0-20) 30
Integration and Application All relevant course and module concepts are correctly applied where required.
(54-60) Most of the relevant course and module concepts are correctly applied where required.
(48-53) Some of the relevant course and module concepts are correctly applied where required.
(44-47) Does not correctly apply any of the course or module concepts where required.
(0-43) 60
Writing Mechanics No errors related to organization, grammar and style, and citations
(9-10) Minor errors related to organization, grammar and style, and citations
(8) Some errors related to organization, grammar and style, and citations
(7) Major errors related to organization, grammar and style, and citations

(0-6) 10
Earned Total
Comments: 100%