Build a HTML5 Laptop Battery Usage Indicator in Browser Using Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Battery Level</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
   
    <link rel="stylesheet" href="../assets/css/Battery_Level.css">
  </head>
  <body>
      <section class="sec">
          <div class="toggle"></div>
          <div class="box">
              <div class="content">
                  <h3>Battery</h3>
                  <div class="batteryShape">
                      <div class="level">
                          <div class="percentage"></div>
                      </div>
                  </div>
                  <div class="percent">50%</div>
              </div>
          </div>
      </section>

      <script src="../assets/js/Battery_Level.js"></script>
</html>

 

 

 

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}
section
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #d5ecc2;
}
section.dark{
    background: #0c0c0f;
}
section::before
{
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background: linear-gradient(#79764f, #eed5f1);
    border-radius: 50%;
    transform: translate(-150px,-100px);
}
section.dark::before{
    background: linear-gradient(#424d570e,#523686);
}
section::after
{
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    background: linear-gradient(#417736, rgba(128, 114, 119, 0.2));
    border-radius: 50%;
    transform: translate(150px,150px);
}
section.dark::after{
    background: linear-gradient(#0f2358,#939751);
}

.box{
    position: relative;
    width: 240px;
    height: 300px;
    background: rgba(255,255,255,0.1);
    z-index: 1;
    box-shadow: 0 25px 45px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(25px);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.box h3{
    color: #2c6ab1;
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 1px;
}
section.dark .box h3
{
   color: rgb(255, 255, 255);

}
.batteryShape{
   position: relative;
   width: 140px;
   height: 65px;
   margin: 20px 0;
   border: 3px solid #333;
   border-radius: 10px; 

}
section.dark .batteryShape
{
    border: 3px solid #fff;
}
.batteryShape::before{
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    transform:  translateY(-50%);
    width: 7px;
    height: 16px;
    background: #333;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;

}
section.dark .batteryShape::before{
  background: rgb(255, 255, 255);
}
.batteryShape::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background: rgba(255,255,255,0.25);
}
.level{
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 4px;
    overflow: hidden;
}
.percentage
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg,#9c28af,#fd2c72);

}
section.dark .percentage
{
    background: linear-gradient(90deg,#309657,#0026ff);
}
.percent{
    color: #6b9b2c;
    font-size: 2em;
    font-weight: 700;
}
section.dark .percent
{
    color: #fff;
}
.toggle{
    position: absolute;
    top: 20px;
    right: 20px;
    background: #161623;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dark .toggle{
    background: #fff;
}
.toggle::before{
    content: '\f186';
    font-family: fontAwesome;
    color: #fff;
}
.dark .toggle::before{
    content: '\f185';
    color: #161623;
}

 

 

let p1 = document.querySelector('.percentage');
let p2 = document.querySelector('.percent');
navigator.getBattery().then(function(battery){
   p1.style.width = battery.level * 100 + '%';
   p2.innerHTML = battery.level * 100 + '%';

})

let a = document.querySelector('.sec');
let t = document.querySelector('.toggle');
t.onclick = function(){
   a.classList.toggle('dark');
}

Leave a Reply