Detect Network Status

This program demonstrates how to detect and display the network status.

DetectNetworkStatus.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
	</head>
	<body>
		<h1 id="idStatus"></h1>
		<div id="idChange"></div>
		<p>To test, Press F12 to open the developer tools, select <q>Network</q>, and select <q>Offline</q> for Network Throttling.</p>
		<script type="text/javascript">
			const kqStatusElement = document.getElementById('idStatus');
			
			const Update = (bOnline) => {
				kqStatusElement.textContent = (bOnline ? 'Online' : 'Offline');
				kqStatusElement.style.color = (bOnline ? 'green' : 'red');
			}
			window.addEventListener('online', () => Update(true));
			window.addEventListener('offline', () => Update(false));
			
			Update(navigator.onLine);
		</script>
	</body>
</html>

Core JavaScript

Detect Network Status

DetectNetworkStatus.html

Output