Part 1: What’s Your GPA?
- Using String Variables Demo: http://www.faculty.rcc.edu/mcleod/js/class_demos/variables/variables1.html
- Using Numeric Variable Demo: http://www.faculty.rcc.edu/mcleod/js/class_demos/variables/variables2.html
- 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:
- 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.
<title>A2P2 by YOUR NAME HERE</title>
<h1>A2P2 YOUR STORE NAME GOES HERE</h1>
<p>YOUR STORE INTRODUCTION GOES HERE</p>
<p>This months specials:</p>
<table border=”1″ cellspacing=”0″ cellpadding=”6″ summary=”Table of product images and prices and descriptions”>
<td>PRODUCT IMAGE #1 GOES HERE</td>
<td><p style=”font-weight: bold”>PRICE AND PRODUCT NAME #1 GOES HERE </p>
<p>PRODUCT #1 DESCRIPTION GOES HERE </p></td>
<td>PRODUCT IMAGE #2 GOES HERE</td>
<td><p style=”font-weight: bold”>PRICE AND PRODUCT NAME #2 GOES HERE </p>
<p>PRODUCT #2 DESCRIPTION GOES HERE </p></td>
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:
- 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.
- 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:
- 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.
- 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.
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:
- 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.
- 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)?
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.
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:
- 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.