Coverage & Data Transmission HTML+CSS+JS

Coverage & Data Transmission HTML+CSS+JS.markdown

Coverage & Data Transmission HTML+CSS+JS

A Pen by Luis Miguel F. on CodePen.

License.

View Demo

index.html

<div id="lope-wrapper" class="lope-coverage">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span class="lope-transmision"></span>
</div>

script.js

//num = 0 | 1 | 2 | 3 | 4
//if num > 4, num = 4
//if num < 0, num = 0
function changeCoverage(idWrapper, num, typeData){
	num = num < 0 ? 0 : num > 4 ? 4 : parseInt(num);
	var wrapper = document.getElementById(idWrapper);
	var spans = wrapper.getElementsByTagName("span");
	for(var k = 0; k < spans.length; k++){
		spans[k].classList.remove("lope-coverage-on");
	}
	for(var k = 0; k < num; k++){
		spans[k].classList.add("lope-coverage-on");
	}
	if(typeData){
		var span = wrapper.getElementsByClassName("lope-transmision")[0];
		if(typeData.toUpperCase() != "WIFI" && typeData.toUpperCase() != "WI-FI" && typeData.toUpperCase() != "WI FI"){
			span.innerHTML = typeData;
		} else {
			var tagWifi = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMlJREFUOI3F0jFPAkEQBeAPN8ZGtFAj0caOxP//J0y0VKAXmiMkh4FC1LPYxchmOSAWvm5m3rw3O7P8NzpZfIoeLtDFceK84w0zTLDIBc7Rx9WexhVGqDu4w31hml1o8HyU1D4PbIYPVAEr8X03B0zR4Al1SIlFSl7uKTDCK4RfyRnOxEu0YYKXdRCyYoVrnGxpnuMxTVsU+MIUt4XaCg/in/hBTloT5zaX2iTnOieXBGBpc6lDjEvEbQLEpXbFEw9aeK0IO0z+jm94Gi08uOmvPgAAAABJRU5ErkJggg=="/>';
			span.innerHTML = tagWifi;
		}
	}
}
//cambiamos la cobertura a 2 para probar
changeCoverage("lope-wrapper", 2, "WIFI");

style.css

.lope-coverage{
	max-width: 40px;
	height: 14px;
	font-size: 1px;
}
.lope-coverage span:not(.lope-transmision){
	margin: 1%;
	border: 1px solid #898888;
	width: 5%;
	height: 87%;
	display: inline-block;
}
.lope-coverage span:nth-child(1){
	height: 22%;
}
.lope-coverage span:nth-child(2){
	height: 44%;
}
.lope-coverage span:nth-child(3){
	height: 67%;
}
.lope-transmision{
	font-size: 800%;
	font-weight: bold;
	font-family: Arial;
	color: #6B6B6B;
	margin-left: 1px;
	vertical-align: top;
}
.lope-transmision img{
	width: 13px;
}

.lope-coverage-on{
	background-color: #898888;
	border: 1px solid #898888 !important;
}