HTML Battery Charge Icon
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.battery__container {
position: relative;
width: 150px;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.battery__cover {
border: 10px solid black;
height: 200px;
width: 150px;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.battery__top-pin {
width: 63px;
height: 30px;
border: 10px solid black;
background-color: black;
position: absolute;
top: -25px;
left: 30%;
}
.battery__bars {
height: 32px;
background-color: black;
margin: 10px;
margin-top: 0;
}
.hide {
display: none;
}
.btn {
padding: 15px;
border: none;
border-radius: 10px;
margin-top: 15px;
}
.btn:hover {
background-color: darkgrey;
color: white;
}
</style>
</head>
<body>
<div>
<div>
<div class="battery__container">
<div class="battery__cover">
<div class="battery__bars battery__bar-4 hide"></div>
<div class="battery__bars battery__bar-3 hide"></div>
<div class="battery__bars battery__bar-2 hide"></div>
<div class="battery__bars battery__bar-1"></div>
</div>
<div class="battery__top-pin"></div>
</div>
</div>
<div>
<button class="btn" id="btn-batteryfull">Battery Full</button>
<button class="btn" id="btn-batterycharge">Charge Battery</button>
</div>
</div>
<script>
let batteryBars = [];
batteryBars.push(document.querySelector(".battery__bar-1"));
batteryBars.push(document.querySelector(".battery__bar-2"));
batteryBars.push(document.querySelector(".battery__bar-3"));
batteryBars.push(document.querySelector(".battery__bar-4"));
let batteryCharge = document.querySelector("#btn-batterycharge");
let batteryFull = document.querySelector("#btn-batteryfull");
batteryFull.addEventListener('click', () => {
batteryBars.forEach(bar => {
bar.classList.remove('hide');
})
});
let batteryChargingInterval;
let charging = false;
function batterCharge() {
let current = 0;
charging = true;
clearInterval(batteryChargingInterval);
batteryBars.forEach(bar => {
bar.classList.add('hide');
})
batteryChargingInterval = setInterval(() => {
if (current < (batteryBars.length - 1)) {
current += 1;
} else {
batteryBars.forEach(bar => {
bar.classList.add('hide');
})
current = 0;
}
batteryBars[current].classList.remove('hide');
}, 1000);
}
batteryCharge.addEventListener('click', (e) => {
if (charging) {
e.target.innerText = 'Charge Battery';
charging = false;
clearInterval(batteryChargingInterval);
} else {
e.target.innerText = 'Stop Charge';
batterCharge();
}
});
</script>
</body>
</html>
See the Pen HTML Batter Icon by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment