<header>
  <h2 class="title">HTML Events: fullscreenchange</h2>
  <p class="description">Ця подія виникає, коли елемент входить або виходить з повноекранного режиму.</p>
</header>
<main>
  <div class="result">
    <!-- Кнопка для входу в повноекранний режим -->
    <button id="fullscreenButton">Перейти в повноекранний режим</button>
    
    <!-- Елемент, який стане повноекранним -->
    <div id="fullscreenElement" class="fullscreen-box">
      <p>Цей блок буде показано у повноекранному режимі.</p>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.fullscreen-box {
  width: 300px;
  height: 200px;
  background-color: #ddd;
  padding: 20px;
  text-align: center;
  border: 2px solid #333;
  transition: width 0.3s ease, height 0.3s ease;
}

.fullscreen-box.fullscreen-mode {
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #fff;
}

// Елементи з DOM
const fullscreenButton = document.getElementById('fullscreenButton');
const fullscreenElement = document.getElementById('fullscreenElement');

// Обробник події для входу/виходу в повноекранний режим
fullscreenButton.addEventListener('click', function() {
  if (!document.fullscreenElement) {
    fullscreenElement.requestFullscreen()
      .catch(err => console.error(`Помилка входу в повноекранний режим: ${err}`));
  } else {
    document.exitFullscreen()
      .catch(err => console.error(`Помилка виходу з повноекранного режиму: ${err}`));
  }
});

// Відслідковування події fullscreenchange
document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    fullscreenElement.classList.add('fullscreen-mode');
    fullscreenButton.textContent = 'Вийти з повноекранного режиму';
  } else {
    fullscreenElement.classList.remove('fullscreen-mode');
    fullscreenButton.textContent = 'Перейти в повноекранний режим';
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.