<header>
  <h2 class="title">Конструкція "break"</h2>
  <p class="description">Дозволяє завершити виконання циклу або блоку коду достроково.</p>
</header>
<main>
  <div class="result">
    <!-- Форма для введення числа -->
    <form id="search-form">
      <label for="number-input">Введіть число для пошуку:</label>
      <input type="number" id="number-input" placeholder="Наприклад, 5" required />
      <button type="submit">Знайти</button>
    </form>
    <!-- Відображення результату -->
    <div id="output" style="margin-top: 15px;"></div>
  </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 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
// Масив чисел для пошуку
const numbers = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];

// Знаходимо елементи форми та результату
const form = document.getElementById('search-form');
const input = document.getElementById('number-input');
const output = document.getElementById('output');

// Обробник події для форми
form.addEventListener('submit', function (event) {
  event.preventDefault(); // Забороняємо перезавантаження сторінки
  const targetNumber = parseInt(input.value, 10);
  let found = false;

  // Цикл для пошуку числа
  for (let number of numbers) {
    if (number === targetNumber) {
      found = true;
      output.innerHTML = `Число <strong>${targetNumber}</strong> знайдено в масиві!`;
      break; // Припиняємо цикл після знаходження
    }
  }

  // Якщо число не знайдено
  if (!found) {
    output.innerHTML = `Число <strong>${targetNumber}</strong> відсутнє в масиві.`;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.