In problem 2 you will insert an image map and process the links with JavaScript. You will then insert a web page into your own web page with an iFrame element. Then in problem 3 you will build and validate a form using HTML 5.

Remember your site this term is a ‘Rummage Sale” site. 

 

Problem 1Your boss has asked you to start working on the new web site.

He wants a table that shows the list of products that are available. He wants to see small pictures of the products with each product in the table. When you click on the small image, he wants to see the larger original image.

Learning Outcomes

• Demonstrate creativity and problem-solving skills.
• Analyze web programs in order to test, debug, and improve them 
• Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.
• Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall structure and Product table

1. Save a file as a word document. Add this to your web site in the homework folder after you have completed both problems.
2. Gather your data and create your basic page structure and style sheets.

1. You need to determine which page layout you will use for the rest of the course based on week2-1.html or week2.2.html (the jumbotron).
2. Copy the code from your choice page, to a new page called template.html. Remove the code that is page-specific so that you can reuse the page for the rest of the course. Each week you can copy the basic skeleton code from this template to the pages you work with each week. Make sure you have links to all of the pages for this week and the home button in your main navigation menu.
3. Have your CSS file all ready to go for each week. Create a single style sheet that you can refer to each week as well. You can call it homework.css. If you have any custom code from your week 2 web page, you can insert it into the homework.css file.
4. Make sure the template.html page works first, before proceeding. View it in the browser.
5. You should have a consistent style or theme for your web site that is unique. Don’t copy off of other web sites!
6. Create a new page called week3-3.html and put it in the pages folder.
7. Copy the code from the template.html file to the week3-1.html, week3-2.html and week3-3.html pages so that they all have the same style.

Create your table 

1. On week3-1.html, create the table of the product list. You will use this table in the future weeks. So make sure to complete all the steps.
2. Create the table
3. Use column headings and row headings, table caption and summary.
4. You may merge cells together wit rowspan or colspan.
5. Make sure not to use deprecated attributes like bgcolor or cellpadding.
6. Insert 5 products with this data! You will need to makeup data and insert it into your web page. Make up your own data. Here are the columns:

• • Product Name
  • Manufacturer, Make, Model
  • Condition (New or Used)
  • Description
  • Retail Price
  • Rummage Sale Price
  • Picture

  7. The last column will show the picture as a ‘thumbnail image’.

• • That means that you need a small image and large image.
  • Put all the images in the images folder.
  • You need to name the larger version: product1, product2 etc. (gif, jpg or png).
  • The small thumbnail version will be named: product1sm, product2sm, etc.
  • The code to insert the thumbnail is a ‘linked’ image. A sample is shown below.

<a href=“../images/watch.jpg” target= “_blank” > <img src=“../images/watch.png” alt=“A gold watch” /></a>

Configure the table style with the CSS rules

1. We’re looking to see how you can apply using the style sheets with the html code, to enhance the appearance of the web site.
2. Configure your table style using style sheets so that the table matches the theme in your web site.
3. You are still expected to customize all of your pages with CSS and your programs. The web pages should appear just as your other pages do.

Step 2. Add an Image Map and JavaScript program to interact with the mapCreate your image map

1. Go to http://www.freevbcode.com/ShowCode.asp?ID=1854 (Links to an external site.) (An HTML image map of the USA with gifs included)
2. Download and uncompress the usamap.zip files from this site.
3. Copy the white or color, map images into your images folder in your project. I renamed them mapalaska.gif, maphawaii.gif and mapusa.gif.
4. On week3-2.html, insert a new map into your page. 
   1. Useful reference on creating the map: https://www.w3schools.com/tags/tag_map.asp (Links to an external site.) (Links to an external site.)
   2.  (Links to an external site.)You may use the coordinates from the previous example.
   3. However, don’t copy the code, just the coordinates. As you learned, their code is really old and deprecated. Make sure to use lower case for all the tags and attributes. Make sure to use quotes around all values! (Or you lose points!)
5. Save and preview the page to see if the map works. When you mouse over the state you should see the link change in the status bar of your browser. 

TIP: Note that you ‘can’ use some features in some web editors to change all the code to lower case or search and replace. However, you can also just copy and paste within Notepad too.

Create your program to interact with the image map

Some of you may feel overwhelmed. If you are, stop. Go view the video. It takes additional time, but will help you in the long run. There are very few lines of actual code here. The activity is not about writing long code, but to understand how we can use our knowledge of html elements and attributes and interact with them using JavaScript. 

