"Download Speed Calculator"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
}, {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard
Bootstrap Loan Calculator

Questions / Comments: