Introduction

In lecture this week, you started to learn about JavaScript. JavaScript is a computer programming language that is structurally very similar to Scratch, so everything you learned in Scratch still applies in JavaScript. For the lab, you will use JavaScript to calculate the total of an online order for Girl Scount cookies.

Download, Extracting, and Opening the Lab

Downloading the Lab

To get started, first download the ZIP file for Lab 2 here.

Extracting the Lab

Because this is a ZIP file, you must extract it in order to work on the files inside of the ZIP file:

• If you are on a lab machine (or any Windows machine), you can extract the ZIP file by doing the following (do not double-click the file):
  1. Locate the file using Windows, likely stored in your Downloads folder. (You can move it to your Desktop if you prefer to work on it on your desktop.)
  2. Right click on the file
  3. Choose "Extract All..."
  4. Press "Extract" on the dialog that opens up
     • The extraction of the ZIP file will create a new directory with the files that were contained inside of the ZIP file.
  5. Navigate into the new new folder (not the ZIP file) that contains only the three files
• If you on OS X, you can double-click the ZIP file within Finder and it will extract it into a new folder for you.

All three files in the directory need to stay together in the space directory for the lab to work correctly.

Opening the Lab

Inside of the folder with the extracted file, open the cookieOrder.html file using either Chrome or Firefox. (It may be necessary to right-click the file and choose "Open With" on Windows or OS X.)

• If you see an orange bar span across the top of the screen, you extracted the file correctly! Awesome!
• If you only see a white background with no orange bar, you did not extract the file. Try carefully repeating the steps for extracting the lab.

After getting the HTML open, you need to also open up the JavaScript file in a plain text editor. On a lab machine, Notepad++ is an ideal text editor for this class. To open Notepad++:

1. Open the Start Menu on the lab computer
2. Choose All Programs
3. Choose Word Processing
4. Choose Notepad++

Finally, open up cookieOrder.js inside of Notepad++. You can either drop-and-drag the file from Windows to open it or use File->Open inside of Notepad++.

Completing the Lab

Explore the Lab

To start off, you and your team should explore the lab! Enter various quantities of cookies in the text box and press "Submit Order". You will notice that a receipt is generated, but the receipt is incomplete. In order to complete the receipt, you will need to do three things:

• Calculate the total number of cookies ordered, across all four cookie types
• Calculate the unique types of cookies ordered, which will either be 0, 1, 2, 3, or 4
• Calculate the total price for the full order of cookies

Part 1: Find the Total Number of Cookies

Inside of cookieOrder.js, you will find a sumCookies function:
var sumCookies = function(cookie1, cookie2, cookie3, cookie4) { }

Before the function is a description of each of the four parameters passed into the function. Specifically, each of the variables cookie1, cookie2, cookie3, and cookie4 are the quantities of the different types of cookies the user placed in their order. To complete this function, the function must return the total number of boxes of cookies that are part of the order.

Hint: This sounds very similar to the sum function Wade presented in lecture on Wednesday. [Open up the lecture slides, make sure to go forward to see all the slides about the sum function]

Part 2: Find the Unique Types of Cookies

This function is set up identically to the first function, except that you must return the unique types of cookies ordered. For example, if the order contains only "Thin Mint" cookies, the number of unique cookie types is only one (1) regardless of how many boxes of "Thin Mint" cookies are on the order. Likewise, if at least one box is ordered of only three of the four types of cookies, this function must return 3.

Hint: Would a conditional be useful? Should you check if the number of boxes ordered of each type of cookie is equal to 0?

Part 3: Calculate the Total Price of the Cookie Order

This function is set up identically to the first two function, except that you must return the total cost of the full order of cookies. You should return the price as a number. Do not add a dollar sign.

Hint: You may want to create a new variable called price that starts as zero and is added to four times.

Submission

To submit your lab, you must submit your cookieOrder.js to the CS 105 website. You should submit ONLY .js file. You do not need to submit the other files in the folder. Click here to submit the lab!