76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// Navbar scroll effect
|
|
const navbar = document.querySelector('.navbar');
|
|
if (navbar) {
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('navbar-scrolled');
|
|
} else {
|
|
navbar.classList.remove('navbar-scrolled');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Contact form submission
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('name').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
const message = document.getElementById('message').value.trim();
|
|
const alertEl = document.getElementById('contact-alert');
|
|
const submitButton = contactForm.querySelector('button[type="submit"]');
|
|
|
|
if (!name || !email || !message) {
|
|
showAlert('Please fill in all fields.', 'danger');
|
|
return;
|
|
}
|
|
|
|
if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
|
|
showAlert('Please enter a valid email address.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(this);
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
|
|
|
|
fetch('contact.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showAlert('Message sent successfully! I will get back to you soon.', 'success');
|
|
contactForm.reset();
|
|
} else {
|
|
showAlert(data.error || 'An error occurred. Please try again.', 'danger');
|
|
}
|
|
})
|
|
.catch(() => {
|
|
showAlert('A network error occurred. Please try again.', 'danger');
|
|
})
|
|
.finally(() => {
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = 'Send Message';
|
|
});
|
|
});
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertEl = document.getElementById('contact-alert');
|
|
alertEl.innerHTML = message;
|
|
alertEl.className = `alert alert-${type}`;
|
|
alertEl.style.display = 'block';
|
|
|
|
setTimeout(() => {
|
|
alertEl.style.display = 'none';
|
|
}, 5000);
|
|
}
|
|
});
|