Demonstrate creativity and problem-solving skills.

Problem 1

Web site topic: Your boss has asked you to create a web site for: a local community non-profit organization that sells rummage sale items. This week, they have asked you to set up 1 page to show what the site will look like.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 your web site structure

Being organized will be important for your web site to be successful. For each week you will need multiple web pages. Create the folders and files.Create the folders

1. No other folder structure is allowed.
2. Create a folder namedCS321_LastName, to put all of your folders and files. Inside create the subfolders. All folders and file names should be in lower case and never any spaces!
3. Create a pagesfolder to store all your html pages.
4. Create the other folders. Images belong in animagesfolder, javascripts in ajsfolder, style sheets in acssfolder, fonts in afontsfolder.
5. Create an additional folder calledhomeworkto store your solution files.

Create your placeholder web pages. 

1. Create a web page calledhome.html. You may use Notepad, Visual Studio or any other basic text editor or web editor
2. For each week,create 2 web pages.
3. Each web page will be numbers using the following pattern:week1-1.html,week1-2.html, week2-1.html, and so on. If a third page is used it will be announced in the homework for that week.
4. Save your web pages in thepagesfolder.

Step 2. Create your content

1. Modify theweek1-1.htmlweb page. This page displays information aboutyour product and company. This year, one of the items you are selling at your web site: pens.
2. Write up a short description about your product.
3. Create ahyperlinkto theweek1-2.htmlpage (refer to listing 3-6)
4. Insert ahyperlinkto an external web site about your product.

Step 3. Create your form

1. Modify theweek1-2.htmlweb page.
2. This page allows the user to order the item. For now you will be creating just a basic form.
3. Create a link back to theweek1-1.htmlpage.
4. Create the form using the htmlinputelements. Refer to listing 3-25 for example of inserting aformandinputelement.

• Create3 textboxesusing theinputtag to collect the users name, location and number of items that they want to order. (customerName,deliveryDate,numberItems) If you deviate from the naming conventions they need to be descriptive.
• Make sure to create asubmitbuttonusing the input taginputtag (with type set to submit as shown in listing 3-25) or button (refer to listing 3-20)
• Make sure to include theformtags (as refer to listing 3-25)

Problem 2

You are asked to show how you could process the form using basic JavaScript, and to improve the appearance of the form with CSS. For now, you have just the introductory content to get you started with CSS and JavaScript. We don’t expect advanced programming at this stage. However, you will become familiar with the basic process of how to insert css rules and scripts in the page.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.

Being organized will be important for your web site to be successful. This activity wil be basic, in that you will just retrieve values and send the values back to the web page.Step 4. Create a program to process your form with JavaScriptCreate an embedded JavaScript program.

Retrieve the form values, performs a calculation and displays the results to the user

1. Modify theweek1-2.htmlweb page to process the form.
2. Modify the submit button so that when you click on the button it calls the JavaScript program.
3. Modify the button tag to call the function and not submit the form. 
   onclick=”calculateTotal(); return false;”
   
   
4. In the book they inserted theonclickattribute inside the input/button tag. ((Review listing 3-20) However in this case we want to write some content back to the page. So for now we have to stop the form from submitting the values to the web server (return=false;).

Create the JavaScript program to process the form.

1. Insert thescripttags in the head section.
2. Inside the script tags, create the function calledcalculateTotal.
3. Inside the function, retrieve the user name, location, and number of items that the user typed in the textbox. (Refer to listing 3-20 on how to use thegetElementByIdmethod.)
4. Create anobjectcalledmyData. (Refer to listing 5-13)
5. Set the customer name (cusName) the value the user entered.
6. Set the delivery date (delDate) the value the user entered.
7. Set the number of items (numItems) to the value the user entered
8. The price is $4.25per item. The tax rate is7%. Shipping rate is2%.
9. Calculate the total for the product, tax, shipping and order.