<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="controls">
<h1>Download Speed Calculator</h1>
<label for="fsize">File size:</label>
<input type="text" id="fsize" placeholder="File size..." value="1">
<input id="kB" type="radio" name="unit" value="1"><label for="kB">kB</label>
<input id="MB" type="radio" name="unit" value="1000" checked><label for="MB">MB</label>
<input id="GB" type="radio" name="unit" value="1000000"><label for="GB">GB</label>
</div>
<div id="output">
<table id="ttop">
<tbody>
<tr>
<td class="th">Connection Type</td>
<td class="th">Speed</td>
<td class="th">Download Time</td>
</tr>
</tbody>
</table>
<div id="gen"></div>
<table>
<tbody>
<tr style="background: #f0f0f0">
<td><label for="fsize">Custom</label></td>
<td><input type="text" id="csize" placeholder="Speed..."><select id="crate"><option value="1">kbit/s</option><option value="1000" selected>Mbit/s</option><option value="1000000">Gbit/s</option></select></td>
<td id="cout"></td>
</tr>
</tbody>
</table>
</div>
* {
font-family: sans-serif;
transition: all 500ms;
}
#controls {
width: 522px;
padding: 2px 2px 20px 20px;
background: #53777A;
color: #fff;
text-align: center;
}
#output {
margin: 0;
border: 2px solid #53777A;
padding: 20px;
display: inline-block;
}
#fsize {
padding: 8px 6px;
width: 100px;
border: 1px solid #dadada;
}
#crate,
#csize {
border: 1px solid #dadada;
padding: 2px;
}
#csize {
padding: 3px 2px;
width: 50px;
}
#crate {
width: 70px;
}
#ttop {
border-bottom: 2px solid #53777A;
margin-bottom: 6px;
}
#tbot {
border-top: 2px solid #53777A;
margin-top: 6px;
}
table {
width: 500px;
border-spacing: 0;
border-collapse: collapse;
margin: 0;
}
.th {
font-weight: bold;
line-height: 26px;
padding-top: 0;
}
td {
width: 120px;
padding: 6px;
}
tr td:first-child {
width: 180px;
}
tr td:last-child {
text-align: right;
padding-right: 20px;
width: 120px;
}
tr:nth-child(even) {
background: #f0f0f0
}
tr:nth-child(odd) {
background: #fff
}
#crate:hover,
#csize:hover {
border: 1px solid #53777A;
}
input[type="radio"] {
margin-left: 6px;
}
label {
padding: 8px 8px 8px 2px;
}
var dlc = (function() {
var FSIZE = getSize();
var CSIZE = getCustomSize();
var network_types = [{
id: 6,
name: "3G",
kbps: 4000,
units: 1
}, {
id: 7,
name: "4G",
kbps: 8000,
units: 1
}, {
id: 9,
name: "LTE",
kbps: 20000,
units: 1
}, {
id: 11,
name: "Public Wi-Fi",
kbps: 4000,
units: 1
}, {
id: 1,
name: "Dialup Modem",
kbps: 28.8,
units: 0
}, {
id: 2,
name: "Dialup Modem",
kbps: 56.6,
units: 0
}, {
id: 3,
name: "ADSL Modem",
kbps: 256,
units: 0
}, {
id: 4,
name: "ADSL Modem",
kbps: 512,
units: 0
}, {
id: 5,
name: "ADSL Modem",
kbps: 1000,
units: 1
}, {
id: 8,
name: "ADSL Modem",
kbps: 8000,
units: 1
}, {
id: 10,
name: "ADSL Modem",
kbps: 24000,
units: 1
}, {
id: 12,
name: "Cable Modem",
kbps: 90000,
units: 1
}, {
id: 13,
name: "LAN",
kbps: 10000,
units: 1
}, {
id: 14,
name: "LAN",
kbps: 100000,
units: 1
}, {
id: 15,
name: "Google Fiber",
kbps: 1000000,
units: 2
}];
var unit_labels = ["kbit/s", "Mbit/s", "Gbit/s"];
var unit_calc = [1, 1000, 1000000];
function hRow(conn) {
var fs = FSIZE || 0;
var h = '<tr>';
h += '<td>' + conn.name + '</td>';
h += '<td>' + (conn.kbps / unit_calc[conn.units]) + ' ' + unit_labels[conn.units] + '</td>';
h += '<td>' + calcTime(fs,conn.kbps) + '</td>';
h += '</tr>';
return h;
}
function calcTime(kb,kbps) {
var ret = '--';
if (kb !== 0 && kbps !== 0) {
var totalSec = parseInt(kb / kbps);
var days = parseInt(totalSec / 86400);
var hours = parseInt(totalSec / 3600) % 24;
var minutes = parseInt(totalSec / 60) % 60;
var seconds = parseInt(totalSec % 60);
ret = '';
if (days > 0) {
ret += days + 'd ';
}
if (days > 0 || hours > 0) {
ret += hours + 'h ';
}
if (days > 0 || hours > 0 || minutes > 0) {
ret += minutes + 'm ';
}
ret += seconds + 's ';
}
return ret;
}
function updateTable() {
var h = '<table>';
h += '<tbody></tr>';
for (var i = 0; i < network_types.length; i++) {
h += hRow(network_types[i]);
}
h += '</tbody>';
h += '</table>';
document.getElementById("gen").innerHTML = h;
document.getElementById("cout").innerHTML = calcTime( (FSIZE || 0), (CSIZE || 0) );
}
function getSize() {
var c = parseFloat(document.getElementById("fsize").value) * document.querySelector("input[name=unit]:checked").value * 8;
if (isNaN(c)) {
return 0;
} else {
return c;
}
}
function getCustomSize() {
var e = document.getElementById("crate");
var r = 0;
if (e && e.options[e.selectedIndex]) {
r = parseInt(e.options[e.selectedIndex].value);
}
var s = document.getElementById("csize");
var c = 0;
if (s && s.value) {
c = parseFloat(s.value) * r;
}
if (isNaN(c)) {
return 0;
} else {
return c;
}
}
setInterval(function() {
var check = getSize();
var check_custom = getCustomSize();
if (check_custom !== CSIZE) {
CSIZE = check_custom;
console.log(CSIZE);
updateTable();
}
if (check !== FSIZE) {
FSIZE = check;
updateTable();
}
}, 200);
updateTable();
})();
