---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Работа Promises</title>

    <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-color: #eeeeee;
        }

        .content {
            width: 92%;
            min-height: 90vh;

            background-color: rgb(166, 169, 169);

            border: 3px solid #444;
            border-radius: 18px;

            padding: 35px;
        }

        h1 {
            text-align: center;
            margin-top: 0;
            font-size: 40px;
        }

        h2 {
            text-align: center;
        }

        .description {
            max-width: 900px;
            margin: 0 auto;

            text-align: center;
            font-size: 18px;
            line-height: 1.5;
        }

        .states {
            display: flex;
            justify-content: center;
            gap: 20px;

            margin-top: 30px;
        }

        .pending,
        .fulfilled,
        .rejected {
            flex: 1;
            min-height: 130px;

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

            border: 3px solid #333;
            border-radius: 10px;

            padding: 15px;
        }

        .pending {
            background-color: lightyellow;
        }

        .fulfilled {
            background-color: lightgreen;
        }

        .rejected {
            background-color: lightcoral;
        }

        .active {
            border: 5px solid black;
        }

        .code-block {
            margin-top: 30px;

            background-color: #222;
            color: white;

            padding: 20px;
            border-radius: 10px;

            font-family: monospace;
            line-height: 1.5;
        }

        .code-block pre {
            margin: 0;
            white-space: pre-wrap;
        }

        .demo-area {
            margin-top: 20px;

            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }

        button {
            padding: 12px 25px;

            border: 2px solid #333;
            border-radius: 7px;

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

            cursor: pointer;
        }

        button:hover {
            background-color: #ddd;
        }

        .console {
            width: 100%;
            min-height: 100px;

            margin-top: 5px;

            background-color: #111;
            color: #00ff77;

            border-radius: 8px;
            padding: 15px;

            font-family: monospace;
        }

        .console p {
            margin: 5px 0;
        }

        @media (max-width: 800px) {
            .states {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>

    <div class="content">

        <h1>Promise в JS</h1>

        <h2>Что такое Promise?</h2>

        <p class="description">
            Promise (с англ. «обещание») в JavaScript — это специальный объект,
            который представляет результат асинхронной операции.
            Promise может находиться в трёх состояниях:
            Pending, Fulfilled или Rejected.
        </p>

        <div class="states">

            <div class="pending" id="pending">
                <h3>Pending</h3>
                <p>Ожидание</p>
            </div>

            <div class="fulfilled" id="fulfilled">
                <h3>Fulfilled</h3>
                <p>Исполнено</p>
            </div>

            <div class="rejected" id="rejected">
                <h3>Rejected</h3>
                <p>Отклонено</p>
            </div>

        </div>


        <div class="code-block">
<pre>
const promise = new Promise((resolve, reject) => {

    setTimeout(() => {

        const success = Math.random() > 0.5;

        if (success) {
            resolve("Promise выполнен успешно");
        } else {
            reject("Promise завершился ошибкой");
        }

    }, 2000);

});
</pre>
        </div>


        <div class="demo-area">

            <button id="createPromise">
                Создать Promise
            </button>

            <button id="clearConsole">
                Очистить консоль
            </button>

            <div class="console" id="console">
                Консоль готова...
            </div>

        </div>

    </div>


    <script>

        const createButton =
            document.getElementById("createPromise");

        const clearButton =
            document.getElementById("clearConsole");

        const consoleBlock =
            document.getElementById("console");

        const pending =
            document.getElementById("pending");

        const fulfilled =
            document.getElementById("fulfilled");

        const rejected =
            document.getElementById("rejected");


        function clearStates() {
            pending.classList.remove("active");
            fulfilled.classList.remove("active");
            rejected.classList.remove("active");
        }


        function addMessage(message) {

            const p = document.createElement("p");

            p.textContent = "> " + message;

            consoleBlock.appendChild(p);
        }


        createButton.addEventListener("click", function () {

            consoleBlock.innerHTML = "";

            clearStates();

            pending.classList.add("active");

            addMessage("Promise создан");
            addMessage("Состояние: Pending");


            const promise = new Promise((resolve, reject) => {

                setTimeout(() => {

                    const success = Math.random() > 0.5;

                    if (success) {
                        resolve("Promise выполнен успешно");
                    } else {
                        reject("Promise завершился ошибкой");
                    }

                }, 2000);

            });


            promise
                .then(function (result) {

                    clearStates();

                    fulfilled.classList.add("active");

                    addMessage("Состояние: Fulfilled");
                    addMessage(result);

                })

                .catch(function (error) {

                    clearStates();

                    rejected.classList.add("active");

                    addMessage("Состояние: Rejected");
                    addMessage(error);

                });

        });


        clearButton.addEventListener("click", function () {

            consoleBlock.innerHTML = "Консоль очищена...";

            clearStates();

        });

    </script>

</body>
</html>