CDN Bandwidth Cost Calculator

by Soviut

HTML

<div class="field">
    <label>Scenes Per Campaign</label>
    <input type="text" name="scenes" value="10" />
</div>
    
<div class="field">
    <label>MB Per Scene</label>
    <input type="text" name="sceneMegabytes" value="15" />
</div>

<div class="field">
    <label>MB Per Campaign</label>
    <input type="text" name="campaignMegabytes" value="0" disabled />
</div>

<div class="field">
    <label>Users Per Campaign</label>
    <input type="text" name="users" value="50000" />
</div>

<div class="field">
    <label>GB Delivered</label>
    <input type="text" name="deliveredGigabytes" value="0" disabled />
</div>

<div class="field">
    <label>Cents Per GB</label>
    <input type="text" name="centsPerGigabyte" value="5" />
</div>

<div class="field">
    <label>Dollars Cost</label>
    <input type="text" name="totalDollars" value="0" disabled />
</div>

<div class="actions">
    <button type="button" id="recalculate">Recalculate</button>
</div>

CSS

body {
    font-family: arial, helvetica, san-serif;
}

.field {
    padding: 5px;
}

.actions {
    padding: 5px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type=text] {
    padding: 5px;
    border: solid 1px #CCC;
    border-radius: 2px;
}

button {
    padding: 10px;
    border: 0;
    border-radius: 2px;
    background: cornflowerblue;
    color: white;
    cursor: pointer;
}

button:hover {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}

JavaScript

var MB = 1024 * 1024;
var GB = 1024 * 1024 * 1024;

function calculateCost() {
    var scenes = parseInt($('input[name=scenes]').val(), 10);
    var sceneBytes = parseInt($('input[name=sceneMegabytes]').val(), 10) * MB;
    var campaignBytes = sceneBytes * scenes;
    $('input[name=campaignMegabytes]').val(Math.ceil(campaignBytes / MB));
    var users = parseInt($('input[name=users]').val(), 10);
    var deliveredBytes = campaignBytes * users;
    $('input[name=deliveredGigabytes]').val(deliveredBytes / GB);
    var campaignGigabytes = Math.ceil(deliveredBytes / GB);
    var centsPerGigabyte = parseInt($('input[name=centsPerGigabyte]').val(), 10);
    var totalCents = Math.ceil(campaignGigabytes * centsPerGigabyte);
    var totalDollars = Math.ceil(totalCents / 100);
    $('input[name=totalDollars]').val(totalDollars);
}

$(function() {
    $('input').on('keyup change', calculateCost);
    $('#recalculate').on('click', calculateCost);
});

calculateCost();