---

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика</title>
</head>

<body>

    <h1>Данные пользователя</h1>

    <button id="createpromise">
        Получить данные
    </button>

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


    <script>

        document
            .getElementById("createpromise")
            .addEventListener("click", () => {
                getServerUserData();
            });


        async function getServerUserData() {

            try {

                const response = await fetch(
                    "https://jsonplaceholder.typicode.com/users/1"
                );

                if (!response.ok) {
                    throw new Error(response.status);
                }

                const user = await response.json();


                document.getElementById("result").innerHTML = `
                    <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>
                `;

            } catch (error) {

                document.getElementById("result").innerHTML = `
                    <p><b>Ошибка:</b> ${error.message}</p>
                `;

            }
        }

    </script>

</body>
</html>