1. So with the HTML you have written, you can click on the state and go to a new page that was hard coded in the URL. The pages are named after the states (ie. michigan.html). But how would we retrieve any information from the user? We can pass the information with the URL requested. Later you’ll learn more about the location object and URL later. For now we’ll just do this all on one page.
2. Change the href attribute so that it points back to this page (week3-2.html). Do this for all of the states. For example: href = "week3-2.html?page=michigan.html"
3. At the bottom of the week3-2.html page and above the closing body tag, insert opening and closing script tags. You will write the JavaScript inside these tags. 
4. Inside the script tags, using JavaScript, create a variable myQS to store the querystring from the URL.
5. Assign the value of myQS to the querystring.

• Here is the partial code snippet to retrieve the querystring.
  • location.search.substring(1);
• The querystring is the data appended to the URL with a question mark (?). The querystring represents the name=value pairs, separated by the & ampersand.
  • In the above example the querystring is: ?page=maryland.html
• Create a new variable to store the state name value. Name is myState.
• We want to remove the page= portion and the .html portion from the querystring. We can do that with a string replace function that is built into JavaScript. 
• Set the value to the myState variable to myQS.replace("page=", "");  
• Okay, now do is again. But be careful because you want to work with the myState variable now, not MyQS.
• Use the replace function to replace “.html” with “” in the myState variable.
• You can then use the toUpperCase() function to convert the name of the state stored in the newState variable, to uppercase and store that new value in newState.
• Lastly assign the innerHTML attribute of the state element to the newState variable. Make sure to use getElementById as you learned in the earlier chapters
• Save and preview your page.

Further customize your page with an advanced JavaScript program with multiple querystring parameters

1. Go back and modify the URL in the image map to include 2 additional parameters for each state.
2. This time make the parameter the number of votes for the democratic (call that parameter dem) nominee and the republican (call that parameter rep) nominee. 
   href = "week3-2.html?page=alabama.html&dem=0&rep=9"
