<div class="root">
  <div class="content">
      Current status: 
      <span class="status" />
    <h2 class="message">
      You can either disconnect from your connection by turning off your WiFi or by disconnecting your ethernet cable.
      Or you can simulate offline mode by inspecting this page, going into the 'Network' tab, and changing 'No throttling' to 'Offline'.
    <h3 class="see-original-message">
      To see the original message, go back online and refresh the page.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html, body {
  padding: 0;
  margin: 0; 
  font-family: 'Open Sans', sans-serif;

.root {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;

.content {
  max-width: 800px;
  text-align: center;

.see-original-message {
  display: none;
const root = document.querySelector('.root');
const message = document.querySelector('.message');
const status = document.querySelector('.status');
const seeOriginalMessage = document.querySelector('.see-original-message');
const onlineState = window.navigator.onLine;

status.innerHTML = onlineState ? 'online' : 'offline';

window.addEventListener('online', () => {
  status.innerHTML = 'online'
  root.style.backgroundColor = '#10451d';
  message.innerHTML = 'You are back online :D ';

window.addEventListener('offline', () => {
  status.innerHTML = 'offline'
  root.style.backgroundColor = '#8d0801';
  root.style.color = '#ffffff';
  message.innerHTML = 'You went offline :( ';
  seeOriginalMessage.style.display = 'block';
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.