Coverage HTML+CSS+JS

Coverage HTML+CSS+JS.markdown

Coverage 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>
</div>

script.js

//num = 0 | 1 | 2 | 3 | 4
//if num > 4, num = 4
//if num < 0, num = 0
function changeCoverage(idWrapper, num){
	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");
	}
}
//cambiamos la cobertura a 2 para probar
changeCoverage("lope-wrapper", 2);

style.css

.lope-coverage{
	width: 20px;
	height: 18px;
	font-size: 1px;
}
.lope-coverage span{
	margin: 2%;
	border: 1px solid #898888;
	width: 10%;
	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-coverage-on{
	background-color: #898888;
	border: 1px solid #898888 !important;
}