Making a profit

Profit is what’s left over from the total revenue of a business (all the money that comes in) after expenses (everything that the business spends money on).

In a lemonade stand, you may have all the following expenses: lemons, sugar, ice, cups, and stand maintenance (things like paint, repairs, and so on). You’ve done the math, and calculated that when you combine all your expenses, the cost for you to make a cup of lemonade is about $0.50. In order to make back your investment in the lemonade stand, you need to earn at least $0.50 for each glass of lemonade that you make.

Understanding your customers

As you know, the temperature in Anytown changes all the time, but one thing is for sure: The hotter it gets, the more lemonade people buy. But if the price of lemonade is too high, people won’t buy it.

As a lemonade stand owner, your goal is to figure out how much lemonade to make and how much to charge for it in order to make the greatest profit.

Understanding the math

Here’s the basic formula that our game uses to calculate how much lemonade is sold each day:

Glasses Sold = Temperature ÷ Price

For example, if the temperature is 100 degrees, and the price of lemonade is $2, the math looks like this:

Glasses Sold = 100 ÷ 2

The result is that you sold 50 glasses of lemonade.

However, if the temperature is lower, say 50 degrees, the formula looks like this:

Glasses Sold = 50 ÷ 2

The result is that you only sold 25 glasses of lemonade.

However, if you lower the price of lemonade to $1, the math looks like this:

Glasses Sold = 50 ÷ 1

The result is that you can sell 50 glasses of lemonade at the lower price when the temperature is lower.

Graphing sales, temperature, and price

Understanding the relationship among glasses sold, temperature, and price is important to master the game. Follow these steps to visualize this relationship using a 3D graph:

1. Go to www.wolframalpha.com in your web browser.

   You’ll see the homepage of WolframAlpha, as shown in Figure 19-2.

2. In the search form, type 3D plot.

   You see the search results with a Function to Plot field, as shown in Figure 19-3.

3. Below the Function to Plot field, click the Variables and Ranges link.

   Additional fields appear, as shown in Figure 19-4.

4. In the Function to Plot field, enter z = x/y.

   The letter z represents the number of glasses sold, the letter x represents the temperature, and the letter y represents the price.

5. In the Lower Limit 1 field, enter 0.

   The Lower Limit 1 field represents the lowest value we want to graph for the variable x, which corresponds to the temperature value in our lemonade stand.

6. In the Upper Limit 1 field, enter 100.

   This represents the maximum temperature value that we’ll graph.

7. In the Lower Limit 2 field, enter 0.

   This represents the lowest value for price in the lemonade stand.

   At $0 per glass, you’re sure to sell a lot of lemonade, but we don’t recommend this strategy in the long run if you’re trying to run a business!

8. In the Upper Limit 2 field, enter 10.

   It’s unlikely that you’ll want to charge anyone more than $10 for a glass of lemonade, so we’ll set the upper limit to 10.

9. Click one of the orange equal sign buttons next to the input fields to graph your function.

   The results appear, and you see a graph similar to the one shown in Figure 19-5.

Notice that on the graph in Figure 19-5, the highest possible number of glasses of lemonade sold happens when the temperature is at the maximum and the price is at the minimum.

WolframAlpha can do a lot of really interesting things! Feel free to try out different values and try making different graphs.

Forking the code

Follow these steps to make a copy of the starter app:

1. Log in to JSFiddle and go to our public dashboard at http://jsfiddle.net/user/forkids/fiddles.
2. Find the program named “Chapter 19 – Lemonade Stand – Start” and click its title to open it.
3. Click the Fork link in the top menu to create your own copy of the program.
4. Open the Fiddle Options in the left navigation and change the title to “(Your Name)’s Lemonade Stand.”
5. Click Update and then Set as Base to save your own copy of the Lemonade Stand game.

Writing the JavaScript

Take a look at the starter program for the Lemonade Stand game. We’ve written enough HTML and CSS to get you started, but the JavaScript pane is completely blank.

When you run the program, the HTML shows up in the Results pane, but clicking the button doesn’t do anything.

