IT3 - Opdracht 05 - Battery API

Developer

Size

3,894 Kb

Views

16,192

IT3 - Opdracht 05 - Battery API Previews
IT3 - Opdracht 05 - Battery API HTML Codes
IT3 - Opdracht 05 - Battery API CSS Codes
IT3 - Opdracht 05 - Battery API JS Codes

How do I make an it3 - opdracht 05 - battery api?

What is a it3 - opdracht 05 - battery api? How do you make a it3 - opdracht 05 - battery api? This script and codes were developed by Samuel on 10 November 2022, Thursday.

IT3 - Opdracht 05 - Battery API Previews

IT3 - Opdracht 05 - Battery API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT3 - Opdracht 05 - Battery API</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div id='battery'> <div id='charge-status'></div> </div> <button>Get your battery status</button>
</main> <script src="js/index.js"></script>
</body>
</html>

IT3 - Opdracht 05 - Battery API - Script Codes CSS Codes

/* body */
html, body { height: 100%; overflow: hidden;
}
body { background-color: #fff; color: #000; font-family: "Helvetica Neue", sans-serif; font-size: 62.5%;
}
/* button */
button { background: transparent; border: 4px #000 solid; font-size: 2em; font-weight: 600; letter-spacing: 0.02em; padding: 20px; position: absolute; text-transform: uppercase; z-index: 1;
}
button:focus { outline: 0;
}
@-webkit-keyframes click { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes click { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
/* battery */
#battery { height: 100%; position: absolute; -webkit-transition: all 1s 0.4s; transition: all 1s 0.4s; width: 0; z-index: -1;
}
#battery:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0;
}
#battery #charge-status { display: none; position: absolute;
}
#battery .is-charging #charge-status { display: block;
}
/* colors */
.charge-1:after { width: 1%; background-color: #e01f29;
}
.charge-2:after { width: 2%; background-color: #e01f29;
}
.charge-3:after { width: 3%; background-color: #e01f29;
}
.charge-4:after { width: 4%; background-color: #e01f29;
}
.charge-5:after { width: 5%; background-color: #e01f29;
}
.charge-6:after { width: 6%; background-color: #e01f29;
}
.charge-7:after { width: 7%; background-color: #e01f29;
}
.charge-8:after { width: 8%; background-color: #e01f29;
}
.charge-9:after { width: 9%; background-color: #e01f29;
}
.charge-10:after { width: 10%; background-color: #e01f29;
}
.charge-11:after { width: 11%; background-color: #ffe03b;
}
.charge-12:after { width: 12%; background-color: #ffe03b;
}
.charge-13:after { width: 13%; background-color: #ffe03b;
}
.charge-14:after { width: 14%; background-color: #ffe03b;
}
.charge-15:after { width: 15%; background-color: #ffe03b;
}
.charge-16:after { width: 16%; background-color: #ffe03b;
}
.charge-17:after { width: 17%; background-color: #ffe03b;
}
.charge-18:after { width: 18%; background-color: #ffe03b;
}
.charge-19:after { width: 19%; background-color: #ffe03b;
}
.charge-20:after { width: 20%; background-color: #ffe03b;
}
.charge-21:after { width: 21%; background-color: #ffe03b;
}
.charge-22:after { width: 22%; background-color: #ffe03b;
}
.charge-23:after { width: 23%; background-color: #ffe03b;
}
.charge-24:after { width: 24%; background-color: #ffe03b;
}
.charge-25:after { width: 25%; background-color: #ffe03b;
}
.charge-26:after { width: 26%; background-color: #ffe03b;
}
.charge-27:after { width: 27%; background-color: #ffe03b;
}
.charge-28:after { width: 28%; background-color: #ffe03b;
}
.charge-29:after { width: 29%; background-color: #ffe03b;
}
.charge-30:after { width: 30%; background-color: #ffe03b;
}
.charge-31:after { width: 31%; background-color: #ffe03b;
}
.charge-32:after { width: 32%; background-color: #ffe03b;
}
.charge-33:after { width: 33%; background-color: #ffe03b;
}
.charge-34:after { width: 34%; background-color: #ffe03b;
}
.charge-35:after { width: 35%; background-color: #ffe03b;
}
.charge-36:after { width: 36%; background-color: #ffe03b;
}
.charge-37:after { width: 37%; background-color: #ffe03b;
}
.charge-38:after { width: 38%; background-color: #ffe03b;
}
.charge-39:after { width: 39%; background-color: #ffe03b;
}
.charge-40:after { width: 40%; background-color: #ffe03b;
}
.charge-41:after { width: 41%; background-color: #ffe03b;
}
.charge-42:after { width: 42%; background-color: #ffe03b;
}
.charge-43:after { width: 43%; background-color: #ffe03b;
}
.charge-44:after { width: 44%; background-color: #ffe03b;
}
.charge-45:after { width: 45%; background-color: #ffe03b;
}
.charge-46:after { width: 46%; background-color: #ffe03b;
}
.charge-47:after { width: 47%; background-color: #ffe03b;
}
.charge-48:after { width: 48%; background-color: #ffe03b;
}
.charge-49:after { width: 49%; background-color: #ffe03b;
}
.charge-50:after { width: 50%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-51:after { width: 51%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-52:after { width: 52%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-53:after { width: 53%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-54:after { width: 54%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-55:after { width: 55%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-56:after { width: 56%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-57:after { width: 57%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-58:after { width: 58%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-59:after { width: 59%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-60:after { width: 60%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-61:after { width: 61%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-62:after { width: 62%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-63:after { width: 63%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-64:after { width: 64%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-65:after { width: 65%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-66:after { width: 66%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-67:after { width: 67%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-68:after { width: 68%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-69:after { width: 69%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-70:after { width: 70%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-71:after { width: 71%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-72:after { width: 72%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-73:after { width: 73%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-74:after { width: 74%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-75:after { width: 75%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-76:after { width: 76%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-77:after { width: 77%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-78:after { width: 78%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-79:after { width: 79%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-80:after { width: 80%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-81:after { width: 81%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-82:after { width: 82%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-83:after { width: 83%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-84:after { width: 84%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-85:after { width: 85%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-86:after { width: 86%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-87:after { width: 87%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-88:after { width: 88%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-89:after { width: 89%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-90:after { width: 90%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-91:after { width: 91%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-92:after { width: 92%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-93:after { width: 93%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-94:after { width: 94%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-95:after { width: 95%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-96:after { width: 96%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-97:after { width: 97%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-98:after { width: 98%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-99:after { width: 99%; background-color: #ffe03b; background-color: #63edb6;
}
.charge-100:after { width: 100%; background-color: #ffe03b; background-color: #63edb6;
}

IT3 - Opdracht 05 - Battery API - Script Codes JS Codes

function main() { var button = document.getElementsByTagName('button')[0]; function controlHeight() { var buttonControl = window.getComputedStyle(button); var buttonHeight = buttonControl.height; var buttonWidth = buttonControl.width; var resButtonHeight = buttonHeight.substr(0, 2); var resButtonWidth = buttonWidth.substr(0, 3); button.style.top = (window.innerHeight - resButtonHeight) / 2 + 'px'; button.style.left = (window.innerWidth - resButtonWidth) / 2 + 'px'; } controlHeight(); window.onresize = function() { controlHeight(); } button.onclick = function() { this.style.animation = 'click .4s'; var batteryStatus = document.getElementById('battery'); batteryStatus.style.width = '100%'; var battery = function() { 'use strict'; var self = this; this._elements = {}; this._elements.battery = void(0); this._elements.percentage = void(0); this._level = 0; this._charging = false; this._update = function _update(data) { this._level = Math.floor(data.level * 100); this._isCharging = data.charging; this._elements.battery.className = 'charge-' + this._level; if (this._isCharging) { this._elements.battery.classList.add('is-charging'); } }; this._init = function _init() { this._elements.battery = document.getElementById('battery'); navigator.getBattery().then(function(battery) { battery.addEventListener('chargingchange', function(e) { self._update(battery); }); battery.addEventListener('levelchange', function(e) { self._update(battery); }); self._update(battery); }); }; this._init(); return {}; }; var myBattery = new battery(); }
}
window.onload = function() { main();
}

Home Page	Home
Developer	Samuel
Username	SamuelVDP
Uploaded	November 10, 2022
Rating	3
Size	3,894 Kb
Views	16,192

Do you need developer help for IT3 - Opdracht 05 - Battery API?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Samuel (SamuelVDP) Script Codes

Name	Size
CMT3 - Herhalingsoefening 03	2,197 Kb
CMT3 - Herhalingsoefening 02	2,246 Kb
IT3 - Opdracht 04 - Responsive Weekplanner	3,898 Kb
CMT3 - Herhalingsoefening 01	2,366 Kb
IT3 - Opdracht 03 - FreshCotton	2,754 Kb
IT3 - Opdracht 09 - RellaxJS	4,331 Kb
CMT3 - Opdracht 02 - OBEY	5,499 Kb
CMT3 - Opdracht 06 - Isotope	3,686 Kb
IT2 - Record Player	2,907 Kb
IT2 - Vault	2,673 Kb

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Wikipedia Viewer	Thomasvaeth	2,549 Kb
A Pen by Huan Nghiem	Nightshade	10,646 Kb
Progressively reveal dots on a Bezier curve	GreenSock	2,489 Kb
Mini Profile	Frytyler	3,828 Kb
SVG Scalable Text	Said_FD	1,451 Kb
A cube	KyleDavidE	18,627 Kb
Simple animated hover effect	Pobee-norris	3,044 Kb
CSS3 Form	Tusharbandal	1,836 Kb
03 - CSS Variables	Run-time	2,682 Kb
Tile Animation Thing	Frxnz	4,332 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!