Reference no: EM131294470

Problem 1

Your boss has asked you to create multiple pages to improve interactivity in the web site. You decide to try out creating an interactive registration form for the vendors who will be at the rummage sale! You are going to use your programming skills and mix them with what you learn in this chapter.

Learning Outcomes
- 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.
- Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
________________________________________
Step 1. Create the overall structure
1. Save a new Word document to your homework folder. 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 navigation structure.
3. Edit the week5-1.html and week5-2.html pages to have the same layout at template.html and the style sheet: homework.css
4. Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Don't copy off of other web sites!
5. Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.
6. For Problem 1, modify the template.html page first. Later you will copy it to the week5-2.html page. We'll start with week5-1.html.
7. Create an external JavaScript file (week5.js) and store it in the js folder.
________________________________________
Step 2. Create an interactive program with JavaScript and DOM
This activity will help you merge your skills with programming objects such as arrays, with web programs.
Program Requirements: Use the window object methods to create a conversation between you and the visitor to collect information from the user.
*Note that there are many different ways to solve this problem. It's up to you to be creative. I've given some direction. The goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works!

Build an interactive program with JavaScript

1. Import the week5.js file into your web page using the script tag. Make sure to put it the head section.

2. Create an HTML element on the page that you can post your results to the web page for the user to print.

3. This can be a div, p or other block container. The format of the output is important! You can use CSS to style the element.

4. Add additional content to the page!

5. In your program you'll need a variable to store your results and a variable to store the array of values that the user enters.

6. Use all three window object methods (confirm, prompt and alert), to ask the user questions and collect data from the user.

7. Ask the user at least 6-7 questions where you collect data from the user.

8. Remember prompt allows for text input from the user but confirm also allow the user to make a choice, which equates to true or false values. Every time you use a message, address the person by their first name.

9. You can return the results from a prompt directly to a variable. Include a default value for the user as a clue for what to enter. Here is an example of the syntax:

