64 lines
2.6 KiB
JavaScript
64 lines
2.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Get filename like "aubrey.html"
|
|
const filename = window.location.pathname.split('/').pop();
|
|
const personName = filename.replace('.html', '').toLowerCase();
|
|
|
|
// Get all the target elements
|
|
const businessCard = document.getElementById('businessCard');
|
|
const nameElement = document.getElementById('name');
|
|
const titleElement = document.getElementById('title');
|
|
const phoneLinkElement = document.getElementById('phone');
|
|
const emailLinkElement = document.getElementById('email');
|
|
const websiteLinkElement = document.getElementById('website');
|
|
const addressElement = document.getElementById('address');
|
|
const photoElement = document.getElementById('photo');
|
|
const profileElement = document.getElementById('profile');
|
|
const balloonElement = document.getElementById('balloon');
|
|
|
|
fetch('data.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Try to match the filename to the employee's name (case-insensitive)
|
|
const employee = data.find(emp => emp.name.toLowerCase() === personName);
|
|
|
|
// If no match found, optionally show an error or fallback
|
|
if (!employee) {
|
|
businessCard.innerHTML = `<p style="color:red">No data found for "${personName}".</p>`;
|
|
return;
|
|
}
|
|
|
|
// Populate card with employee data
|
|
nameElement.textContent = employee.name;
|
|
titleElement.textContent = employee.title;
|
|
addressElement.textContent = employee.address;
|
|
profileElement.src = employee.profile;
|
|
photoElement.src = employee.photo;
|
|
balloonElement.src = employee.balloon;
|
|
|
|
// Phone
|
|
phoneLinkElement.innerHTML = '';
|
|
const phoneLink = document.createElement('a');
|
|
phoneLink.href = `tel:${employee.phone}`;
|
|
phoneLink.textContent = employee.phone;
|
|
phoneLinkElement.appendChild(phoneLink);
|
|
|
|
// Email
|
|
emailLinkElement.innerHTML = '';
|
|
const emailLink = document.createElement('a');
|
|
emailLink.href = `mailto:${employee.email}`;
|
|
emailLink.textContent = employee.email;
|
|
emailLinkElement.appendChild(emailLink);
|
|
|
|
// Website
|
|
websiteLinkElement.innerHTML = '';
|
|
const websiteLink = document.createElement('a');
|
|
websiteLink.href = `https://${employee.website}`;
|
|
websiteLink.textContent = employee.website;
|
|
websiteLinkElement.appendChild(websiteLink);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
businessCard.innerHTML = '<p>Error loading data. Check the console.</p>';
|
|
});
|
|
});
|
|
|