Let’s walk through each thing that the Lemonade Stand needs to do and write code and comments as we go.

Creating globals

The first thing we’ll do is to define some global variables that will be used in the program. We’ll need the following:

• An array of days of the week
• An array of weather types
• Minimum and maximum temperature values
• The cost of making a cup of lemonade
• An array to hold actual daily temperatures

Before writing any code, create comments in the JavaScript window for each of these items, as shown in Listing 19-1.

Listing 19-1 Create Comments for Variables

// create days of week array

// define types of weather

// set min and max temperatures

// cost (to you) of a cup of lemonade

// array for storing daily temps

Now that we have comments, follow these steps to fill in the actual variable declarations.

1. Under the first comment (create days of week array), type the following:

   var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

2. Under the next comment (define types of weather), create an array of descriptions of weather.

   Here’s our array as an example:

   var weather = ["Sunny", "Partly Sunny", "Partly Cloudy", "Cloudy", "Raining", "Snowing", "Thunderstorm", "Foggy"];

   Feel free to add or delete any types of weather you like.

3. Under the next comment (set min and max temperatures), create two new variables to hold the coldest and hottest temperatures that you’d like to use in your game.

   Here’s our example code:

   var maxTemp = 100;

   var minTemp = 0;

4. Under the next comment (cost of a cup of lemonade), declare a variable named lemonadeCost and give it a numeric value of your cost to make a cup of lemonade, in dollars.

   var lemonadeCost = 0.5;

5. Create an empty array, called dailyTemp, to hold the daily temperature values.

   var dailyTemp = [];

6. Click Update to save your work.
7. Your JavaScript pane should now look like Listing 19-2.

Listing 19-2 The Globals Have Been Created

// create days of week array

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

// define types of weather

var weather = ["Sunny", "Partly Sunny", "Partly Cloudy", "Cloudy", "Raining", "Snowing", "Thunderstorm", "Foggy"];

// set min and max temps

var maxTemp = 100;

var minTemp = 0;

// cost (to you) of a cup of lemonade

var lemonadeCost = 0.5;

// array for storing daily temps

var dailyTemp = [];

Generating weather

The next step in writing our program is to generate the weather. Fortunately, we already have a function for generating random weather — namely, the random weather app that we wrote in Chapter 17.

We’re going to make one addition to the generateWeather function from our random weather app created in Chapter 17. We’ll store the daily weather in a global array called dailyTemp.

Follow these steps to write the generateWeather function:

1. Write a comment describing the purpose of the function.

   /**

   generates weather for the week

   **/

2. Write the function head.

   function generateWeather() {

3. Create two function variables to hold the current weather and temperature.

   var weatherToday;

   var tempToday;

4. Start a for loop to cycle through each day of the week.

   for (var i = 0; i < days.length; i++) {

5. Get a random element from the weather array and assign it to weatherToday.

   weatherToday = weather[Math.floor(Math.random() * weather.length)];

6. Get a random temperature between the values of minTemp and maxTemp.

   tempToday = Math.floor(Math.random() * (maxTemp - minTemp) + minTemp);

7. Store the temperature in the dailyTemp array.

   dailyTemp[i] = tempToday;

8. Output a message describing the day’s weather.

   document.getElementById("5DayWeather").innerHTML += "<div id='" + days[i] + "' class='" + weatherToday + "'><b>Forecast for " + days[i] + ":</b><br><br>" + weatherToday + " and " + tempToday + " degrees.</div>";

9. Close the loop and the function.

     }

   }

10. Call the function when the program loads, by typing the following below the global variable declarations.

    generateWeather();

11. Click Update to save your work.

That completes the weather generation function. If you did everything correctly, a table of the week’s weather should display in the Result pane now, above the input fields, as shown in Figure 19-6.

Compare your JavaScript with the code in Listing 19-3 and make sure that they match before moving on.

Listing 19-3 The Completed Globals and the generateWeather Function

// create days of week array

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

// define types of weather

