비전공자 개발일기

Mobile Battery percentage Check 본문

HTML _CSS

Mobile Battery percentage Check

HiroDaegu 2022. 6. 16. 00:31
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<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>MOBILE BATTERY PERCENTAGE CHECK</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <main>  
    <h1>Your battery Perctenage is</h1>  
    <div class="battry"></div>  
    <p>I am Daily Make new content For You ,hope you like this post</p>  
   </main>  
</body>
</html>
body {  
  margin: 1rem;  
  padding: 2rem;  
  background-color: #eee;  
 }  
 .battry {  
  font-size: 2rem;  
  color: cornflowerblue;  
 }
const BattryLevel = document.querySelector(".battry");  
navigator.getBattery().then(function (battery) {  
 const level = battery.level;  
 const status = level * 100 + "%";  
 BattryLevel.innerHTML = status;  
});
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Sliding Card UI Design  (0) 2022.06.19
Scroll Animation  (0) 2022.06.17
CSS Input Text Field Animation  (0) 2022.06.14
Reavl Text Animation  (0) 2022.06.13
Emoji Animation  (0) 2022.06.12
'HTML _CSS' Related Articles more