Created
March 5, 2017 19:36
-
-
Save electronicbites/6d10270e126396c34ee9acc32ecb694e to your computer and use it in GitHub Desktop.
Noshow Calculator // source http://jsbin.com/bitosep
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Noshow Calculator</title> | |
| <style id="jsbin-css"> | |
| .font16 { | |
| font-size: 16px; | |
| } | |
| #container { | |
| background: white; | |
| height: 500px; | |
| width: 345px; | |
| padding-top: 20px; | |
| font-family: SourceSansPro-Regular; | |
| font-size: 20px; | |
| } | |
| #boxTop { | |
| background: #F8F8F8; | |
| border: 1px solid #E6E6E6; | |
| border-radius: 4px 4px 0 0; | |
| font-family: SourceSansPro-Semibold; | |
| } | |
| .blue-font { | |
| color: #6B91A0; | |
| } | |
| .red-font { | |
| color: #EC7373; | |
| } | |
| .green-font { | |
| color: #53CE09; | |
| } | |
| #ok-button { | |
| width: 100%; | |
| height: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="boxTop"> | |
| Do you know how much more you could earn without No-Shows? | |
| </div> | |
| <div id="calcContainer"> | |
| <div class="row"> | |
| <label>No-Shows per week?</label> | |
| <input type="number" name="noshows" id="noshows" value="2"/> | |
| </div> | |
| <div class="row"> | |
| <label>Revenue per cover?</label> | |
| <input type="number" name="revenue" id="revenue" value="200"/> | |
| <input type="select" name="currency" value="$"/> | |
| </div> | |
| <hr> | |
| <div class="row font16 blue-font"> | |
| <div class="label"> | |
| Drinks 40% | |
| </div> | |
| <div id="drinksValue"> | |
| -325 $ | |
| </div> | |
| </div> | |
| <div class="row font16 blue-font"> | |
| <div class="label"> | |
| Waste 10% | |
| </div> | |
| <div id="wasteValue"> | |
| -35 $ | |
| </div> | |
| <div> | |
| (food, staff time) | |
| </div> | |
| </div> | |
| <hr> | |
| <hr> | |
| <div class="row font16 red-font"> | |
| <div class="label"> | |
| Your weekly loss is | |
| </div> | |
| <div id="weeklyLoss"> | |
| - $ 800 | |
| </div> | |
| </div> | |
| <div class="row font16 red-font"> | |
| <div class="label"> | |
| Your annual loss is | |
| </div> | |
| <div id="annualLoss"> | |
| - $ 41.405 | |
| </div> | |
| </div> | |
| <div class="row green-font"> | |
| <div class="label"> | |
| Earn more with Seatris | |
| </div> | |
| <div id="earnValue"> | |
| $ 41.405 | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <button id="ok-button">OK! I want more infos</button> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| window.onload = function() { | |
| // displays | |
| var drinksValue = document.getElementById("drinksValue"), | |
| wasteValue = document.getElementById("wasteValue"), | |
| weeklyLoss = document.getElementById("weeklyLoss"), | |
| annualLoss = document.getElementById("annualLoss"), | |
| earnValue = document.getElementById("earnValue"); | |
| // inputs | |
| var noShowsPerWeekElement = document.getElementById("noshows"), | |
| revenueElement = document.getElementById("revenue"), | |
| okButton = document.getElementById("ok-button"); | |
| // event handlers | |
| noShowsPerWeekElement.onchange = function() { | |
| calculate(); | |
| }; | |
| revenueElement.onchange = function() { | |
| calculate(); | |
| }; | |
| function calculate() { | |
| noShowsPerWeek = noShowsPerWeekElement.valueAsNumber; | |
| revenue = revenueElement.valueAsNumber; | |
| currency = '$'; | |
| drinks = (revenue * 0.4); | |
| waste = (revenue * 0.1); | |
| drinksValue.innerHTML = "-" + drinks + " " + currency; | |
| wasteValue.innerHTML = "-" + waste + " " + currency; | |
| weekly = (revenue + drinks + waste) * noShowsPerWeek; | |
| weeklyLoss.innerHTML = "-" + weekly + " " + currency; | |
| annual = weekly * 52; | |
| annualLoss.innerHTML = "-" + annual + " " + currency; | |
| earnValue.innerHTML = currency + " " + annual; | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.font16 { | |
| font-size: 16px; | |
| } | |
| #container { | |
| background: white; | |
| height: 500px; | |
| width: 345px; | |
| padding-top: 20px; | |
| font-family: SourceSansPro-Regular; | |
| font-size: 20px; | |
| } | |
| #boxTop { | |
| background: #F8F8F8; | |
| border: 1px solid #E6E6E6; | |
| border-radius: 4px 4px 0 0; | |
| font-family: SourceSansPro-Semibold; | |
| } | |
| .blue-font { | |
| color: #6B91A0; | |
| } | |
| .red-font { | |
| color: #EC7373; | |
| } | |
| .green-font { | |
| color: #53CE09; | |
| } | |
| #ok-button { | |
| width: 100%; | |
| height: 30px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">window.onload = function() { | |
| // displays | |
| var drinksValue = document.getElementById("drinksValue"), | |
| wasteValue = document.getElementById("wasteValue"), | |
| weeklyLoss = document.getElementById("weeklyLoss"), | |
| annualLoss = document.getElementById("annualLoss"), | |
| earnValue = document.getElementById("earnValue"); | |
| // inputs | |
| var noShowsPerWeekElement = document.getElementById("noshows"), | |
| revenueElement = document.getElementById("revenue"), | |
| okButton = document.getElementById("ok-button"); | |
| // event handlers | |
| noShowsPerWeekElement.onchange = function() { | |
| calculate(); | |
| }; | |
| revenueElement.onchange = function() { | |
| calculate(); | |
| }; | |
| function calculate() { | |
| noShowsPerWeek = noShowsPerWeekElement.valueAsNumber; | |
| revenue = revenueElement.valueAsNumber; | |
| currency = '$'; | |
| drinks = (revenue * 0.4); | |
| waste = (revenue * 0.1); | |
| drinksValue.innerHTML = "-" + drinks + " " + currency; | |
| wasteValue.innerHTML = "-" + waste + " " + currency; | |
| weekly = (revenue + drinks + waste) * noShowsPerWeek; | |
| weeklyLoss.innerHTML = "-" + weekly + " " + currency; | |
| annual = weekly * 52; | |
| annualLoss.innerHTML = "-" + annual + " " + currency; | |
| earnValue.innerHTML = currency + " " + annual; | |
| } | |
| }</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .font16 { | |
| font-size: 16px; | |
| } | |
| #container { | |
| background: white; | |
| height: 500px; | |
| width: 345px; | |
| padding-top: 20px; | |
| font-family: SourceSansPro-Regular; | |
| font-size: 20px; | |
| } | |
| #boxTop { | |
| background: #F8F8F8; | |
| border: 1px solid #E6E6E6; | |
| border-radius: 4px 4px 0 0; | |
| font-family: SourceSansPro-Semibold; | |
| } | |
| .blue-font { | |
| color: #6B91A0; | |
| } | |
| .red-font { | |
| color: #EC7373; | |
| } | |
| .green-font { | |
| color: #53CE09; | |
| } | |
| #ok-button { | |
| width: 100%; | |
| height: 30px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = function() { | |
| // displays | |
| var drinksValue = document.getElementById("drinksValue"), | |
| wasteValue = document.getElementById("wasteValue"), | |
| weeklyLoss = document.getElementById("weeklyLoss"), | |
| annualLoss = document.getElementById("annualLoss"), | |
| earnValue = document.getElementById("earnValue"); | |
| // inputs | |
| var noShowsPerWeekElement = document.getElementById("noshows"), | |
| revenueElement = document.getElementById("revenue"), | |
| okButton = document.getElementById("ok-button"); | |
| // event handlers | |
| noShowsPerWeekElement.onchange = function() { | |
| calculate(); | |
| }; | |
| revenueElement.onchange = function() { | |
| calculate(); | |
| }; | |
| function calculate() { | |
| noShowsPerWeek = noShowsPerWeekElement.valueAsNumber; | |
| revenue = revenueElement.valueAsNumber; | |
| currency = '$'; | |
| drinks = (revenue * 0.4); | |
| waste = (revenue * 0.1); | |
| drinksValue.innerHTML = "-" + drinks + " " + currency; | |
| wasteValue.innerHTML = "-" + waste + " " + currency; | |
| weekly = (revenue + drinks + waste) * noShowsPerWeek; | |
| weeklyLoss.innerHTML = "-" + weekly + " " + currency; | |
| annual = weekly * 52; | |
| annualLoss.innerHTML = "-" + annual + " " + currency; | |
| earnValue.innerHTML = currency + " " + annual; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment