Lemonade

In this example below you will see how to do a Lemonade with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kwilli2021, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kwilli2021 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Lemonade</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1> Lemonade Stand</h1>
<hr>
<br>
<div class="description">
  <p>With this Lemonade Stand Calculator you will be able to calculate your profil and loss margins to make you Lemonade Stand the best and most profitable Lemonade stand around. </p>

  <img src="http://cdn.wikimg.net/strategywiki/images/thumb/4/49/LemonadeTycoon1.jpg/250px-LemonadeTycoon1.jpg" alt="lemonade stand">
</div>
<br>

<hr>
<form>
  <div>
    <label for="Price per Lemon">Price per Lemon</label> <input type="text" id="lemonPrice" placeholder="$0.00">
    <br>
    <label for="Bag of Sugar">Bag of Sugar</label> <input type="text" id="sugarPrice" placeholder="$0.00">

    <select id="selectBagSize">
        <option value = "1LB">1LB</option>
        <option value = "2LB">2LB</option>
        <option value = "5LB">5LB</option>
      </select>
    <br>
    <br>
    <label for="cost of Cup">Cup</label> <input type="text" id="costCups" placeholder="0.00"> for
    <label for="amt of Cups"></label> <input type="text" id="amtCups" placeholder="# of cups">
    <br>
    <label for="pricePerCup">Price per Cup</label> <input type="text" id="pricePerCup" placeholder="0.00">

    <hr>
    <div align="right">
      <button type="button" id="calculate"> Calculate Profit or Loss</button>
    </div>


    <br>
    <br>
    <hr>
    <h1>Calculator</h1>

    <div> calculation<span id="calc"> 0</span></div>

    <table>
      <tr>
        <th>Cups</th>
        <th>Total Expense</th>
        <th>Gross Expense</th>
        <th>Profit/Loss</th>
      </tr>
      <tr>
        <td>10</td>
        <td>
          <div><span id="10t"> 0</span></div>
        </td>
        <td>
          <div><span id="10g"> 0</span></div>
        </td>
        <td>
          <div><span id="10pl"> 0</span></div>
        </td>
      </tr>

      <tr>
        <td>50</td>
        <td>
          <div><span id="50t"> 0</span></div>
        </td>
        <td>
          <div><span id="50g"> 0</span></div>
        </td>
        <td>
          <div><span id="50pl"> 0</span></div>
        </td>
      </tr>
      <tr>
        <td>100</td>
        <td>
          <div><span id="100t"> 0</span></div>
        </td>
        <td>
          <div><span id="100g"> 0</span></div>
        </td>
        <td>
          <div><span id="100pl"> 0</span></div>
        </td>
      </tr>
      <tr>
        <td>500</td>
        <td>
          <div><span id="500t"> 0</span></div>
        </td>
        <td>
          <div><span id="500g"> 0</span></div>
        </td>
        <td>
          <div><span id="500pl"> 0</span></div>
        </td>
      </tr>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kwilli2021/lemonade-GjyXKj */
.description img {
  float:right;
  
}


/*Downloaded from https://www.codeseek.co/kwilli2021/lemonade-GjyXKj */
var lPrice = 0;
var sPrice = 0;
var cupPrice = 0;
var amtCup = 0;
var priceCup = 0;
var bagSize = 0;
var profitLoss, cupsFromBag = 0;

$("#calculate").click(function(e) {
  //increment the green count
  lPrice = Number($("#lemonPrice").val());
  sPrice = Numebr($("#sugarPrice").val());
  cupPrice =Number( $("#costCups").val());
  amtCup = Number($("#amtCups").val());
  priceCups = $("#pricePerCup").val();
  bagSize = $("#selectBagSize option:selected").val();
  sugarCalc();
  totalLP();
  cPrice();
  perCupExpense();
  pL();

});

var sPricePerCup = 0;

function sugarCalc() {
  if (bagSize == "1LB") {
    cupsFromBag = 10;
    sPricePerCup = (sPrice / cupsFromBag);
  }
  if (bagSize == "2LB") {
    cupsFromBag = 20;
    sPricePerCup = (sPrice / cupsFromBag);
  }
  if (bagSize == "5LB") {
    cupsFromBag = 50;
    sPricePerCup = (sPrice / cupsFromBag);
  }

  sPricePerCup.toPrecision(2);
  //return $("#calc).html(" RESULT " + sPricePerCup); 
}

var tenlp, fiftylp = 0;

function totalLP() {
  tenlp = lPrice * 10;
  fiftylp = lPrice * 50

  //return $("#ten").html(" RESULT " + tenlp ); 
}

var cPricePerCup = 0;

function cPrice() {
  cPricePerCup = (cupPrice / amtCup).toPrecision(2);

  //return $("#50").html(" RESULT " + cPricePerCup); 
}

var expPerCup = 0;

function perCupExpense() {
  expPerCup = lPrice + sPricePerCup + cPricePerCup;
  //$("#calc").html(" RESULT " + lPrice + " " + sPricePerCup + " " + cPricePerCup + " " + expPerCup);
}

function pL() {
  if (expPerCup > priceCup) {
    profitLoss = expPerCup - priceCups;
  } else {
    profitLoss = priceCups - expPerCup;
  }

  $("#10t").html((expPerCup * 10).toFixed(2))
  $("#10g").html((priceCups * 10).toFixed(2))
  $("#10pl").html((profitLoss * 10).toFixed(2))
  $("#50t").html((expPerCup * 50).toFixed(2))
  $("#50g").html((priceCups * 50).toFixed(2))
  $("#50pl").html((profitLoss * 50).toFixed(2))
  $("#100t").html((expPerCup * 100).toFixed(2))
  $("#100g").html((priceCups * 100).toFixed(2))
  $("#100pl").html((profitLoss * 100).toFixed(2))
  $("#500t").html((expPerCup * 500).toFixed(2))
  $("#500g").html((priceCups * 500).toFixed(2))
  $("#500pl").html((profitLoss * 500).toFixed(2))
}


//
//if (profitLoss*500 <0) {} 
//$("#500pl").html(("(" + (profitLoss * 500).toFixed(2) + ")");
 //                }

Comments