var weather = ["Sunny", "Partly Sunny", "Partly Cloudy", "Cloudy", "Raining", "Snowing", "Thunderstorm", "Foggy"];

// set min and max temps

var maxTemp = 100;

var minTemp = 0;

// cost (to you) of a cup of lemonade

var lemonadeCost = 0.5;

// array for storing daily temps

var dailyTemp = [];

// make the week's weather

generateWeather();

/**

generates weather for the week

**/

function generateWeather() {

    var weatherToday;

    var tempToday;

    for (var i = 0; i < days.length; i++) {

        weatherToday = weather[Math.floor(Math.random() * weather.length)];

        tempToday = Math.floor(Math.random() * (maxTemp - minTemp) + minTemp);

        dailyTemp[i] = tempToday;

        document.getElementById("5DayWeather").innerHTML += "<div id='" + days[i] + "' class='" + weatherToday + "'><b>Forecast for " + days[i] + ":</b><br><br>" + weatherToday + " and " + tempToday + " degrees.</div>";

    }

}

Opening the stand

The next function we’ll create is the one that opens the stand and calculates the number of glasses sold for the week.

Follow these steps to write the openTheStand function.

1. Write a comment describing the function and then write the function head.

   /**

   calculates glasses of lemonade sold

   **/

   function openTheStand() {

2. Create three new variables — one to hold the daily number of glasses sold, one to hold the weekly total, and one to hold the number of glasses we have left to sell — and initialize all three with 0.

   var glassesSold = 0; // daily

   var totalGlasses = 0; // weekly

   var glassesLeft = 0; // left to sell

3. Call a function named resetForm(), which resets the report area of the program so that it can be run multiple times without restarting the game.

   // clear previous results

   resetForm();

   We’ll write the resetForm function after we finish openTheStand();.

4. Get the values from the form fields.

   // get input

   var numGlasses = Number(document.getElementById("numGlasses").value);

   var glassPrice = Number(document.getElementById("glassPrice").value);

5. Create a new loop to cycle through each day of the week.

   for (var i = 0; i < days.length; i++) {

6. Calculate the number of glasses sold.

   // glasses sold depends on temp and price

   glassesSold = Math.floor(dailyTemp[i] / glassPrice);

7. Calculate how many glasses are left.

   // how many glasses do we have now?

   glassesLeft = numGlasses - totalGlasses;

8. Write an if…else statement that checks whether you’re out of lemonade.

   // we can't sell more than we have

   if (glassesSold > glassesLeft) {

       glassesSold = glassesLeft;

   }

   If glassesSold is greater than what we have left, just sell what we have left by setting the glassesSold variable equal to what’s left.

9. Increase the weekly total of glasses sold.

   // increase the weekly total

   totalGlasses = glassesSold + totalGlasses;

10. Display the daily totals.

    // display daily total

    document.getElementById("result").innerHTML += "<p>" + days[i] + ", you sold " + glassesSold + " glasses of lemonade.</p>";

11. Finish the loop with a curly bracket.

    }

12. Make a call to the function that will display the weekly results, passing it three arguments: numGlasses, glassPrice, and totalGlasses.

    displayResults(numGlasses,glassPrice,totalGlasses);

13. Finish the function by typing a closing curly bracket.

    }

14. Save your work by clicking Update.

If you did everything right, your openTheStand function should match the code in Listing 19-4.

Listing 19-4 The openTheStand Function

/**

calculates glasses of lemonade sold

**/

function openTheStand() {

    var glassesSold = 0; // daily

    var totalGlasses = 0; // weekly

    var glassesLeft = 0; // left to sell

    // clear out previous results

    resetForm();

    // get input

    var numGlasses = Number(document.getElementById("numGlasses").value);

    var glassPrice = Number(document.getElementById("glassPrice").value);

    for (var i = 0; i < days.length; i++) {

        // glasses sold depends on temp and price

        glassesSold = Math.floor(dailyTemp[i] / glassPrice);

        // how many glasses do we have now?

        glassesLeft = numGlasses - totalGlasses;

        // we can't sell more than we have

        if (glassesSold > glassesLeft) {

         glassesSold = glassesLeft;

        }

        // increase the weekly total

        totalGlasses = glassesSold + totalGlasses;

        // display daily total

        document.getElementById("result").innerHTML += "<p>" + days[i] + ", you sold " + glassesSold + " glasses of lemonade.</p>";

    }

    displayResults(numGlasses, glassPrice, totalGlasses);

}