var variableName = prompt("Question", Default value in the textbox.");

10. You will need to store the values the user entered in an array. Name the array myArray. You can also write out the values directly to an array when you collect the values from the user as shown above, so that you don't need so many variables.

myArray[0] = prompt("Question", Default value in the textbox.");

11. We need to also store the names for the values. So create a variable called myCookieList. Store the names of the keys and the values from the array into myCookieList. Remember you need to use some form of a delimiter such as a semi-colon but other delimiters are allowed.
________________________________________

Step 4. Create cookies with JavaScript and DOM

Note that there are many different ways to solve this problem. It's up to you to be creative. There are many ways to do this!

Determine if the user supports cookies. If yes, then store the information in cookies and then display the results in the web page. Now that you already have a login form in the heading of the page in the jumbotron template, we can process the login form. But you have to setup a few properties first with the login form fields.

Configure the login form fields

In the submit button in the jumbotron, add an onClick attribute and set function name to login. Set the id to btnLogin.

1. Assign the id property for the form to loginForm.

2. Add the id properties to the form fields, txtUsername and txtPassword.

3. In the body tag you will need to call the init function when the page loads.

Here is sample on how to set a cookie expiration date
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;

Determine if the user supports cookies

1. The next step will be to write the cookies. You can't simply assign values to a local cookie as the book says. Not all browsers will allow this. You can't use Google Chrome for creating local cookies. So, we'll use Mozilla Firefox. You might also have to check your browser settings that you allow cookies.

2. Next you need to work with cookies. First, determine if the user allows cookies using thecookieEnabled property of the navigator object.

3. If the user does not support cookies, provide them with a custom message using the alertmethod.

4. If the user does support cookies. Provide them with a custom message using the alert method letting the user know that the browser supports cookies.

5. First you'll need to take your array values and store them in the myCookieList string. You'll want to store the name, and equal sign, the value and your delimiter. There are many ways to do this!

Write out the data to the cookies

However, it's up to you to follow the DOM and verify the syntax with the standards and your readings! You'll need to use the split method to split the myCookieList string into pairs of key name and values and store these in cookieListArray. Split it based on your delimiter that you used above (such as the semi-colon).
1. You need to iterate through the key value pair and split is into the individual key name and values. You can use a for loop structure. Remember you can retrieve properties of the array such as length.

2. After splitting the key name and values, you can write out the cookie using the document object.
- For example the documentation in the says "document.cookie = "favorite_toy=nerf" is a valid statement to create a cookie. However, you need to create the cookie using the key names and values.
- The cookie we created expires at the end of the session. To extend the time, set the expiration date. You can also set the path. Just make sure to follow the format shown and append theexpiration to the cookie value: "Thu, 18 Dec 2017 12:00:00 UTC; path=/"

Display the results to the user

The evaluation of your program will include how the output appears in the browser. You can make modifications in the JavaScript program and/or use CSS and modify the style rules for the HTML element(s) that display the results

After you create the cookie append the name and value to the myResults variable. You could, assign it to one or more elements. However you can also modify the code to use multiple HTML elements. So, the solution will depend on your creativity and application of your programming and web development skills.

This is what my output looked like. There are many ways to do this! The program wrote each name and value on separate lines. The important part is to make your responses clear and easy to read. Notice the use of spaces and characters in the key name. You can do this with cookies and arrays. It's your job to enhance the output!

First Name: Bob
Last Name: Smith
Electronics: true
Perishable Food: false
Children's Toys: true
Clothing: true
This only creates the cookies.
1. Display an alert message telling the user that you created the cookie and that you will display the results in the web page.
2. Display the myResults in the web page using the HTML element you used in the first step! (Hint: Review the innerHTML property)

View the cookies
View the web page and fill out the questions. In your browser, the way to access cookies will vary. For Mozilla Firefox, go to your Preferences menu. (On a Mac the link is in the Firefox menu) Then select Properties. Click on Privacy in the menu. Then click the Show Cookies button. Enter the name of one of your cookies. You can see the cookie name, content (value), host, path and expires properties.
________________________________________
________________________________________

Problem 2:

As usual, this second problem is more challenging than the first, and will test your creativity and application of programming to web development. Your boss has asked you to create a page that displays a table with of 5 products. He liked your week3-1.html page and said you could use that page as a way to display the products. But he wants to build in some way to modify the table structure on the fly, and modify the data in the table dynamically. You will not create the shopping cart at this time.

Review:
This activity will require you to create objects dynamically as well as modify the styles using CSS and JavaScript. Review how to do this first, before starting this assignment.
TIPS: Using styles to style table elements
It's useful to use the class and id selectors in the style sheet. This also applies to the header row, cells, and footer. You should feel comfortable working with CSS by now.
1. #productTable or table would modify the table.
2. #productTable th or just th would modify the table row

TIPS: Using JavaScript to style table elements and set the properties of elements

You can set any property using:
objectname.property = "new value";
While this method works, and will override other settings, bgColor isn't a valid HTML attribute! However some browsers may still allow this.
oTHead.bgColor = "#A94442";
A better method is to use style. This is one of the methods in your text. Again, you could try to use bgColor, but it's not the best because the bgColor property is not the current term.
oTHead.style.bgColor = "#A94442";
A better method is to use the combination of style and proper name, backgroundColor.
oTHead.style.backgroundColor = "#A94442";
Cascading style rules can get very tricky when setting them inline and with CSS and JavaScript. Setting some attributes this way may not overwrite an inline style attribute.

Add an attribute to the HTML element
This way will work but remember that this just adds the attribute to the HTML element. It doesn't validate the attribute name or value. So be careful with your code. Always look at the html generated and validate it with the validation tools you learned about earlier. You can add any attribute this way, not just style.
oTHead.setAttribute("style", "background-color: #A94442;");
When you create elements dynamically, you can also set the attributes dynamically before or after you append the element to it's parent.
oRow = document.createElement("tr");
oRow.id = "TEST ROW";
oTBody.appendChild(oRow);

This process is the same, for each element you create. Create the element by passing the actual tag to the createElement method. Then you append the element to it's parent element using appendChild.
oCell = document.createElement("td");
oRow.appendChild(oCell);
// You can also set the content inside the elements using innerHTML.
oCell.colSpan = "9";
oCell.innerHTML = "TEST ROW";
// You can also set the class using className.
oCell.classnName = "myCell";
________________________________________

Step 5. Create the overall structure for the page

1. Remember you are starting with your data table already completed. Focus on the functional requirements first. Then go back and make the design changes to the table.

2. Gather your data and create your basic page navigation structure.

3. Make a new copy of your week3-1.html page and name it week week5-2.html.

4. Add content to enhance your page and table.
________________________________________

Step 6. Modify the structure for the table
Modify the table structure in HTML

You need to make some changes to your table.

1. There should be no footer or header rows or summary or caption in the HTML code. Delete the header, footer, summary and caption from your web page (or comment them out).

2. Insert an HTML comment to comment out the last row in your table, which essentially removes the product from the web page.

3. Format the style of the table using CSS methods.
- Use your creativity here!
- For example, your boss wants the retail price to have a line through it and colored red.
- Later you will use JavaScript and the DOM to style the table and cell elements and to format the data.
- Your boss said that he would like you to insert two columns on the left side of the table.
- He wants one to store a button on the left column that says ‘Add to cart'. Use an image button. Recall an image button is an input tag where the image source is set to an image.
- In the second column include another image button. The button will be your ‘like' button. But do not use the Facebook like icon! Pick your own image/icon.
- Make sure your table ID is hard coded to productTable.
- The body should be set to productBody.
- Each row, the id is set to row1000, where the word row is appended to the ID. The class for each row needs to be set to prodrow.
- Use the code below as a guide to set up your HTML table.
Remember to customize your table

1. To receive ‘exceeds' expectations you must create your own code! This is just a sample.

2. Build your css so you can modify the properties of the table head and table foot rows, caption and cells. Use a combination of CSS JavaScript to make the modifications! There are lots of examples on how to do this in your readings.

3. Remember your table data and appearance will and should be different

<table id="productTable">
<tbody id="productBody">
<tr id="row539" class="prodrow">
<td><input type="image" src="../images/btnbuy.gif"></td>
<td><input type="image" src="../images/btnlike1.gif"></td>
<td><a href="product.html?productid=539">Waterford West
Hampton D_O_F_ Glasses</a></td>
<td>WC-998-306-4094</td>
<td>Used</td>
<td>Set of 4 glasses.</td>
<td class="prodprice">$139.00</td>
<td>$119.00</td>
<td class="prodpics"><a href="../images/products/539.jpg" target="_blank">
<img class="prodthumb" src="../images/thumbnails/539.gif"
alt="Product #539" /></a></td>
</tr>
________________________________________
Step 7. Create an interactive program to modify the table

Build an interactive program with JavaScript

1. You decide that you will automate creating the table header, footer, summary and caption.

2. On the body element, when the page loads, call a function named init.

3. In the init function, call the createHeader, createFooter, createCaption and addData functions. No parameters are passed.

4. In a JavaScript, create functions called init, createHeader, createFooter, createCaption andaddData.

Create the createFooter function

1. In the footer function display a footer row, that spans 9 columns and says "All saled are final."

2. The id for the row is set to prodFooterRow.

3. Set the footer row class name to productFoot.

Reminder: You will need to create the table and footer objects, set the properties for the row, create the cell, append the cell to the row, and then set the cell properties.

Create the createCaption function

1. In the function you will need the table and caption objects. You need to set the properties of the caption and append the caption to the table object.

2. The properties should set the text displayed to We have a broad range of products availableand a line break.

3. The font size is 14 pixels, and aligned to the top.

Create the createHeader function

1. In the createHeader function:
- Create the table object using getElementById
- Create the header row object using createElement.

- Append the header row to the table using appendChild.

- In the function, set the table properties.
- Set the border to 10 with background color lightslategray.
- Set the width to 960 pixels.
- Set the summary to: This product list shows what is available at our rummage sale!
- Set the class name to productHead.

- In the createHeader function, create the table head element.
- Set the table head element properties.
- Set the id and class to productHead.
- Append the head element to the table.

- Create the header row element using the tr tag, and
- Set any required properties.
- Set the id to prodHeaderRow
- Append the row to the head element.

- Create 1 array.
- The array called heading stores the 9 column heading names for each of the cells in the header row.

- Create a loop. Inside the loop:
- Create each header cell.
- Modify the class name of the cell
- Display the text.
- Add the cell to the header row object.
________________________________________

Step 8. Create an interactive program to insert data into a table
Create an interactive program using JavaScript and insert data into the table element.
Create the addData function
1. Create the table and body objects using getElementById.
- You already have a body table element in the table, so you don't need to append it to the table. We need to just add one row to the table body element.

- Create an array with 10 elements that has the text for each cell.
- The last element should be set to the product ID value (such as 1000).
- Note that the product ID is not in the actual table. We are just using that array element to store the ID value.

Create the row with the createElement function

1. Set the id of the row.

2. Set the class name to prodrow.

3. Append the row to the table body element. Do not add it to the table or the body, but the table body element. (If you are not sure what element that is, look it up!)

Create an array to change the cell contents and properties

1. Create an array.

2. Loop through the array. In the loop:
- Create the cells with createElement function.
- Set the cell properties to match your table properties and styles. (The properties you choose will vary based on your table.)
- Set the inner HTML value to the value in the array.
- If the cell is for the normal price set the class name to prodprice.
- If the cell is for the thumbnail set the class name to prodpics.
- Make sure in the HTML code, each cell in those columns has their class set to the same values. You can do this by hand or use the find and replace feature in your editor.
- Append the cell to the data row.

Problem 3

Your boss has asked you to create a web page that he can use to create invitations to the rummage sales! He wants to have different dates, text, colors and images in each invitation. You are going to use your programming skills and mix them with what you learn in this weeks lessons.

Learning Outcomes
- 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.
- Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
________________________________________

Step 1. Create the overall HTML structure

1. Save your Word document in your homework folder. 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 navigation structure.

3. Edit the week6-1.html page to have the same style sheet: homework.css * Note that problem 1 and 2 will use the same file!

4. Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Don't copy off of other web sites!

5. Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.

6. For Problem 1, we'll work with week6-1.html.
________________________________________

Step 2. Create an interactive program with HTML, CSS, JavaScript and DOM
This part of the activity, you will create the form using JavaScript and the DOM. goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works. As part of this assignment you will change the styles dynamically in JavaScript, create elements and append the styles and elements to other elements in the page.
Program Requirements:
Build an interactive program with JavaScript. Remember that your form should be different, showing your creativity. *Note that there are many different ways to solve this problem. The TIPS at the end of the Problem 1 directions should help you when you are troubleshooting your homework!I've given some direction. It's up to you to be creative.

Create the web page structure
Create a main div element and assign it a class called main. Inside the div element insert an aside with the id, leftaside and a div with the id placeholder. The left side will be the form you will build. Format the layout of the main, leftaside and placeholder. The leftaside should be about one third of the window. Let's start in Problem 1 with just the form.

Create the form elements

1. You will need labels for each of the form fields and will want to set the width property, and set the inline attribute to inline-block. You will need to come up with your own naming conventions for your form fields! We are at that point in the coure where you should be able to do this.

2. Use different form field types. The minimum types include textbox, textarea, color, date, dropdown list, radiobutton or checkbox, and a submit button.

3. The values of at least one of the dropdown lists should be dynamically generated. You need to incorporate images in some dynamic way as well. To get the image to be next to a radio button or checkbox list, use the display property and set it to inline as well.

4. In the submit button call the function that will apply the styles.

Create the functions
*Note that there are many different ways to solve this problem. However, it's up to you to follow the DOM and verify the syntax with the standards and your readings!

1. Create the three functions, populateStyles, populateFonts and populateImages. Again you can rename them to be appropriate to your program!

2. Each form element that ‘binds' to some data structure should have it's own function. In the example, there is one function for populating the border styles in the dropdown list, one for the fonts, and one for the radiobutton and images. Your program may be different.

In each function populate the form field using JavaScript
1. For example, in the populateStyles function you might:
- Create a string variable, which contains a semi-colon separated list of the values of the border styles attribute. You can look them up on the W3Schools site.
- Create a variable for the array.
- Split the string with the border styles using the semi-colon as the delimiter, and pass it to the variable you created.
- Rotate through the array.
- Retrieve the style for each element (i).
- Create an option element and set the name, value and text properties using the border style name from the array.
- Append the option element to the form dropdown list or radiobutton list elements in your form.

- You could do something similar to bind a list of font names to a dropdown list. The key is you are creating ‘option' tags/elements to the parent element which may be a select tag, input tag, etc.

Display the forms
Note: This is just a few suggestions. How you choose to create the form dynamically is up to you to design.

1. Combining elements can be tricky. In the example, I combined the input tag for the radio button and the images.

2. For each element in the list, you need to create both, an input element and an image element, set the properties of each and append them to the parent element. In this example, there are two images in a row. You can customize this. You can use the modulus operator to determine if the element is an even or odd element and append a line break object as needed.

3. The key is depending on your properties the image source will need to have a path concatenated with the image name. You can customize the id, name, value, class name and other attributes. Again, the best way to do this is to create what you want as your output, as an example, and then, go back and replace the static text with your variables.

Customize the styles

17. Don't forget to modify the style properties of the elements dynamically! The evalution of your program will include how the output appears in the browser. You can make modifications in the JavaScript program and/or use CSS and modify the style rules for the HTML element(s) that display the results
________________________________________

Step 3. Review and document your HTML, CSS and JavaScript programs

Review and document your program

1. Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures.

2. Preview and test your program. Again, make sure there is adequate documentation in the CSS, HTML and JavaScript programs!

3. If you need additional screen shots to show your program, just add them here.

4. Screen shots go here. Show the web page in the browser with the values displayed!

5. Screen shots go here. Show the HTML, CSS code and Javascript
________________________________________

TIP: Choosing to work with Objects or InnerHTML

You have many choices on how to program. You can assemble the innerHTML using a string, as shown. However this can be messy with multiple quotation marks. If you use this method, it helps to have the ‘output' of what code you want to write first, and reverse engineer and put in the variables. This can be very tricky with the single and double nested quotes and where you append values to variables. Most students have done this kind of thing in their first programming course.

// retrieve the style attribute from a data structure like and array or string.
var name = borderStyles[i];
myResults += '<option name="' + name + '" value="' + name + '">'
+ name + '</option>';
}
// After creating all of the <option> tags you would add them to the innerHTML
// of the parent object, in this case the dropdown list or <select> tag.
var bs = document.getElementById("borderStyle");
bs.innerHTML = myResults;
But working with objects can be cleaner and more manageable. I suggest you try this method first!
var name = borderStyles[i];
var myOption = document.createElement("option");
myOption.name = name;
myOption.value = name;
myOption.text = name;
document.getElementById("borderStyle").appendChild(myOption);

Note that above only partial snippets are shown to give you an idea. It's up to you to write your own program! Do you see the difference? Mixing and matching can be very difficult, so choose wisely!

TIP: Retrieving colors and populating a dropdown list.

This is to show you that you ‘can' create your own list of colors and populate the list. However, the support for background color for the individual options varies with browsers Furthermore this is only the 16 named colors. There are 140 named colors supported. With 32-bit colors you can have millions of colors. A color picker is much more useful if you want the range of options and much easier to work with. However, we still use this basic technique when we don't have that option.
function populateColors(){
var myResults ="";
var namedColors ="Aqua=#00FFFF;Black=#000000;Blue=#0000FF;Fuchsia=#FF00FF;"
+ "Gray=#808080;Green=#008000;Lime=#00FF00;Maroon=#800000;Navy=#000080;"
+ "Olive=#808000;Purple=#800080;Red=#FF0000;Silver=#C0C0C0;Teal=#008080;"
+ "White=#FFFFFF;Yellow=#FFFF00";
var colorArray = namedColors.split(";"); // put into an array
for(var i = 0; i < colorArray.length; i++){
var name = colorArray[i].split('=')[0];
var value = colorArray[i].split('=')[1];
myResults += '<option value="' + value +'" style="background-color:'
+ name + ';color: white">' + name + "</option>";
}
var bc = document.getElementById("backgroundColor");
bc.innerHTML = myResults;
}
________________________________________
________________________________________

Problem 4:

Step 1. Create the overall HTML structure
You will work with the same form and process the form. As you can see, the challenge is to create the unique content based on the values in the form.

Create the function

1. Make a new copy of your pagefor backup purposes. You will work on week6-1.html.

2. Your task is to process the form. Create the function to apply the styles.

3. The first task is to set the innerHTML property for the parent object (the placeholder) to an empty string so you reset the form field.

________________________________________

Step 2. Create an interactive program with JavaScript, CSS and DOM
Configure the styles and properties with JavaScript

1. Since the only element in the form to show the results is the placeholder, you'll need to create elements to show the data, and then modify the styles of those elements using the values from the form. In the example below you can see how to assign static values or dynamic from other form elements. You will want to append the element to the parent element.

var ph = document.getElementById("placeholder");
ph.style.fSize = "18px";
ph.style.fFamily = document.getElementById("tfFam").value;

2. You will need to format the date using the date object and format the value as a local string, using toLocaleDateString();

3. For some elements such as the dropdown list, radiobutton or checkbox lists, you need to iterate through each element to determine if the element was selected before you can assign the value to your variable.

Problem 5:

Step 1. Analyze web programs in order to test, debug, and improve them
Provide your own original example for each of the explanations you provide.

1. Visit https://www.w3schools.com/js/js_htmldom_events.asp (Links to an external site.). Explain how to add event attributes to HTML elements, and assign functions to the attributes. Explain how to assign a function in JavaScript using the HTML DOM. Provide your own original examples.

2. Visit https://www.w3schools.com/js/js_htmldom_eventlistener.asp (Links to an external site.). Explain how to add and remove an event listenter to an element dynamically in JavaScript. Compare the difference between event bubbling and event capturing. Provide your own original examples.

3. Visit https://www.w3schools.com/js/js_htmldom_navigation.asp (Links to an external site.). Explain how content is added to elements such as div tags, and how nodes are added inside other nodes. What is the root element? Explain the difference between siblings and parent nodes. Provide your own original examples.

4. Visit https://www.w3schools.com/js/js_htmldom_nodes.asp (Links to an external site.). How do you create nodes on the fly and add them to your page using JavaScript? Provide your own original examples.

5. Visit https://www.w3schools.com/js/js_htmldom_methods.asp (Links to an external site.). How would you retrieve a value from a form field and then display it in the web page? Provide your own original examples.

https://www.dropbox.com/s/86e7skp24qnnx2l/web-programming.zip?dl=0