Skip to content

Instantly share code, notes, and snippets.

@benfrain
Created Jan 6, 2014
Embed
What would you like to do?
Cost of 1KB calculator
#dataSaver {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Droid Sans", Verdana, Arial, "Lucida Grande", sans-serif;
color: #333;
font-size: .85rem;
}
#dataSaver hr {
border: 1px solid #ccc;
margin: 1rem 0;
display: block;
}
#dataSaver input {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Droid Sans", Verdana, Arial, "Lucida Grande", sans-serif;
border-radius: 3px;
padding: .2rem;
border: 1px solid grey;
font-size: 1.2rem;
color: #444;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="cost.js"></script>
<meta charset=utf-8 />
<title>Data Savings</title>
</head>
<body id="dataSaver">
<h1>Enter your data</h1>
<p>Avoid using decimals or units when you input values</p>
<label>Yearly server costs<input type="text" id="serverCost" placeholder="server costs in $ or £"/></label>
<br />
<label>Yearly data amount served in GB <input type="text" id="dataServed" placeholder="GB of data served per year"/></label>
<br />
<label>Data Saved in KB<input id="dataSaved" type="number" placeholder="data savings in KB" /></label>
<br />
<label>Users per day<input id="usersPerDay" type="number" placeholder="users"/></label>
<hr />
<h1>Data savings</h1>
<p class="js-data-saved-day">Data saved per day: <b>0</b></p>
<p class="js-data-saved-week">Data saved per week: <b>0</b></p>
<p class="js-data-saved-month">Data saved per month: <b>0</b></p>
<div class="js-data-saved-year">Data saved per year:
<div id="rKB">0</div>
<div id="rMB">0</div>
<div id="rGB">0</div>
<div id="rTB">0</div>
</div>
<hr />
<h1>Your costs saving</h1>
<p class="js-costs-1kb">To serve 1KB costs you: <b>0</b></p>
<p class="js-costs-per-day">Your data economy saves this much per day: <b>0</b></p>
<p class="js-costs-per-week">Your data economy saves this much per week: <b>0</b></p>
<p class="js-costs-per-month">Your data economy saves this much per month: <b>0</b></p>
<p class="js-costs-per-year">Your data economy saves this much per year: <b>0</b></p>
</body>
</html>
;(function dataSaved() {
// Input variables
var dataInput = $('#dataSaved');
var usersPerDay = $('#usersPerDay');
var serverCost = $('#serverCost');
var dataServed = $('#dataServed');
// Data saving variables
var dataSavedDay = $('.js-data-saved-day b');
var dataSavedWeek = $('.js-data-saved-week b');
var dataSavedMonth = $('.js-data-saved-month b');
var dataSavedYearKB = $('.js-data-saved-year #rKB');
var dataSavedYearMB = $('.js-data-saved-year #rMB');
var dataSavedYearGB = $('.js-data-saved-year #rGB');
var dataSavedYearTB = $('.js-data-saved-year #rTB');
// Cost saving variables
var costs1kb = $('.js-costs-1kb b');
var costsDay = $('.js-costs-per-day b');
var costsWeek = $('.js-costs-per-week b');
var costsMonth = $('.js-costs-per-month b');
var costsYear = $('.js-costs-per-year b');
$(dataInput).add(usersPerDay).change( function() {
// Values in the inputs
var dataInputVal = dataInput.val();
var usersPerDayVal = usersPerDay.val();
var serverCostVal = serverCost.val();
var dataServedVal = dataServed.val();
var newValue = (dataInputVal * usersPerDayVal);
var KB = (newValue * 365.25).toFixed(2);
var MB = ((newValue * 365.25) / 1024).toFixed(2);
var GB = (((newValue * 365.25) / 1024) / 1024).toFixed(4);
var TB = ((((newValue * 365.25) / 1024) / 1024) / 1024).toFixed(4);
dataSavedDay.html(newValue + ' KB');
dataSavedWeek.html(newValue * 7 + ' KB');
dataSavedMonth.html(newValue * 30.416666667 + ' KB');
// Specfics
dataSavedYearKB.html(KB + ' KB');
dataSavedYearMB.html(MB + ' MB');
dataSavedYearGB.html(GB + ' GB');
dataSavedYearTB.html(TB + ' TB');
// Calculations for cost
var cost1kbVal = (((serverCostVal / dataServedVal) / 1024) / 1024);
costs1kb.html(cost1kbVal);
costsDay.html( ( (cost1kbVal * KB) / 365.25) );
costsWeek.html( ( (cost1kbVal * KB) / 52) );
costsMonth.html( ( (cost1kbVal * KB) / 12) );
costsYear.html(cost1kbVal * KB);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment