diff --git a/index.html b/alyssa.html similarity index 100% rename from index.html rename to alyssa.html diff --git a/assets/alyssa/alyssa.jpg b/assets/alyssa/alyssa.jpg new file mode 100644 index 0000000..43f94d2 Binary files /dev/null and b/assets/alyssa/alyssa.jpg differ diff --git a/assets/aubrey/aubrey.jpg b/assets/aubrey/aubrey.jpg new file mode 100644 index 0000000..15edfd9 Binary files /dev/null and b/assets/aubrey/aubrey.jpg differ diff --git a/balloon.jpg b/assets/chris/balloon.jpg similarity index 100% rename from balloon.jpg rename to assets/chris/balloon.jpg diff --git a/chris.jpg b/assets/chris/chris.jpg similarity index 100% rename from chris.jpg rename to assets/chris/chris.jpg diff --git a/photo.png b/assets/logo.png similarity index 100% rename from photo.png rename to assets/logo.png diff --git a/aubrey.html b/aubrey.html new file mode 100644 index 0000000..3562ef3 --- /dev/null +++ b/aubrey.html @@ -0,0 +1,36 @@ + + + + Virtual Business Card + + + + + +
+
+ Logo +
+
+ Profile Photo +

+

+

+

+

+

+ picture of balloons + + + +
+
+ + + + \ No newline at end of file diff --git a/chris.html b/chris.html new file mode 100644 index 0000000..3562ef3 --- /dev/null +++ b/chris.html @@ -0,0 +1,36 @@ + + + + Virtual Business Card + + + + + +
+
+ Logo +
+
+ Profile Photo +

+

+

+

+

+

+ picture of balloons + + + +
+
+ + + + \ No newline at end of file diff --git a/data.json b/data.json index 8857e9d..4e6e1ef 100644 --- a/data.json +++ b/data.json @@ -5,18 +5,31 @@ "phone": "203.283.5626", "email": "chris@beachpartyballoons.com", "website": "beachpartyballoons.com", - "photo": "photo.png", - "profile": "chris.jpg", + "photo": "assets/logo.png", + "profile": "assets/chris/chris.jpg", "address": "554 Boston Post Road, Milford, CT 06460", - "balloon": "balloon.jpg" + "balloon": "assets/chris/balloon.jpg" }, - { - "name": "Bob The Builder", - "title": "Master Builder", - "phone": "+1-555-987-6543", - "email": "bob@example.com", - "website": "https://www.bobbuilds.com", - "photo": "https://example.com/bob.jpg", - "address": "456 Hammer Street, Constructionville" - } + { + "name": "Alyssa", + "title": "Owner", + "phone": "203.283.5626", + "email": "alyssa@beachpartyballoons.com", + "website": "beachpartyballoons.com", + "photo": "assets/logo.png", + "profile": "assets/alyssa/alyssa.jpg", + "address": "554 Boston Post Road, Milford, CT 06460", + "balloon": "assets/lyss/balloon.jpg" + }, + { + "name": "Aubrey", + "title": "Balloon Designer", + "phone": "203.283.5626", + "email": "aubrey@beachpartyballoons.com", + "website": "beachpartyballoons.com", + "photo": "assets/logo.png", + "profile": "assets/aubrey/aubrey.jpg", + "address": "554 Boston Post Road, Milford, CT 06460", + "balloon": "assets/aubrey/balloon.jpg" + } ] \ No newline at end of file diff --git a/script.js b/script.js index 0b3ae34..633fce7 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,9 @@ 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'); @@ -9,42 +14,51 @@ document.addEventListener('DOMContentLoaded', () => { 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 = '

Error loading data. Check the console.

'; // Display an error message - }); -}); \ No newline at end of file + .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 = `

No data found for "${personName}".

`; + 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 = '

Error loading data. Check the console.

'; + }); + }); + \ No newline at end of file