---

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Получение данных пользователя</title>
</head>

<body>

    <div class="container">

        <h1>Получение данных пользователя с API</h1>

        <p>Введите ID пользователя от 1 до 10</p>

        <input
            type="number"
            id="userId"
            placeholder="Введите ID пользователя"
            min="1"
            max="10"
        >

        <button id="loadBtn">
            Получить данные пользователя
        </button>

        <div id="result"></div>

    </div>


    <script>

        const button = document.getElementById("loadBtn");
        const result = document.getElementById("result");
        const userIdInput = document.getElementById("userId");

        button.addEventListener("click", getUserData);


        async function getUserData() {

            const userId = userIdInput.value;

            const response = await fetch(
                `https://jsonplaceholder.typicode.com/users/${userId}`
            );

            const user = await response.json();

            result.innerHTML = `
                <div class="user">

                    <h2>Информация о пользователе</h2>

                    <p><b>ID:</b> ${user.id}</p>
                    <p><b>Имя:</b> ${user.name}</p>
                    <p><b>Username:</b> ${user.username}</p>
                    <p><b>Email:</b> ${user.email}</p>
                    <p><b>Телефон:</b> ${user.phone}</p>
                    <p><b>Веб-сайт:</b> ${user.website}</p>
                    <p><b>Компания:</b> ${user.company.name}</p>
                    <p><b>Город:</b> ${user.address.city}</p>

                </div>
            `;
        }

    </script>


    <style>

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;

            font-family: Arial, sans-serif;

            background: white;
        }

        .container {
            width: 550px;

            padding: 40px;

            background: #24152e;

            border: 2px solid black;
            border-radius: 15px;
        }

        h1 {
            margin-top: 0;

            text-align: center;

            color: white;

            font-size: 28px;
        }

        .container > p {
            text-align: center;

            color: #d6c9dd;

            margin-bottom: 25px;
        }

        input {
            width: 100%;

            padding: 14px 16px;
            margin-bottom: 15px;

            background: white;
            color: black;

            border: 2px solid black;
            border-radius: 8px;

            font-size: 16px;

            outline: none;
        }

        input:focus {
            border-color: #8b4bad;
        }

        button {
            width: 100%;

            padding: 14px;

            background: #663283;
            color: white;

            border: 2px solid black;
            border-radius: 8px;

            font-size: 16px;
            font-weight: bold;

            cursor: pointer;
        }

        button:hover {
            background: #7e459d;
        }

        #result {
            margin-top: 25px;
        }

        .user {
            padding: 22px;

            background: white;

            border: 2px solid black;
            border-radius: 10px;
        }

        .user h2 {
            margin-top: 0;

            color: #32153f;
        }

        .user p {
            margin: 10px 0;

            color: #222;
        }

        .user b {
            color: #5c2875;
        }

    </style>

</body>
</html>