html/lab5/task1/script.js - main - aska/web-static-labs

html/lab5/task1/script.js
102 строки4 KB
unknown
лабы 1 4 5
14 ноя 2025, 09:16
14 ноя 2025, 09:16b757c12
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(createPopup, 7000);

    function createPopup() {
        // Создаем элементы всплывающего окна
        const popup = document.createElement('div');
        popup.id = 'popup';
        popup.style.position = 'fixed';
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.backgroundColor = '#fff';
        popup.style.border = '1px solid #ccc';
        popup.style.padding = '20px';
        popup.style.zIndex = '1000';
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        const popupWidth = Math.max(300, screenWidth * 0.5);
        const popupHeight = Math.max(200, screenHeight * 0.3);

        popup.style.width = popupWidth + 'px';
        popup.style.height = popupHeight + 'px';

        const title = document.createElement('h2');
        title.textContent = 'Подпишитесь на новости сайта';

        const emailInput = document.createElement('input');
        emailInput.type = 'email';
        emailInput.placeholder = 'Ваш e-mail';

        const errorMessage = document.createElement('p');
        errorMessage.id = 'error-message';
        errorMessage.style.color = 'red';

        const subscribeButton = document.createElement('button');
        subscribeButton.textContent = 'Подписаться';

        const closeButton = document.createElement('button');
        closeButton.textContent = 'Закрыть';

        
        popup.appendChild(title);
        popup.appendChild(emailInput);
        popup.appendChild(errorMessage);
        popup.appendChild(document.createElement('br'));
        popup.appendChild(subscribeButton);
        popup.appendChild(closeButton);

        
        document.body.appendChild(popup);

        

        // Функция проверки валидности email
        function isValidEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

        let timeoutId; // переменная для хранения ID таймера

        subscribeButton.addEventListener('click', function() {
            const email = emailInput.value;
            if (email && isValidEmail(email)) {
                // Успешная подписка
                popup.innerHTML = `<p>Спасибо за подписку! На Ваш адрес ${email} будет направлено письмо</p>`;

                // Автоматическое закрытие через 10 секунд
                timeoutId = setTimeout(closePopup, 10000);

                // Закрытие по клику
                popup.addEventListener('click', event=>{
                    if (event.target==popup) closePopup();
                });

                // Закрытие по нажатию Escape
                document.addEventListener('keydown', event=> {
                    if (event.key === 'Escape') closePopup();
                    
                });

                // Выводим результат на основной странице
                document.getElementById('subscriptionResult').textContent = `Подписка выполнена на ${email}`;
            } else {
                // Ошибка валидации
                errorMessage.textContent = 'Пожалуйста, введите корректный e-mail.';
                emailInput.style.borderColor = 'red';
            }
        });

        closeButton.addEventListener('click', closePopup);

        function closePopup() {
            // Очищаем таймер, если он существует
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
            document.body.removeChild(popup);
        }
    }
});