JavaScript web yazılım dilleri arasında çok önemli bir yer arz etmektedir. Özellikle dinamik websiteleri oluşturmak isteyen kullanıcıların göz bebeği olan JavaScript, daha bu örnek gibi bir çok örneğin altyapısı olmaktadır.
Küçük bir JavaScript betiği ile pil/batarya durumunuzun nasıl kontrol edileceğini bu makalede anlattık.
İçindekiler
Hazırladığımız betiğin özellikleri nelerdir?
Hazırladığımız bu betiğin front-end dahil olmak üzere bir çok güzel özelliği bulunmaktadır. Kodları inceleyerek fikir alabilir ve daha sonrasında betiği projenize dahil edebilirsiniz. İşte bir kaç özellik;
- Pil doluluk yüzdesi ile doğru orantıda çalışan pil doluluk göstergesi
- Pil yüzdesi
- Pil yüzdesine göre renk değişimleri
- Şarj durumunun kontrolü ve bunun front-end yansıtılması
Sizler için tüm kodları Github hesabımızdan yayınladık. Ayrıca sizler için bir demo adreside hazırladık. Makaleyi okumaya devam ederek daha fazla bilgi sahibi olabilirsiniz.
Kaynak kodu ve demo adresi
Dilerseniz aşağıda verecek olduğum kodları direk kullanabilirsiniz. Kolaylık açısından Github kaynak paketini zip şeklinde indirip kaynak kodlarına bu şekilde erişebilirsiniz.
Kaynak Kodları
Tüm kaynak kodlarına aşağıdaki betikler aracılığıyla erişebilir, kodları dilediğiniz gibi kullanabilirsiniz.
index.html
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Sibersozluk - Battery Status</title>
</head>
<body>
<section class="wrapper">
<h2 class="battery--title">Battery</h2>
<div class="battery--shape">
<div class="battery--level"></div>
</div>
<div class="battery--percent">Battery: 80%</div>
<div class="battery--charging"></div>
</section>
<script src="script.js"></script>
</body>
</html>Code language: HTML, XML (xml)style.css
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
:root {
--green: #52ec75;
--light-green: #7DAF42;
--light-red: #BDA13B;
--red: #c82828;
--border: #4a4545;
--white: #fff;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
font-family: 'Mulish', sans-serif;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.battery--title {
position: relative;
font-size: 3em;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--border);
text-shadow: 2px 4px rgba(0,0,0,.2), 1px -2px rgba(0,0,0,.6);
}
.battery--title::before {
content: '';
position: absolute;
background-color: var(--green);
width: 100%;
height: 100%;
z-index: -1;
border-radius: .5rem;
opacity: .6;
transform: scale(1.2, 1.1) skewX(-15deg)
}
.battery--shape {
position: relative;
width: 20rem;
height: 8rem;
border: 3px solid var(--border);
border-radius: 15px;
}
.battery--shape::after {
content: '';
position: absolute;
width: .8rem;
height: 2.5rem;
top: 50%;
right: -1.3rem;
transform: translateY(-50%);
background-color: var(--border);
border-top-right-radius: .4rem;
border-bottom-right-radius: .4rem;
}
.battery--level {
position: absolute;
max-width: 97%;
top: .3rem;
right: .3rem;
bottom: .3rem;
left: .3rem;
border-radius: .6rem;
background-color: var(--green);
overflow: hidden;
}
.battery--percent {
margin-top: 1rem;
font-size: 3em;
font-weight: 600;
color: var(--border);
text-shadow: 2px 4px rgba(0, 255, 0, 0.2), 1px -2px rgba(0,0,0,.6);
}
.battery--charging {
font-size: 1.3em;
margin-top: 1rem;
font-weight: 600;
background-color: var(--red);
color: var(--white);
padding: .5rem 1rem;
border-radius: 3em;
line-height: 2.6em;
}Code language: CSS (css)script.js
'use script';
let batteryLevelDisplay = document.querySelector('.battery--level');
let batteryPercent = document.querySelector('.battery--percent');
let batteryCharging = document.querySelector('.battery--charging');
function battery() {
navigator.getBattery().then(function (battery) {
let batteryLevel = battery.level * 100;
batteryCharging.textContent = (battery.charging) ? 'Battery is charging' : 'Battery isn\'t charging';
batteryCharging.style.backgroundColor = (battery.charging) ? 'var(--green)' : 'var(--red)';
batteryLevelDisplay.style.width = batteryLevel + '%';
batteryPercent.textContent = batteryLevel + '%';
if (batteryLevel > 80) {
batteryLevelDisplay.style.backgroundColor = `var(--green)`;
batteryPercent.style.color = `var(--green)`;
} else if (batteryLevel > 60 && batteryLevel <= 80) {
batteryLevelDisplay.style.backgroundColor = `var(--light-green)`;
batteryPercent.style.color = `var(--light-green)`;
} else if (batteryLevel > 40 && batteryLevel <= 60) {
batteryLevelDisplay.style.backgroundColor = `var(--light-red)`;
batteryPercent.style.color = `var(--light-red)`;
} else {
batteryLevelDisplay.style.backgroundColor = `var(--red)`;
batteryPercent.style.color = `var(--red)`;
}
});
}
battery();
setInterval(battery,1000);Code language: JavaScript (javascript)Demo adresi
Github page sayesinde yayınlamış olduğumuz demo adresine bu bağlantı yardımıyla erişebilirsiniz.
Bu makalenin aklınızda oluşan tüm soru işaretlerine cevap olabileceğini düşünüyoruz. Aklınıza takılan soru işaretlerini yorumlar kısmından iletebilir, makaleyi beğendiyseniz sosyal medya hesaplarınızdan paylaşabilirsiniz.
