73 lines
3.1 KiB
JavaScript
73 lines
3.1 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const contactForm = document.getElementById('contactForm');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const formData = new FormData(form);
|
|
const status = document.getElementById('form-status');
|
|
|
|
// Basic client-side validation
|
|
const name = formData.get('name');
|
|
const email = formData.get('email');
|
|
const message = formData.get('message');
|
|
|
|
if (!name || !email || !message) {
|
|
status.innerHTML = '<div class="alert alert-danger">Please fill out all fields.</div>';
|
|
return;
|
|
}
|
|
|
|
fetch('contact.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
status.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
|
|
form.reset();
|
|
} else {
|
|
status.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
status.innerHTML = '<div class="alert alert-danger">An error occurred. Please try again.</div>';
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Fetch and display cyclone data
|
|
const cycloneDataContainer = document.getElementById('cyclone-data');
|
|
if (cycloneDataContainer) {
|
|
fetch('api/cyclone.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data && data.length > 0) {
|
|
let html = '';
|
|
data.forEach(alert => {
|
|
html += `
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">${alert.headline}</h5>
|
|
<p class="card-text">${alert.description.substring(0, 150)}...</p>
|
|
<a href="${alert.link}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm mt-auto">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
cycloneDataContainer.innerHTML = html;
|
|
} else {
|
|
cycloneDataContainer.innerHTML = '<div class="col-12"><p>No active severe weather alerts from the SPC at the moment.</p></div>';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
cycloneDataContainer.innerHTML = '<p>Could not load cyclone data. Please try again later.</p>';
|
|
console.error('Error fetching cyclone data:', error);
|
|
});
|
|
}
|
|
});
|