Resetting the program

One of the first things that the openTheStand() function does is to make a call to a function called resetForm(). This function is very simple. Its sole purpose is to clear out the content from the report area of the program so that you can run the program again without the results being added to the bottom of the previous output.

Listing 19-5 shows the complete code for resetForm(). Type this function into the JavaScript pane, underneath the openTheStand() function (at the very end of the code in the JavaScript pane).

Listing 19-5 The resetForm() Function

/**

resets the game so that a new order can be placed

**/

function resetForm() {

    document.getElementById("result").innerHTML = "";

}

After you’ve written the resetForm() function, click the Update link to save your work.

Displaying a report

The final function in the Lemonade Stand game is the displayResults() function. This function calculates weekly results using arguments supplied to it by the openTheStand() function and outputs a report about how you did.

Follow these steps to write displayResults().

1. Write a comment describing the function and the function header, with three parameters: weeklyInventory, glassPrice, and weeklySales.

   /**

   calculates results and displays a report

   **/

   function displayResults(weeklyInventory, glassPrice, weeklySales) {

2. Calculate your total revenue by multiplying the total number of glasses sold times the price that was paid for each glass.

   var revenue = weeklySales * glassPrice;

3. Calculate your expenses by multiplying the number of glasses of lemonade you made times the cost (to you) of each glass.

   var expense = weeklyInventory * lemonadeCost;

4. Calculate how many glasses are left over by subtracting the total sales from the number of glasses you made.

   var leftOver = weeklyInventory - weeklySales;

5. Calculate your profit by subtracting expenses from the total revenue.

   var profit = revenue - expense;

6. Write out the final report using the following four statements:

   // print out the weekly report

   document.getElementById("result").innerHTML += "<p>You sold a total of " + weeklySales + " glasses of lemonade this week.</p>";

   document.getElementById("result").innerHTML += "<p>Total revenue: $" + revenue + ".</p>";

   document.getElementById("result").innerHTML += "<p>You have " + leftOver + " glasses of lemonade left over.</p>";

   document.getElementById("result").innerHTML += "<p>Each glass costs you $" + lemonadeCost + ". Your profit was $" + profit + ".";

7. Finish the function with a closing curly bracket.

   }

8. Click Update to save your work.

The final function should match Listing 19-6.

Listing 19-6 The Final displayResults Function

/**

calculates results and displays a report

**/

function displayResults(weeklyInventory, glassPrice, weeklySales) {

    // calculate results

    var revenue = weeklySales * glassPrice;

    var expense = weeklyInventory * lemonadeCost;

    var leftOver = weeklyInventory - weeklySales;

    var profit = revenue - expense;

    // print out the weekly report

    document.getElementById("result").innerHTML += "<p>You sold a total of " + weeklySales + " glasses of lemonade this week.</p>";

    document.getElementById("result").innerHTML += "<p>Total revenue: $" + income + ".</p>";

    document.getElementById("result").innerHTML += "<p>You have " + leftOver + " glasses of lemonade left over.</p>";

    document.getElementById("result").innerHTML += "<p>Each glass costs you $" + lemonadeCost + ". Your profit was $" + profit + ".";

}

Finishing and testing the program

If you try out the program now, you’ll discover that it doesn’t do anything except print out the random weather forecast.

There’s one thing left that we need to do. Do you know what it is?

If you said that we need to listen for the click event on the button, you’re exactly right. The click event is the switch the makes the lemonade stand work.

Follow these steps to finish the program and test it out.

1. Type the following code before the function declarations in the JavaScript pane:

   // listen for order

   document.getElementById("OpenTheStand").addEventListener("click", openTheStand);

