me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added updateDOM function

Browse source
This commit is contained in:
z0ccc 2021-06-06 14:41:31 -04:00
parent dfd8398285
commit 4a056a5ca8
1 changed files with 24 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/App.jsx
View file

@ -2,51 +2,47 @@ import * as React from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import './App.css'; import './App.css';
const updateDOM = (id, text) => {
document.getElementById(id).innerHTML += text;
};
const App = () => { const App = () => {
useEffect(() => { useEffect(() => {
// Make the request
fetch('http://ip-api.com/json') fetch('http://ip-api.com/json')
.then((response) => response.json()) .then((response) => response.json())
// Do something with the JSON data
.then((data) => { .then((data) => {
console.log(data.query); updateDOM('ipAddress', data.query);
document.getElementById( updateDOM('country', data.country);
'ipAddress' updateDOM('region', data.regionName);
).innerHTML += `IP address: ${data.query}`; updateDOM('city', data.city);
updateDOM('provider', data.isp);
}); });
document.getElementById( updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
'screenSize'
).innerHTML += `Screen resolution: ${window.screen.width}x${window.screen.height}`;
navigator.getBattery().then((battery) => { navigator.getBattery().then((battery) => {
document.getElementById( updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
'batteryLevel' updateDOM('batteryStatus', `${(battery.charging) ? '' : 'not '} charging`);
).innerHTML += `Battery level: ${Math.round(battery.level * 100)}%`;
document.getElementById(
'batteryStatus'
).innerHTML += `Battery status: ${(battery.charging) ? '' : 'not '} charging`;
}); });
document.getElementById( updateDOM('memory', `${navigator.deviceMemory}GB`);
'memory' updateDOM('cores', navigator.hardwareConcurrency);
).innerHTML += `Device memory: ${navigator.deviceMemory}GB`;
document.getElementById(
'cores'
).innerHTML += `# of CPU cores: ${navigator.hardwareConcurrency}`;
}, []); }, []);
return ( return (
<div className="App"> <div className="App">
<div className="title">Connection</div> <div className="title">Connection</div>
<div className="item" id="ipAddress" /> <div className="item" id="ipAddress">IP address: </div>
<div className="item" id="country">Country: </div>
<div className="item" id="region">Region: </div>
<div className="item" id="city">City: </div>
<div className="item" id="provider">Provider: </div>
<div className="title">Hardware</div> <div className="title">Hardware</div>
<div className="item" id="screenSize" /> <div className="item" id="screenSize">Screen resolution: </div>
<div className="item" id="batteryLevel" /> <div className="item" id="batteryLevel">Battery level: </div>
<div className="item" id="batteryStatus" /> <div className="item" id="batteryStatus">Battery status: </div>
<div className="item" id="memory" /> <div className="item" id="memory">Device memory: </div>
<div className="item" id="cores" /> <div className="item" id="cores"># of CPU cores: </div>
</div> </div>
); );
}; };