scripts/script.js - master - stefaneun/crimea_digital

scripts/script.js
185 строк6 KB
Stepan Vabel
Правки по ревью
16 дек 2025, 11:11
16 дек 2025, 11:1167de60d
const MAX_MESSAGE_LENGTH = 500;

document.addEventListener('DOMContentLoaded', function () {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function (entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-visible');
            }
        });
    }, observerOptions);

    const elementsToAnimate = document.querySelectorAll('.interest-item, .about-info, .main-info, .contact-form-content');

    elementsToAnimate.forEach(el => {
        el.classList.add('fade-in');
        observer.observe(el);
    });

    const buttons = document.querySelectorAll('.send-wrapper');
    buttons.forEach(button => {
        button.addEventListener('mouseenter', function () {
            this.classList.add('hovered');
        });

        button.addEventListener('mouseleave', function () {
            this.classList.remove('hovered');
        });
    });

    const navLinks = document.querySelectorAll('.link-page[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    const contactForm = document.querySelector('.contact-form-container');
    const emailInput = document.getElementById('email');
    const nameInput = document.getElementById('name');
    const messageInput = document.getElementById('message');

    function isValidEmail(email) {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailRegex.test(email);
    }

    function showError(input, message) {
        removeError(input);

        input.classList.add('error');

        const errorElement = document.createElement('div');
        errorElement.className = 'error-message';
        errorElement.textContent = message;

        input.parentNode.appendChild(errorElement);
    }

        function removeError(input) {
        input.classList.remove('error');
        const existingError = input.parentNode.querySelector('.error-message');
        if (existingError) {
            existingError.remove();
        }
    }

    function showSuccessMessage() {
        const existingSuccess = document.querySelector('.success-message');
        if (existingSuccess) {
            existingSuccess.remove();
        }

        const successElement = document.createElement('div');
        successElement.className = 'success-message';
        successElement.textContent = 'Ваши данные успешно отправлены';

        const submitButton = contactForm.querySelector('.form-button');
        contactForm.insertBefore(successElement, submitButton);

        successElement.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });

        setTimeout(() => {
            if (successElement.parentNode) {
                successElement.remove();
            }
        }, 5000);
    }

    function resetForm() {
        contactForm.reset();
        [nameInput, emailInput, messageInput].forEach(input => removeError(input));

        const successMessage = document.querySelector('.success-message');
        if (successMessage) {
            successMessage.remove();
        }
    }

    emailInput.addEventListener('blur', function () {
        if (this.value.trim() && !isValidEmail(this.value)) {
            showError(this, 'Пожалуйста, введите корректный email адрес');
        } else {
            removeError(this);
        }
    });

    nameInput.addEventListener('blur', function () {
        if (!this.value.trim()) {
            showError(this, 'Поле имени не может быть пустым');
        } else {
            removeError(this);
        }
    });

    messageInput.addEventListener('input', function () {
        const currentLength = this.value.length;

        if (currentLength > MAX_MESSAGE_LENGTH) {
            showError(this, `Максимальная длина сообщения: ${MAX_MESSAGE_LENGTH} символов`);
        } else {
            removeError(this);
        }
    });

    contactForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let hasErrors = false;

        if (!nameInput.value.trim()) {
            showError(nameInput, 'Поле имени не может быть пустым');
            hasErrors = true;
        } else {
            removeError(nameInput);
        }

        if (!emailInput.value.trim()) {
            showError(emailInput, 'Поле email не может быть пустым');
            hasErrors = true;
        } else if (!isValidEmail(emailInput.value)) {
            showError(emailInput, 'Пожалуйста, введите корректный email адрес');
            hasErrors = true;
        } else {
            removeError(emailInput);
        }

        if (!messageInput.value.trim()) {
            showError(messageInput, 'Поле сообщения не может быть пустым');
            hasErrors = true;
        } else if (messageInput.value.length > MAX_MESSAGE_LENGTH) {
            showError(messageInput, `Максимальная длина сообщения: ${MAX_MESSAGE_LENGTH} символов`);
            hasErrors = true;
        } else {
            removeError(messageInput);
        }

        if (!hasErrors) {
            resetForm();
            showSuccessMessage();
        }
    });

    [nameInput, emailInput, messageInput].forEach(input => {
        input.addEventListener('focus', function () {
            removeError(this);
        });
    });
});