Chapter 19 - Lemonade Stand - Start

Starting app for the Chapter 19 project in JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by Phoebe Jeske

HTML

<div id="5DayWeather"></div>
<br clear="all">
<div id="orderForm">
  <div id="glasses">
    <label>How many glasses of lemonade do you want to make this week?
      <br />
      <input type="number" id="numGlasses" placeholder="hint: think big!" />
    </label>
  </div>
  <div id="price">
    <label>How much will you charge for a glass of lemonade this week?
      <br />
      <input type="number" id="glassPrice" placeholder="more than .5" />
    </label>
  </div>
  <button type="button" id="OpenTheStand">Open The Stand!</button>
  <button type="button" id="ChangeTheWeather">Change The Weather</button>
</div>
<div id="result"></div>

CSS

#Monday,
#Tuesday,
#Wednesday,
#Thursday,
#Friday {
  width: 18%;
  height: 200px;
  float: left;
  border: 1px solid black;
  padding: 2px;
  font-family: sans-serif;
  font-size: 12px;
}

.Sunny {
  background-color: skyblue;
}

.Raining {
  background-color: lightgrey;
}

.Cloudy {
  background-color: #eee;
}

.Thunderstorm {
  background-color: #333;
  color: #fff;
}

#orderForm {
  width: 75%;
  margin: 20px auto;
}

#receipt {
  background-color: #996600;
  color: yellow;
  padding: 6px;
}

JavaScript

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

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 = [];

generateWeather();

// make the week's weather


/**
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();
  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);
    glassesLeft = numGlasses - totalGlasses;
    if (glassesSold > glassesLeft) {
      glassesSold = glassesLeft;

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