script.js - master - Art1735/cdg_practic

script.js
82 строки3 KB
Art
ЛР4-5: Простая интерактивность и валидация формы
08 фев 2026, 07:16
08 фев 2026, 07:166b1754b
// ===== ЛР4: Простые интерактивные эффекты =====

// 1. Плавная прокрутка к якорям
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            targetElement.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
});

// 2. Простой эффект при наведении на кнопки
document.querySelectorAll('.btn').forEach(button => {
    button.addEventListener('mouseover', function() {
        this.style.backgroundColor = '#3f37c9';
    });
    
    button.addEventListener('mouseout', function() {
        this.style.backgroundColor = '';
    });
});

// ===== ЛР5: Простая валидация формы =====

const form = document.getElementById('contactForm');
if (form) {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        let isValid = true;
        
        // Очистить старые ошибки
        document.querySelectorAll('.error').forEach(el => el.remove());
        
        // 1. Проверка имени
        const name = document.getElementById('name').value.trim();
        if (name === '') {
            showError('name', 'Пожалуйста, введите ваше имя');
            isValid = false;
        }
        
        // 2. Проверка email
        const email = document.getElementById('email').value.trim();
        if (email === '') {
            showError('email', 'Пожалуйста, введите ваш email');
            isValid = false;
        }
        
        // 3. Проверка сообщения
        const message = document.getElementById('message').value.trim();
        if (message === '') {
            showError('message', 'Пожалуйста, напишите сообщение');
            isValid = false;
        }
        
        // Если всё заполнено
        if (isValid) {
            alert('✅ Сообщение отправлено! Спасибо!');
            form.reset();
        }
    });
}

// Функция показа ошибки
function showError(fieldId, message) {
    const field = document.getElementById(fieldId);
    const error = document.createElement('div');
    error.className = 'error';
    error.style.color = 'red';
    error.style.fontSize = '14px';
    error.style.marginTop = '5px';
    error.textContent = message;
    field.parentNode.appendChild(error);
}