3. Review the values from last year’s polls below in the table.
4. Use last election or the current election results (https://en.wikipedia.org/wiki/United_States_presidential_election,_2012 (Links to an external site.)) To make it easier on you I’m copying the list here below. If there was a – character, just insert 0
5. Insert them into the URL in the image map, just like you did with the state name.
6. Display the values to the user in the same place in the web code.
7. You have to append the value to the querystring. Each name and value pair is separated with an ampersand. Create the string by hand in the html as you see the example above.

Note: If you have your HTML nested properly, this should not take more than 10 minutes. You can copy the string (&dem=0&rep=9) to the end of each url then go back and change the values using the data in the table below.

Presidential Election Voting Data, 2014

Dem	Rep	Dem	Rep	Dem	Rep
Alabama	0	9	Kansas	0	6	North Carolina	0	15
Alaska	0	3	Kentucky	0	8	North Dakota	0	3
Arizona	0	11	Louisiana	0	8	Ohio	18	0
Arkansas	0	6	Maine	4	0	Oklahoma	0	7
California	55	–	Maryland	10	0	Oregon	7	0
Colorado	9	–	Massachusetts	11	0	Pennsylvania	20	0
Connecticut	7	–	Michigan	16	0	Rhode Island	4	0
Delaware	3	–	Minnesota	10	0	South Carolina	0	9
D.C.	3	–	Mississippi	0	6	South Dakota	0	3
Florida	29	–	Missouri	0	10	Tennessee	0	11
Georgia	0	16	Montana	0	3	Texas	0	38
Hawaii	4	–	Nebraska	0	5	Utah	0	6
Idaho	–	4	Nevada	6	–	Vermont	3	–
Illinois	20	–	New Hampshire	4	–	Virginia	13	–
Indiana	–	11	New Jersey	14	–	Washington	12	–
Iowa	6	–	New Mexico	5	–	West Virginia	–	5
New York	29	–	Wisconsin	10	–
Wyoming	–	3

Step 3. Inserting an iframe into the web page

Web sites such as YouTube allow you to use the iframe to insert content your pages. You will insert another page into your web page. This should take about 5 minutes tops!

Useful reference: https://www.w3schools.com/tags/tag_iframe.asp (Links to an external site.) 

Inserting an iFrame into your web page

1. At the bottom of the week3-2.html page, insert a horizontal line with the <hr /> element. 
2. Then, you will insert an iframe. 
3. Below the Image Map. Insert an iframe.
4. Set the name to myframe, width and height to 900 and 400.
5. Configure the sandbox and seamless attributes.
6. Set the source (src) to http://www.w3schools.com/ (Links to an external site.)"
7. Save and preview the page.
8. Check to see what links and resources ‘work’ in this new framed site.

Problem 2:

Your boss has asked you to create a web page with a member registration form. Yes you created a form in week 1. But that was just exploring HTML. Now, we will create a more complex form, validate and process the form. 

Learning Outcomes:

• Analyze web programs in order to test, debug, and improve them.
• Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
• Demonstrate creativity and problem-solving skills.
• Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Step 1. Create your web site formCreate a registration form for your members

1. Insert your web form on page week3-3.html.
2. Use labels for all the fields. Use legends where it makes sense.Reference for the legend tag: https://www.w3schools.com/tags/tag_legend.asp   
    (Links to an external site.)Reference for the label tag: https://www.w3schools.com/tags/tag_label.asp (Links to an external site.)
3. Here are the example fields that you need to have the user fill out:

• First and Last Name
• Street, City, Postal Code (US), Region, Country
• Phone, Email
• Password
• Favorite color, Birthday
• Number of rummage sales you have attended (Must be numeric between 0-100)
• Do you use Ebay to sell you items? – Yes or no   (Use a radio button list)
• What do you use to purchase your items most often? - PayPal, credit card, check, cash monopoly money (Use a radio button list)
• Favorite rummage sale item categories - (Create a check box list of options)
• Pass a hidden value “mysecret” when the form is processed.
• Use a color picker and date picker to retrieve the users favorite color and birth date.
• Set one of the fields to autofocus. 
• Set all the other fields to allow the user to tab through each form field in order.  (Look up the common attributes at https://www.w3schools.com/tags/ref_attributes.asp (Links to an external site.) such as tabindex) Many of these form elements are using the input tag, but change the type to another value (such as text, email, color, password, date, radio, checkbox, number, hidden etc.) Reference for the input tag: https://www.w3schools.com/tags/tag_input.asp (Links to an external site.)You will also need to review how to use the select tag to create dropdown lists. Reference for the dropdown list: https://www.w3schools.com/tags/tag_select.asp (Links to an external site.)

Style the form with CSS

1. Using CSS configure the form field labels, form field controls and values, results. 
2. Use the legend and other elements and attributes to customize the appearance.

Laying out form fields

Note that you will want to make the form easy to fill out. One thing to do is to make sure the labels are the same size so the textboxes start out at the same place. While you can use width and margin, you will find that it won't work because labels are inline elements.

You need to change the display to block. Check out https://www.w3schools.com/css/css_display_visibility.asp (Links to an external site.) for more information on the display attribute. The examples at https://www.w3schools.com/css/tryit.asp?filename=trycss_display (Links to an external site.) are very useful to help you understand the difference between inline and block display.  

Step 2. Validate form with HTML validationConfigure HTML validation

There are several attributes which can be used to provide validation. Type is one, required and pattern attributes also are helpful. 

Reference: https://www.w3schools.com/html/html_form_attributes.asp (Links to an external site.) 

1. Use HTML elements and attributes to require users to fill out the whole form. 
2. Use HTML elements to make sure the user enters a valid email, phone, and postal code and others as indicated above.
3. Use the pattern attribute to determine if the user is a student at “mycollege.edu”

Step 3. Process the form Create a JavaScript form to use the form data

Some of you used the name attribute to name the form fields. While it's possible to, it's better to use the id attribute. Then you can use the getElementById method to retrieve the values. 

• Useful Reference on innerHtml: https://www.w3schools.com/jsref/prop_html_innerhtml.asp (Links to an external site.)
• Useful Reference on getElementById: https://www.w3schools.com/jsref/met_document_getelementbyid.asp (Links to an external site.)

Process the form

1. You’ll need a function for when the user clicks on the submit button.
2. Retrieve the values using getElementById.
3. Create a div tag with the id set to ‘results’ to display your results.
4.  Display the results in the web page. Use the innerHTML of the div tag in the web page.

Change the color of the text based on the form value

1. Change the color of the text to be the same color as their favorite color. You’ll need some JavaScript to do that.

Step 4. Review and document your programs

Review and document your programs

1. Preview and test your program. Again, make sure there is adequate documentation all of your programs. (HTML, CSS, JS)
2. If you need additional screen shots to show your program, just add them here.
3. Review to make sure you also used descriptive names for the form fields
4. Screen shots of the web pages in the browser with the address bar showing. For week3-2.html, make sure to show in the browser with the address bar showing after you click on a state and the state information is displayed in the web page. In other words, show me that your pages worked!
5. Screen shots of the entire source code files you modified this week.

Submitting your Homework

1. When you are finished, save the Word document. You will lose points if you do not name the file correctly.
2. For each screen shot, make sure the code is legible on a monitor (10 pts or higher).
3. Compress your images. Word allows you to compress the images so you don’t have a huge file. When you are finished with the homework:
   1. Just click on the image in Word,
   2. Go to the Format Picture Click Compress.
   3. Choose Best for sending in email.
   4. Check: remove cropped picture regions.
   5. Choose: All pictures In this file.
   6. Save your document.
4. Place this file inside the homework folder of your web project. 
5. Zip the CS321_LastName Make sure it’s named CS321_LastName.zip.