Created
February 18, 2013 23:23
-
-
Save koaning/4981681 to your computer and use it in GitHub Desktop.
business plan calculator
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 http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Tangle document</title> | |
| <!-- Tangle --> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/Tangle.js"></script> | |
| <!-- TangleKit (optional) --> | |
| <link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css" type="text/css"> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script> | |
| <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <!-- example --> | |
| <script type="text/javascript"> | |
| var savings, original_cost, costs_left; | |
| function setUpTangle () { | |
| var element = document.getElementById("example"); | |
| var tangle = new Tangle(element, { | |
| initialize: function () { | |
| this.num_people1 = 50; | |
| this.num_people2 = 50; | |
| this.num_people3 = 50; | |
| this.num_people4 = 50; | |
| this.price1 = 0; | |
| this.price2 = 15; | |
| this.price3 = 25; | |
| this.price4 = 39; | |
| this.percent = 3; | |
| this.server_costs = 100; | |
| this.lump_costs = 100; | |
| this.btw = 21; | |
| }, | |
| update: function () { | |
| this.income = this.num_people2*this.price2 + this.num_people3*this.price3 + | |
| this.num_people4*this.price4; | |
| this.income_after_btw = this.income*(1-this.btw/100); | |
| this.solid_costs = this.server_costs + this.lump_costs ; | |
| this.var_costs = this.income_after_btw * (this.percent/100); | |
| this.total_costs = this.solid_costs + this.var_costs; | |
| this.total_figure = this.income_after_btw - this.total_costs | |
| } | |
| }); | |
| return tangle | |
| } | |
| </script> | |
| </head> | |
| <body onload="setUpTangle();"> | |
| <style> | |
| .TKAdjustableNumber { | |
| color: #000; | |
| border-bottom: 0px dashed #46f; | |
| cursor: pointer; | |
| font-style: bold; | |
| } | |
| .TKAdjustableNumberHelp { | |
| position:absolute; | |
| color: #00f; | |
| font: 9px "Helvetica-Neue", "Arial", sans-serif; | |
| opacity: 0; | |
| } | |
| p{ | |
| color: black; | |
| font-family: Courier New; | |
| font-size: 13px; | |
| } | |
| </style> | |
| <p font-"arial">This is a reactive bookkeeping app made with tangleJS.<br> | |
| You can click and drag everything that is bold. </p> | |
| <p id="example" face="Georgia, Arial, Garamond"> | |
| If <b><span data-var="num_people1" class="TKAdjustableNumber" data-min="20" data-max="200"> people</span></b> use a free plan. <br> | |
| If <b><span data-var="num_people2" class="TKAdjustableNumber" data-min="20" data-max="200"> people</span></b> use a <b>$<span data-var="price2" class="TKAdjustableNumber" data-min="0" data-max="60"></span></b> plan. <br> | |
| If <b><span data-var="num_people3" class="TKAdjustableNumber" data-min="20" data-max="200"> people</span></b> use a <b>$<span data-var="price3" class="TKAdjustableNumber" data-min="0" data-max="60"></span></b> plan. <br> | |
| If <b><span data-var="num_people4" class="TKAdjustableNumber" data-min="20" data-max="200"> people</span></b> use a <b>$<span data-var="price4" class="TKAdjustableNumber" data-min="0" data-max="60"></span></b> plan. <br> | |
| <br> | |
| If server costs are <b>$<span data-var="server_costs" class="TKAdjustableNumber" data-min="0" data-max="100"></span></b>. | |
| <br> | |
| If the payment system has lump cost <b>$<span data-var="lump_costs" class="TKAdjustableNumber" data-min="0" data-max="100"></span></b>. | |
| <br> | |
| If payment system takes <b><span data-var="percent" class="TKAdjustableNumber" data-min="0" data-max="10"></span>%</b> variable cost. | |
| <br> | |
| If total taxes on product are <b><span data-var="btw" class="TKAdjustableNumber" data-min="0" data-max="21"></span>%</b>. | |
| <br> | |
| <br> | |
| Then the balance sheet will be something like this: | |
| <br> | |
| <br> | |
| Total income: <i><span data-var="income"></span></i> | |
| <br> | |
| After VAT : <i><span data-var="income_after_btw"></span></i> | |
| <br> | |
| <br> | |
| Solid costs: <i><span data-var="solid_costs"></span></i> | |
| <br> | |
| Variable costs: <i><span data-var="var_costs"></span></i> | |
| <br> | |
| Total costs: <i><span data-var="total_costs"></span></i> | |
| <br> | |
| Total earnings per month for two people: | |
| <i><span data-var="total_figure"></span></i> | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment