<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> відсутнє в масиві.`;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.