Need assistance with this assignment below. Problem 1 Your boss has asked you to

ID: 3906941 • Letter: N

Question

Need assistance with this assignment below.

Problem 1 Your 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 Save a file as a word document. Add this to your web site in the homework folder after you have completed both problems. Gather your data and create your basic page structure and style sheets. 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). 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. 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. Make sure the template.html page works first, before proceeding. View it in the browser. You should have a consistent style or theme for your web site that is unique. Don’t copy off of other web sites! Create a new page called week3-3.html and put it in the pages folder. 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 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. Create the table Use column headings and row headings, table caption and summary. You may merge cells together wit rowspan or colspan. Make sure not to use deprecated attributes like bgcolor or cellpadding. 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.

Configure the table style with the CSS rules 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. Configure your table style using style sheets so that the table matches the theme in your web site. 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 map Create your image map Go to http://www.freevbcode.com/ShowCode.asp?ID=1854 (Links to an external site.)Links to an external site. (An HTML image map of the USA with gifs included) Download and uncompress the usamap.zip files from this site. Copy the white maps into your images folder in your project. I renamed them Copy the white maps into your images folder in your project. I renamed them mapalaska.gif, maphawaii.gif and mapusa.gif. On week3-2.html, insert a new map into your page. You may use the coordinates from the previous example. However, don’t copy the code, just the coordinates. As you learned, their code is really old and deprecated. Save and preview the page to see if the map works. 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 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. 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" At the bottom of the week3-2.html page above the closing body tag, insert script tags. Create a variable myQS to store the querystring from the URL. 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 upper case 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 Go back and modify the URL in the image map to include 2 additional parameters for each state. 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" Review the values from last year’s polls below in the table. Use last election or the current election results (https://en.wikipedia.org/wiki/United_States_presidential_election,_2012 (Links to an external site.)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 Insert them into the URL in the image map, just like you did with the state name. Display the values to the user in the same place in the web code. 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 table below.

Inserting an iframe into the web page Inserting an iFrame into your web page At the bottom of the week3-2.html page, you will insert an iframe. 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. Below the Image Map. Insert an iframe. Set the name to myframe, width and height to 900 and 400. Configure the sandbox and seamless attributes. Set the source (src) to http://www.w3schools.com/ (Links to an external site.)Links to an external site." Save and preview the page. 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. 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 form Create a registration form for your members Insert your web form on page week3-3.html. Use labels for all the fields. Use legends where it makes sense. 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. Style the form with CSS Using CSS configure the form field labels, form field controls and values, results. Use the legend and other elements and attributes to customize the appearance.

Step 2. Validate form with HTML validation Configure HTML validation Use HTML elements and attributes to require users to fill out the whole form. Use HTML elements to make sure the user enters a valid email, phone, and postal code and others as indicated above. 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 Process the form You’ll need a function for when the user clicks on the submit button. Retrieve the values using getElementById. Create a div tag with the id set to ‘results’ to display your results. 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 Change the color of the text to be the same color as their favorite color. You’ll need some JavaScript to do that.

Explanation / Answer

Answer: See the code below:

1. index.html:

--------------------------------------------------------

<xmp>
<!doctype html>



 <html class="no-js" lang=""> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Product table page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <h3>Product table</h3>
        <table>
            <caption>Table 1: Product table</caption>
            <tr>
                <th>Product Name</th>
                <th>Manufacturer</th>
                <th>Make</th>
                <th>Model Condition (New or Used)</th>
                <th>Description</th>
                <th>Retail Price</th>
                <th>Rummage</th>
                <th>Sale Price</th>
                <th>Picture</th>
            </tr>
            <tr>
                <td>Q4</td>
                <td>Audi</td>
                <td>2014</td>
                <td>Used</td>
                <td>Luxury Car</td>
                <td>$240</td>
                <td>N.A.</td>
                <td>$220</td>
                <td><a target="_blank" href=""><img src="" alt="Q4"></a></td>
            </tr>
            <tr>
                <td>Q6</td>
                <td>Audi</td>
                <td>2018</td>
                <td>New</td>
                <td>Luxury SUV</td>
                <td>$250</td>
                <td>N.A.</td>
                <td>$230</td>
                <td><a target="_blank" href=""><img src="" alt="Q6"></a></td>
            </tr>
            <tr>
                <td>X5</td>
                <td>BMW</td>
                <td>2017</td>
                <td>New</td>
                <td>Luxury SUV</td>
                <td>$270</td>
                <td>N.A.</td>
                <td>$240</td>
                <td><a target="_blank" href=""><img src="" alt="X5"></a></td>
            </tr>
            <tr>
                <td>i8</td>
                <td>BMW</td>
                <td>2013</td>
                <td>Used</td>
                <td>Racing car</td>
                <td>$200</td>
                <td>N.A.</td>
                <td>$180</td>
                <td><a target="_blank" href=""><img src="" alt="i8"></a></td>
            </tr>
        </table>
   </body>
</html>
</xmp>

--------------------------------------------

2. main.css:

----------------------------------------

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

table{
    width: 100%;
    border-spacing: 5x
}
table, th, td {
    border: 1px solid gray;
    border-collapse: collapse;
}

th, td {
text-align: center;
padding: 10x;
}

------------------------------------------------

Note: As the values of 'href' attribute of <a> and 'src' attribute of <img>, you will need to specify names of relevant images as required. Data is dummy, you can change it as you require.

Navigate

Need assistance with this 6. A study is conducted in patients with HIV. The prim

Need assistance with this discussion relevant passages Discussion 3 \"If someone

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Need assistance with this assignment below. Problem 1 Your boss has asked you to

Question

Explanation / Answer

Related Questions

Navigate