$24
JavaScript Assignment #2 Solution
Grading Note: Grading will be based on whether your page does what it is supposed to do, but also that it is written properly with correct HTML 5, CSS, and JavaScript. If any of your assignment parts isn’t working right but you are turning it in anyway, be sure to indicate that it doesn’t work properly. I will discover this anyway, but you might save me a lot of time and keep me in a better grading mood!
Part 1: What’s Your GPA?
Your solution to this part will require the usage of some of the elements of 3 demo scripts. Work with these 3 web pages in the browser first to see how they work. Then examine their JavaScript code to see how it is done. Then you will be ready to successfully solve this part yourself.
1. Using String Variables Demo: http://www.faculty.rcc.edu/mcleod/js/class_demos/variables/variables1.html
2. Using Numeric Variable Demo: http://www.faculty.rcc.edu/mcleod/js/class_demos/variables/variables2.html
3. If Statements Demo: http://www.faculty.rcc.edu/mcleod/js/class_demos/decisions/ifs.html
Create a web page (with your name and A2P1 in the title and h1 heading) to prompt the user for their first name. Next, it should prompt the user for their GPA. In the second prompt, it should mention their first name, such as “Please enter your GPA, Joe” (or whatever they said their name was) in the first prompt. Next, your script should determine what grade that GPA results in. Grades of 3.7 or above are considered an A, grades of 2.7 and above are considered a B, and so forth. Grades under 0.7 are considered to be an F. Your result should be written into the page’s HTML as a paragraph using document.write and should mention the person’s name, gpa, and grade in a sentence that has proper punctuation, spacing, and grammar as shown below:
Joe, your GPA of 3.25 results in a B grade.
What to turn in:
1. Into the given assignment 2 “turn it in” Word file, paste a copy your web page’s code into the part 1 section of the document. It should contain ALL of your page’s code. (Make sure this not a screen shot of your code but a copy/paste of the code text.)
No screenshot is needed for this part.
Part 2: Gimme Some Products!
In several future assignment parts, you are going to be working with a “fake company” that sells “fake products” at “fake prices”. This means, you can make up a company for you to own that sells whatever products you want it to. For now you only need 2 products. Look at the screen shot at the end of this “part 2” to get an idea of what your page might look like and what I mean when I say you can have your business sell whatever you want. Be creative and have fun with this company store. You just need to find 2 product images that represent your 2 products you will be selling. Then you can begin to work on this assignment part. You are not allowed to do the same Zombie business theme that I am using in my examples. Choose something different but at least equally as fun.
Once you have chosen your company products, you are ready to start building your products page. To start you off, you can paste the code given to you below. Then add your own details where indicated. That will save you time and allow you to focus on the JavaScript. I recommend you create an A2P2 folder and then copy and paste this code into your editor and save it from there into your folder as “a2p2.html”. When you locate your 2 product images (you can just use google and do an image search for whatever you are selling) save these 2 images into that same “a2p2” folder next to your a2p2.html file.
<!doctype html
<html lang="en"
<head
<meta charset="utf-8"
<titleA2P2 by YOUR NAME HERE</title
</head
<body
<h1A2P2 YOUR STORE NAME GOES HERE</h1
<pYOUR STORE INTRODUCTION GOES HERE</p
<pThis months specials:</p
<table border="1" cellspacing="0" cellpadding="6" summary="Table of product images and prices and descriptions"
<tbody
<tr
<tdPRODUCT IMAGE #1 GOES HERE</td
<td<p style="font-weight: bold"PRICE AND PRODUCT NAME #1 GOES HERE </p
<pPRODUCT #1 DESCRIPTION GOES HERE </p</td
</tr
<tr
<tdPRODUCT IMAGE #2 GOES HERE</td
<td<p style="font-weight: bold"PRICE AND PRODUCT NAME #2 GOES HERE </p
<pPRODUCT #2 DESCRIPTION GOES HERE </p</td
</tr
</tbody
</table
<script
// YOUR JAVASCRIPT CODE GOES HERE
</script
</body
</html
Once you have this starter code in your editor you can begin to fill in the indicated HTML areas until you have a page that looks similar to the screenshot below. Note that your prices should be integer values – use dollars but no cents, such as $5 instead of $4.99. Once all of your html is filled in, then you can begin to fill in the JavaScript parts to produce the “prompts” shown and then to produce the final “h2” purchase summary at the bottom of the page as shown.
At the bottom of the "body" section of your document, add JavaScript to do the following. Prompt the user for their name. Then you will prompt the user two more times, once for each product, to see how many of each product they would like to order. Include the user's name in these prompts to make it more personal, as shown in the first screen shot below (since you ask them for their name in the first prompt, you will be able to use it in the second and third prompts). After receiving their name and order information, next produce a single line summary of the information that was entered by the user in the prompts, using the exact format shown in the screen shot below.
Make sure the “title” has your name and the assignment and part number (A2P2).
Here are example prompts from Chrome:
1st prompt introduces store and asks for customer’s name:
2nd prompt uses customer’s name and asks for the quantity for the 1st product:
3rd prompt uses customer’s name and asks for the quantity for the 2nd product:
Then a summary of the information from the prompts is written at the bottom of the page using an “h2” heading produced with a final “document.write” statement:
What to turn in:
1. Into the given assignment 2 “turn it in” Word file, paste a screen shot of your products page in the browser. Paste it into the part 2 screen shot area of the document. Make sure all of your page is showing in the browser, especially the bottom part. It should look similar to the screen shot shown above.
2. Into the given assignment 2 “turn it in” Word file, paste a copy of your web page’s code into the part 2 code section of the document. It should contain ALL of your page’s code. (Make sure this not a screen shot of your code but a copy/paste of the code text.)
Part 3: Receipt This!
This part is going to be an addition to the previous part. So begin by making a copy of your work from part 2. To the end of the part 2 solution code, you will add a “receipt” to display subtotals for each product and a grand total. No tax. Here is a screen shot of just the receipt area at the bottom of the page (nothing changes from part 2 above that point) to show you what it should look like when you are done.
Also this receipt is shown for “Bob” again, ordering 2 mugs and 3 jerky bags again, keep in mind that your script should produce a correct receipt for whatever reasonable values are entered at the prompts for the customer’s name and quantities ordered.
What to turn in:
1. In the given assignment 2 Word File, paste a screen shot of your “A2P3” page as it appears in the browser after the receipt displays. Use Word to “crop” and shrink it down to a reasonable size, but make sure the receipt area is readable.
2. Next, copy your page’s code and paste it below your screenshot in that same Word document. It should contain ALL of your page’s code. (Make sure this not a screen shot of your code but a copy/paste of the code text.)
Part 4: If it Don’t Make Dollar$, it Don’t Make ¢ents!
This part will be a modification of your part 3 work, so begin by copying your part 3 file and naming it a2p4.html.
Change the prices of your 2 products to include dollars and cents, such as $9.95 and $7.49. These new prices should be displayed in the HTML table area and also used in your JavaScript calculations and receipt display. Furthermore, calculate and display tax on the order using an 8% tax rate and then the grand total including tax. Then make sure that all receipt amounts display on the page as dollars and cents – always showing 2 decimal places.
To help you work with displaying decimals, you should use the JavaScript “toFixed” function. To see examples of its usage, check out this page: http://www.w3schools.com/jsref/jsref_tofixed.asp
Below is an example of what your receipt at the bottom of the page might look like with the new pricing, tax calculation, and 2 decimal place displays…
What to turn in:
1. In the given assignment 2 Word File, paste a screen shot of your “A2P4” page as it appears in the browser after the receipt is displayed. Make sure the whole page is displaying, especially the receipt area.
2. Next copy your page’s code and paste it below your screenshot in that same Word document. It should contain ALL of your page’s code.
Part 5: What The Function (WTF)?
For this part, you once again are going to continue your work from the previous version of your code, so copy your a2p4 file and name it a2p5.html. Your a2p5 code should produce the very same receipt as your a2p4 code did, but it will do so differently. You are going to write a JavaScript function to write the receipt and place this function in the “head” section of your page. Then you will “call” (activate) this function when and where it is needed from the place down where the current “document.writes” for the receipt are. Then you will no longer need the document.writes down there at the bottom of the page.
To help you with writing functions in the “head” and calling them from within the “body”, our textbook has good introductory function coverage from chapter 4 pages 83 – 120. Also, check out the following examples.
http://www.faculty.rcc.edu/mcleod/js/class_demos/functions/functions1.html
http://www.faculty.rcc.edu/mcleod/js/book_demos/chapter_08/script08-01.html
http://www.faculty.rcc.edu/mcleod/js/book_demos/chapter_08/script08-03.html
http://www.faculty.rcc.edu/mcleod/js/class_demos/functions/functions2.html
Note that in your case, you will be calling the function just once and it will produce the entire receipt before returning. It does not need to return a value.
What to turn in:
1. Copy your page’s code and paste it where it goes in the given A2P5 area within that same Word document. It should contain ALL of your page’s code. (Make sure this not a screen shot of your code but a copy/paste of the code text.)
There is no need for a screen shot for this part.
