Web site topicnbspyour boss has asked you to create a web

Question

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.

Format the data

The values returned are real values. Ending 0's 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.

1. Go tohttps://www.w3schools.com/jsref/jsref_obj_number.asp (Links to an external site.).
2. Review the number methods (Read abouttoFixed).
3. 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.

1. When the user clicks on the submit button, write a message to the user.
2. Display the same message on the web page using document.write Make sure to put in the correct values. M
3. 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 the week1-1.html and week1-2.html pages using HTML

1. Use a variety of html tags in your web page to enhance your content.
2. DocType, html, head, title, body (Use HTML 5)
3. Comment ()
4. Headings (h1, h2, h3)
5. Hyperlink (a)
6. Line break, paragraph, code, span
7. Non-breaking space and the copyright symbol
8. Horizontal rule (line)
9. Input, textarea, form, label, button
10. Any other html elements you would like to add.
11. Use a variety of html attributes in your web page to enhance your content.
12. Height, width, href, lang attributes
13. Class, style, id, title, hidden
14. Tabindex, accesskey
15. Type (for the input tag) and onclick for the button.
16. Any other html attributes you would like to add.

Step 6. Format your content with CSSFormat the content using CSS style rules. The more you use, the more you learn.

1. Modify theweek1-1.htmlandweek1-2.htmlpages using CSS.
2. Createinlinestyle rules with the style attribute for at least 3 HTML elements
3. Createembeddedstyle rules for at least 3 HTML elements.
4. 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.)

1. Font-color, font-size, font-family, font-decoration, font-style, font-weight, text-align, text-decoration
2. Border-collapse, border-width, border-style, border-color
3. Padding and margin
4. 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!

1. Use proper nesting and indentation for all code
2. User proper naming conventions for the IDs and names of elements, names of classes used in all code
3. Include comments in the all code files (name, date, purpose of code, functions, variables)
4. 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 of both web pages in the browser showing that your programs 'worked'. (ie. showing the message after you filled out the form)

Submitting your Homework

1. When you are finished, save the Word document asdocx.You willlose pointsif you do not name the file correctly.
2. For each screen shot, make sure thecode is legibleon 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 theFormat PictureClickCompress.
   3. ChooseBest 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 thehomeworkfolder of your web project.
5. Zip theCS321_LastNameMake sure it's namedCS321_LastName.zip.
6. Upload the file to the online classroom.
7. Due to the length of the assignment, the instructor may take up to 6 days to provide you with feedback.