contactScript.js

document.addEventListener('DOMContentLoaded', function () {
   
    const form = document.getElementById('contact-form');
    const statusMessage = document.getElementById('status-message');
    const allInputs = document.querySelectorAll('#contact-form [required]');
    
    
    const passwordInput = document.getElementById('password');
    const strengthBar = document.getElementById('strength-bar');
    const strengthText = document.getElementById('strength-text');
    const subjectTextarea = document.getElementById('subject');
    const charCounter = document.getElementById('char-counter');

  
    allInputs.forEach(input => {
        input.addEventListener('input', () => {
            validateField(input);
        });
    });

    function validateField(field) {
        if (field.checkValidity()) {
            field.classList.remove('error-input');
        } else {
            field.classList.add('error-input');
        }
    }

  
    passwordInput.addEventListener('input', () => {
        const password = passwordInput.value;
        let strength = 0;
        let feedback = '';

        if (password.length >= 8) strength++;
        if (password.match(/[a-z]/)) strength++;
        if (password.match(/[A-Z]/)) strength++;
        if (password.match(/[0-9]/)) strength++;
        if (password.match(/[^a-zA-Z0-9]/)) strength++;

        strengthBar.style.width = (strength * 20) + '%';
        
        switch (strength) {
            case 0:
            case 1:
                strengthBar.style.backgroundColor = '#dc3545'; // Red
                feedback = 'Weak';
                break;
            case 2:
                strengthBar.style.backgroundColor = '#ffc107'; // Orange
                feedback = 'Medium';
                break;
            case 3:
                strengthBar.style.backgroundColor = '#28a745'; // Green
                feedback = 'Good';
                break;
            case 4:
            case 5:
                strengthBar.style.backgroundColor = '#28a745'; // Strong Green
                feedback = 'Strong';
                break;
        }
        strengthText.textContent = `Strength: ${feedback}`;
    });

  
    subjectTextarea.addEventListener('input', () => {
        const currentLength = subjectTextarea.value.length;
        const maxLength = subjectTextarea.getAttribute('maxlength');
        charCounter.textContent = `${currentLength} / ${maxLength}`;
    });

 
    form.addEventListener('submit', function(event) {
        let isFormValid = true;
        
        allInputs.forEach(input => {
            validateField(input); 
            if (!input.checkValidity()) {
                isFormValid = false;
            }
        });
        
        if (isFormValid) {
            statusMessage.textContent = 'Validation successful! Opening your email client...';
            statusMessage.className = 'success';
           
        } else {
            event.preventDefault(); 
            statusMessage.textContent = 'Please fix the errors in the fields highlighted in red.';
            statusMessage.className = 'error';
        }
    });

   
    window.alert("Welcome to the Contact Page!");
});