<header>
  <h2 class="title">Focus Events</h2>
  <p class="description">Відстежує, коли елемент отримує або втрачає фокус для інтерфейсної взаємодії.</p>
</header>
<main>
  <div class="result">
    <form id="sample-form">
      <!-- Поля форми для взаємодії -->
      <label>
        Ім'я:
        <input type="text" class="form-field" id="name-input" placeholder="Введіть ваше ім'я">
      </label>
      <br>
      <label>
        Email:
        <input type="email" class="form-field" id="email-input" placeholder="Введіть вашу електронну пошту">
      </label>
      <br>
      <label>
        Телефон:
        <input type="tel" class="form-field" id="phone-input" placeholder="Введіть ваш номер телефону">
      </label>
      <br>
      <button type="button" id="reset-button">Скинути</button>
    </form>
  </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  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;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.form-field {
  display: block;
  margin: 10px 0;
  padding: 8px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-field:focus {
  border-color: #4a90e2;
  outline: none;
}

.warning {
  border-color: red;
}
document.addEventListener('DOMContentLoaded', () => {
  const formFields = document.querySelectorAll('.form-field');
  const resetButton = document.getElementById('reset-button');

  // Обробка фокусу для виділення активного поля
  formFields.forEach(field => {
    field.addEventListener('focus', (event) => {
      event.target.style.backgroundColor = '#e6f7ff'; // Зміна фону на світло-блакитний
    });

    // Обробка події blur для перевірки заповнення полів
    field.addEventListener('blur', (event) => {
      event.target.style.backgroundColor = ''; // Повернення фону
      if (!event.target.value.trim()) {
        event.target.classList.add('warning'); // Виділення червоним, якщо порожнє
        alert(`Поле "${event.target.placeholder}" не може бути порожнім!`);
      } else {
        event.target.classList.remove('warning'); // Видалення попередження, якщо заповнене
      }
    });
  });

  // Скидання полів і стилів при натисканні кнопки "Скинути"
  resetButton.addEventListener('click', () => {
    formFields.forEach(field => {
      field.value = ''; // Очистити значення
      field.classList.remove('warning'); // Видалити червону рамку
      field.style.backgroundColor = ''; // Відновити фоновий колір
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.