html5/Javascript/Css homework help.

////////////////////////////////////////////////////////////////////////////////////////////

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

No other folder structure is allowed.

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!

Create apagesfolder to store all your html pages.

Create the other folders. Images belong in animagesfolder, javascripts in ajsfolder, style sheets in acssfolder, fonts in afontsfolder.

Create an additional folder calledhomeworkto store your solution files.

Create your placeholder web pages.

Create a web page calledhome.html. You may use Notepad, Visual Studio or any other basic text editor or web editor

For each week,create 2 web pages.

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.

Save your web pages in thepagesfolder.

Step 2. Create your content

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.

Write up a short description about your product.

Create ahyperlinkto theweek1-2.htmlpage (refer to listing 3-6)

Insert ahyperlinkto an external web site about your product.

Step 3. Create your form

Modify theweek1-2.htmlweb page.

This page allows the user to order the item. For now you will be creating just a basic form.

Create a link back to theweek1-1.htmlpage.

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 havejust the introductory contentto get you started with CSS and JavaScript. We dont 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 JavaScript

Create an embedded JavaScript program.

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

Modify theweek1-2.htmlweb page to process the form.

Modify the submit button so that when you click on the button it calls the JavaScript program.

Modify the button tag to call the function and not submit the form.

onclick="calculateTotal(); return false;"

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.

Insert thescripttags in the head section.

Inside the script tags, create the function calledcalculateTotal.

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.)

Create anobjectcalledmyData. (Refer to listing 5-13)

Set the customer name (cusName) the value the user entered.

Set the delivery date (delDate) the value the user entered.

Set the number of items (numItems) to the value the user entered

The price is $4.25per item. The tax rate is7%. Shipping rate is2%.

Calculate the total for the product, tax, shipping and order.

Format the data

The values returned are real values. Ending 0s may be cut off. So $10.40 would look like $10.4 to the user. This is just like in other languages. JavaScript has functions to help you format the numbers and string variables.

Go to http://www.w3schools.com/jsref/jsref_obj_number.asp (Links to an external site.).

Review the number methods (Read abouttoFixed).

Then, for each of the values returned from the calculations, form them with the toFixed method.

Display the results

Monetary values should show the two decimals. Use line breaks inside your message to make the message look better.

When the user clicks on the submit button, write a message to the user.

Display the same message on the web page usingdocument.writeMake sure to put in the correct values. M

Make sure to convert the data types to strings before you display them.

Here is a sample of what the output should look like:

Thank you John Smith for your order. You will receive 10 items delivered to you on December 1. You price of your items is $42.50. The tax charge is $2.98. The shipping charge is $0.85. Your total is $46.33.

Step 5. Format your content with HTML

Use HTML tags to format the content and enhance the appearance of your page. * Note that a variery means that you are showing us you are able to use the tags and attributes. The more you use, the more you learn. (For full points, use all of the tags and attributes to enhance your page appearance.)

Modify theweek1-1.htmlandweek1-2.htmlpages using HTML

Use a variety ofhtml tagsin your web page to enhance your content.

DocType, html, head, title, body (Use HTML 5)

Comment ()

Headings (h1, h2, h3)

Hyperlink (a)

Line break, paragraph, code, span

Non-breaking space and the copyright symbol

Horizontal rule (line)

Input, textarea, form, label, button

Any other html elements you would like to add.

Use a variety of htmlattributesin your web page to enhance your content.

Height, width, href, lang attributes

Class, style, id, title, hidden

Tabindex, accesskey

Type (for the input tag) and onclick for the button.

Any other html attributes you would like to add.

Step 6. Format your content with CSS

Format the content using CSS style rules. The more you use, the more you learn.

Modify theweek1-1.htmlandweek1-2.htmlpages using CSS.

Createinlinestyle rules with the style attribute for at least 3 HTML elements

Createembeddedstyle rules for at least 3 HTML elements.

Create style rules for at least 2classes.

Format the content using CSS style rules

Use a variety of styles in your web page with either your embedded or inline styles. (For full-points, use all of the elements to enhance your page appearance.)

Font-color, font-size, font-family, font-decoration, font-style, font-weight, text-align, text-decoration

Border-collapse, border-width, border-style, border-color

Padding and margin

Color, background-color (use hexadecimal values)

Any other style rules you would like to add.

Step 7 Documentation

Document your program. *

* This means all HTML, CSS and JavaScript programs!

Use proper nesting and indentation for all code

User proper naming conventions for the IDs and names of elements, names of classes used in all code

Include comments in the all code files(name, date, purpose of code, functions, variables)

Save this file asHomework1_LastName.docx. Add this to your web site in the homework folder after you have completed both problems

Provide a screen shot showing your folders and files. (Place the screen shots in these placeholders)

Include a screen shot of all of our code, showing your indentation and nesting of the elements.

Include a screen shot ofboth web pages in the browsershowing that your programs worked. (ie.showing the message after you filled out the form

////////////////////////////////////////////////////////////////////////////////////////////////////////////

I just started this course in web design and am having trouble with the first assignment already. I get what it asks, Im just not sure what to do. I wrote some of it already. I'm asking just for the html/java stuff, the bare bones to get it working.

/////////////////////////////////////////////////////////////////////////////////////////////////////////

week1-1.html

Welcome to Our Rummage Sale

We are a local non-profit community that sells rummage items.

This week we are selling pens to sell in order to raise money.

As of now we have run out of all items except for our pens.

Product Information:

Pens come in 10 packs with 5 in blue ink, 5 in black ink.
Ballpoint pens weighing in at 11.6 grams with attached comfort grips, good for use in the office or in school!

Click here to buy

///////////////////////////////////////////////////////////////

week1-2.html

Return to main page

---

Name:

Location:

Number of pens:

///////////////////////////////////////////////////////////////

As of now I am stuck on step 4 of problem 2. comments are appreciated but not required, just asking for the barebones so I can grasp what is going on.