"Download Speed Calculator"
Bootstrap 4.1.1 Snippet by harunpehlivan

<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(); })();

Related: See More


Questions / Comments: