50 lines
2.2 KiB
JavaScript
50 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
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 => {
|
|
// If using the multiple employee format, choose the employee to display.
|
|
// For example, to display the first employee:
|
|
const employee = data[0]; // Or choose by ID or other criteria.
|
|
|
|
nameElement.textContent = employee.name;
|
|
titleElement.textContent = employee.title;
|
|
addressElement.textContent = employee.address;
|
|
profileElement.src = employee.profile;
|
|
photoElement.src = employee.photo;
|
|
balloonElement.src = employee.balloon;
|
|
|
|
// Create phone link
|
|
const phoneLink = document.createElement('a');
|
|
phoneLink.href = `tel:${employee.phone}`;
|
|
phoneLink.textContent = employee.phone;
|
|
phoneLinkElement.appendChild(phoneLink);
|
|
|
|
// Create email link
|
|
const emailLink = document.createElement('a');
|
|
emailLink.href = `mailto:${employee.email}`;
|
|
emailLink.textContent = employee.email;
|
|
emailLinkElement.appendChild(emailLink);
|
|
|
|
// Create website link
|
|
const websiteLink = document.createElement('a');
|
|
websiteLink.href = 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>'; // Display an error message
|
|
});
|
|
}); |