<header>
    <h2 class="title">console.warn() Метод</h2>
    <p class="description">Цей приклад використовує метод console.warn() для виведення предупреждення, якщо ім'я користувача коротше за 5 символів.</p>
</header>
<main>
    <div class="result">
        <label for="nameInput">Введіть своє ім'я:</label>
        <input type="text" id="nameInput">
        <button onclick="checkNameLength()">Перевірити</button>
    </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);
}

function checkNameLength() {
    const nameInput = document.getElementById("nameInput");
    const name = nameInput.value;
    
    if (name.length < 5) {
        console.warn("Увага! Ім'я занадто коротке. Будь ласка, введіть більше символів.");
    } else {
        console.log(`Привіт, ${name}!`);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.