lab.js - master - fckitall/cdg_practice

lab.js
250 строк9 KB
Ковалевский Александр Андреевич
Полное выполнение лабораторных работ 1-5
17 дек 2025, 20:09
17 дек 2025, 20:09d527b2c
document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.fade-in');

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.1
    });

    elements.forEach(el => {
        observer.observe(el);
    });
});


const buttons = document.querySelectorAll('.btn');

buttons.forEach(button => {
    button.addEventListener('mouseenter', () => {
        button.style.transform = 'scale(1.2)';
        button.style.transition = 'transform 0.3s ease';
    });

    button.addEventListener('mouseleave', () => {
        button.style.transform = 'scale(1)';
    });
});

// Обработка отправки формы
const contactForm = document.querySelector('.discuss-template');
const successModal = document.getElementById('successModal');
const closeModal = document.querySelector('.close-modal');

if (contactForm) {
    contactForm.addEventListener('submit', function(event) {
        event.preventDefault(); // Предотвращаем стандартную отправку формы
        
        // Показываем кастомное модальное окно
        if (successModal) {
            successModal.style.display = 'block';
        } else {
            alert('Сообщение успешно отправлено!');
        }
        
        // Очищаем форму после отправки
        contactForm.reset();
    });
}

// Закрытие модального окна
if (closeModal) {
    closeModal.addEventListener('click', function() {
        if (successModal) {
            successModal.style.display = 'none';
        }
    });
}

// Закрытие модального окна при клике вне его
window.addEventListener('click', function(event) {
    if (successModal && event.target === successModal) {
        successModal.style.display = 'none';
    }
});
document.addEventListener('DOMContentLoaded', function() {
    // Эффект плавного появления элементов при прокрутке
    const elements = document.querySelectorAll('.fade-in');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });
    elements.forEach(el => observer.observe(el));

    // Эффекты наведения для кнопок
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('mouseenter', () => {
            button.style.transform = 'scale(1.1)';
            button.style.transition = 'transform 0.3s ease';
        });
        button.addEventListener('mouseleave', () => {
            button.style.transform = 'scale(1)';
        });
    });

    // Эффекты наведения для изображений
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        img.addEventListener('mouseenter', () => {
            img.style.opacity = '0.8';
            img.style.transition = 'opacity 0.3s ease';
        });
        img.addEventListener('mouseleave', () => {
            img.style.opacity = '1';
        });
    });

    // Валидация и обработка формы
    const contactForm = document.querySelector('.discuss-template');
    const successModal = document.getElementById('successModal');
    const closeModal = document.querySelector('.close-modal');

    // Функция валидации email
    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    // Функция отображения ошибки
    function showError(input, message) {
        const formGroup = input.parentElement;
        let error = formGroup.querySelector('.error-message');
        
        if (!error) {
            error = document.createElement('div');
            error.className = 'error-message';
            formGroup.appendChild(error);
        }
        
        error.textContent = message;
        error.style.color = '#ff6b6b';
        error.style.fontSize = '0.9rem';
        error.style.marginTop = '5px';
        input.style.borderColor = '#ff6b6b';
    }

    // Функция очистки ошибки
    function clearError(input) {
        const formGroup = input.parentElement;
        const error = formGroup.querySelector('.error-message');
        if (error) {
            error.remove();
        }
        input.style.borderColor = '#fff';
    }

    // Валидация формы
    function validateForm() {
        let isValid = true;
        
        // Валидация имени
        const nameInput = document.getElementById('name');
        if (!nameInput.value.trim()) {
            showError(nameInput, 'Пожалуйста, введите ваше имя и фамилию');
            isValid = false;
        } else {
            clearError(nameInput);
        }
        
        // Валидация email
        const emailInput = document.getElementById('email');
        if (!emailInput.value.trim()) {
            showError(emailInput, 'Пожалуйста, введите ваш email');
            isValid = false;
        } else if (!validateEmail(emailInput.value)) {
            showError(emailInput, 'Пожалуйста, введите корректный email адрес');
            isValid = false;
        } else {
            clearError(emailInput);
        }
        
        // Валидация сообщения
        const messageInput = document.getElementById('message');
        if (!messageInput.value.trim()) {
            showError(messageInput, 'Пожалуйста, введите ваше сообщение');
            isValid = false;
        } else if (messageInput.value.length > 500) {
            showError(messageInput, 'Сообщение не должно превышать 500 символов');
            isValid = false;
        } else {
            clearError(messageInput);
        }
        
        return isValid;
    }

    // Обработка отправки формы
    if (contactForm) {
        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();
            
            if (validateForm()) {
                // Показываем модальное окно успеха
                if (successModal) {
                    successModal.style.display = 'block';
                } else {
                    alert('Сообщение успешно отправлено!');
                }
                
                // Очищаем форму
                contactForm.reset();
                
                // Очищаем все ошибки
                const inputs = contactForm.querySelectorAll('input, textarea');
                inputs.forEach(input => clearError(input));
            }
        });
    }

    // Закрытие модального окна
    if (closeModal) {
        closeModal.addEventListener('click', function() {
            if (successModal) {
                successModal.style.display = 'none';
            }
        });
    }

    // Закрытие модального окна при клике вне его
    window.addEventListener('click', function(event) {
        if (successModal && event.target === successModal) {
            successModal.style.display = 'none';
        }
    });

    // Добавляем индикатор количества символов для textarea
    const messageInput = document.getElementById('message');
    if (messageInput) {
        const charCounter = document.createElement('div');
        charCounter.className = 'char-counter';
        charCounter.style.fontSize = '0.8rem';
        charCounter.style.color = '#ccc';
        charCounter.style.textAlign = 'right';
        charCounter.style.marginTop = '5px';
        messageInput.parentElement.appendChild(charCounter);
        
        function updateCharCounter() {
            const length = messageInput.value.length;
            charCounter.textContent = `${length}/500 символов`;
            
            if (length > 450) {
                charCounter.style.color = '#ffa500';
            } else if (length > 500) {
                charCounter.style.color = '#ff6b6b';
            } else {
                charCounter.style.color = '#ccc';
            }
        }
        
        messageInput.addEventListener('input', updateCharCounter);
        updateCharCounter(); // Инициализация
    }
});