2. Click Update and Set as Base to save your work.

   The final code in the JavaScript pane should match Listing 19-7.

3. Enter a value into the form field labeled “How many glasses of lemonade do you want to make for the week?”
4. Enter a value into the form field label “How much will you charge for a glass of lemonade this week?”

5. Press the Open the Stand button.

   You see how many glasses of lemonade you sold each day, followed by the weekly totals and the profit, as shown in Figure 19-7.

Listing 19-7 The Lemonade Stand Program

// create days of week array

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];

// define types of weather

var weather = ["Sunny", "Partly Sunny", "Partly Cloudy", "Cloudy", "Raining", "Snowing", "Thunderstorm", "Foggy"];

// set min and max temps

var maxTemp = 110;

var minTemp = 32;

// cost (to you) of a cup of lemonade

var lemonadeCost = 0.5;

// array for storing daily temps

var dailyTemp = [];

// listen for order

document.getElementById("OpenTheStand").addEventListener("click", openTheStand);

// make the week's weather

generateWeather();

/**

generates weather for the week

**/

function generateWeather() {

    var weatherToday;

    var tempToday;

    for (var i = 0; i < days.length; i++) {

        weatherToday = weather[Math.floor(Math.random() * weather.length)];

        tempToday = Math.floor(Math.random() * (maxTemp - minTemp) + minTemp);

        dailyTemp[i] = tempToday;

        document.getElementById("5DayWeather").innerHTML += "<div id='" + days[i] + "' class='" + weatherToday + "'><b>Forecast for " + days[i] + ":</b><br><br>" + weatherToday + " and " + tempToday + " degrees.</div>";

    }

}

/**

calculates glasses of lemonade sold

**/

function openTheStand() {

    var glassesSold = 0; // daily

    var totalGlasses = 0; // weekly

    var glassesLeft = 0; // left to sell

    // clear previous results

    resetForm();

    // get input

    var numGlasses = Number(document.getElementById("numGlasses").value);

    var glassPrice = Number(document.getElementById("glassPrice").value);

    for (var i = 0; i < days.length; i++) {

        // glasses sold depends on temp and price

        glassesSold = Math.floor(dailyTemp[i] / glassPrice);

        // how many glasses do we have now?

        glassesLeft = numGlasses - totalGlasses;

        // we can't sell more than we have

        if (glassesSold > glassesLeft) {

         glassesSold = glassesLeft;

        }

        // increase the weekly total

        totalGlasses = glassesSold + totalGlasses;

        // display daily total

        document.getElementById("result").innerHTML += "<p>" + days[i] + ", you sold " + glassesSold + " glasses of lemonade.</p>";

    }

    displayResults(numGlasses, glassPrice, totalGlasses);

}

/**

calculates results and displays a report

**/

function displayResults(weeklyInventory, glassPrice, weeklySales) {

    // calculate results

    var revenue = weeklySales * glassPrice;

    var expense = weeklyInventory * lemonadeCost;

    var leftOver = weeklyInventory - weeklySales;

    var profit = revenue - expense;

    // print out the weekly report

    document.getElementById("result").innerHTML += "<p>You sold a total of " + weeklySales + " glasses of lemonade this week.</p>";

    document.getElementById("result").innerHTML += "<p>Total revenue: $" + revenue + ".</p>";

    document.getElementById("result").innerHTML += "<p>You have " + leftOver + " glasses of lemonade left over.</p>";

    document.getElementById("result").innerHTML += "<p>Each glass costs you $" + lemonadeCost + ". Your profit was $" + profit + ".";

}

/**

resets the game so that a new order can be placed

**/

function resetForm() {

    document.getElementById("result").innerHTML = "";

}

How did you do? Did you make a profit? Can you increase your profit by changing the price or number of glasses? Does one of the methods of increasing profit seem to work better than the other? What happens when you set either the price or the glasses of lemonade to a very large number? What happens when either one is set to a very small number?

When you’re ready, move on to the next section to get some ideas for improvements you may want to make to the Lemonade Game!