Загрузка данных

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 20px 40px;

            font-family: Arial, sans-serif;

            background-color: white;
        }

        h1 {
            text-align: center;
            margin: 0 0 20px;
        }


        /* Верхний блок */

        .explanation {
            width: 100%;

            background-color: rgb(190, 193, 193);

            padding: 20px;

            border-radius: 6px;
        }

        .explanation h2 {
            margin-top: 0;
        }


        /* Состояния Promise */

        .states {
            display: flex;

            gap: 15px;

            text-align: center;

            margin-top: 20px;
        }

        .pending,
        .fulfilled,
        .rejected {
            flex: 1;

            padding: 20px;

            border: 2px solid #555;

            border-radius: 8px;
        }

        .pending {
            background-color: #a76b73;
        }

        .fulfilled {
            background-color: rgb(136, 60, 66);
        }

        .rejected {
            background-color: rgb(129, 86, 86);
        }


        /* Главная консоль */

        .console {
            margin-top: 20px;

            height: 230px;

            background-color: #252525;

            color: white;

            padding: 20px;

            border-radius: 8px;

            font-family: monospace;

            font-size: 16px;

            overflow-y: auto;
        }


        /* Управление */

        .demo-area {
            margin-top: 15px;
        }

        .demo-area h2 {
            margin: 0 0 10px;
        }

        button {
            padding: 10px 20px;

            margin-right: 10px;

            font-size: 16px;

            border: none;
            outline: none;

            border-radius: 5px;

            cursor: pointer;
            background-color: aliceblue;
            transition: 0.5s;
           
        }

        button:active{
            transform: scale(0.95);
            
        }
        button:hover{
            background-color: rgb(187, 102, 102);
        }


        /* Сообщения консоли */

        .log-entry {
            margin: 6px 0;
        }

        .info {
            color: yellow;
        }

        .success {
            color: lightgreen;
        }

        .error {
            color: lightcoral;
        }

        .explanation {
            margin-bottom: 100px;
        }

    </style>
</head>


<body>

    <h1>Promise в JS</h1>


    <div class="explanation">

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

        <p>
            Promise (с англ. «обещание») в JavaScript —
            это специальный объект, который представляет
            результат асинхронной операции.
        </p>


        <div class="states">

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

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

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

        </div>

    </div>


    <!-- Теперь это единственная консоль -->

     <h2>Демо работы Promise:</h2>


    <div id="console" class="console">
    </div>


    <div class="demo-area">

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

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

    </div>


    <script>

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


        function addLog(message, type = 'info') {

            const logEntry =
                document.createElement('div');

            logEntry.className =
                `log-entry ${type}`;

            logEntry.textContent =
                `> ${message}`;

            consoleBlock.appendChild(logEntry);


            /* Автопрокрутка консоли вниз */

            consoleBlock.scrollTop =
                consoleBlock.scrollHeight;
        }


        const createPromiseButton =
            document.getElementById('createPromise');


        const clearConsoleButton =
            document.getElementById('clearConsole');


        createPromiseButton.addEventListener(
            'click',

            function () {

                addLog('Promise создан');

                addLog('Состояние: 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) {

                        addLog(
                            'Состояние: Fulfilled',
                            'success'
                        );

                        addLog(
                            result,
                            'success'
                        );

                    })


                    .catch(function (error) {

                        addLog(
                            'Состояние: Rejected',
                            'error'
                        );

                        addLog(
                            error,
                            'error'
                        );

                    });

            }
        );


        clearConsoleButton.addEventListener(
            'click',

            function () {

                consoleBlock.innerHTML = '';

            }
        );

    </script>

</body>

</html>