made card data dynamic
This commit is contained in:
parent
b3d945643b
commit
bd62cee80b
BIN
assets/alyssa/alyssa.jpg
Normal file
BIN
assets/alyssa/alyssa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
assets/aubrey/aubrey.jpg
Normal file
BIN
assets/aubrey/aubrey.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 4.0 MiB |
36
aubrey.html
Normal file
36
aubrey.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Virtual Business Card</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
|
||||||
|
<body >
|
||||||
|
<div class="card" id="businessCard">
|
||||||
|
<div class="background">
|
||||||
|
<img id="photo" class="photo" src="" alt="Logo">
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<img id="profile" class="photo" src="" alt="Profile Photo">
|
||||||
|
<h2 id="name"></h2>
|
||||||
|
<p id="title"></p>
|
||||||
|
<p id="phone"></p>
|
||||||
|
<p id="email"></p>
|
||||||
|
<p id="website"></p>
|
||||||
|
<p id="address"></p>
|
||||||
|
<img id="balloon" class="photo" src="" alt="picture of balloons" >
|
||||||
|
|
||||||
|
<!-- Social Media Icons -->
|
||||||
|
<div class="social-media">
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-bluesky"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-mastodon"></i></a>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
</div >
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body >
|
||||||
|
</html >
|
||||||
36
chris.html
Normal file
36
chris.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Virtual Business Card</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Autour+One&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
|
||||||
|
<body >
|
||||||
|
<div class="card" id="businessCard">
|
||||||
|
<div class="background">
|
||||||
|
<img id="photo" class="photo" src="" alt="Logo">
|
||||||
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<img id="profile" class="photo" src="" alt="Profile Photo">
|
||||||
|
<h2 id="name"></h2>
|
||||||
|
<p id="title"></p>
|
||||||
|
<p id="phone"></p>
|
||||||
|
<p id="email"></p>
|
||||||
|
<p id="website"></p>
|
||||||
|
<p id="address"></p>
|
||||||
|
<img id="balloon" class="photo" src="" alt="picture of balloons" >
|
||||||
|
|
||||||
|
<!-- Social Media Icons -->
|
||||||
|
<div class="social-media">
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-bluesky"></i></a>
|
||||||
|
<a href="#" class="social-icon"><i class="fab fa-mastodon"></i></a>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
</div >
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body >
|
||||||
|
</html >
|
||||||
37
data.json
37
data.json
@ -5,18 +5,31 @@
|
|||||||
"phone": "203.283.5626",
|
"phone": "203.283.5626",
|
||||||
"email": "chris@beachpartyballoons.com",
|
"email": "chris@beachpartyballoons.com",
|
||||||
"website": "beachpartyballoons.com",
|
"website": "beachpartyballoons.com",
|
||||||
"photo": "photo.png",
|
"photo": "assets/logo.png",
|
||||||
"profile": "chris.jpg",
|
"profile": "assets/chris/chris.jpg",
|
||||||
"address": "554 Boston Post Road, Milford, CT 06460",
|
"address": "554 Boston Post Road, Milford, CT 06460",
|
||||||
"balloon": "balloon.jpg"
|
"balloon": "assets/chris/balloon.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Bob The Builder",
|
"name": "Alyssa",
|
||||||
"title": "Master Builder",
|
"title": "Owner",
|
||||||
"phone": "+1-555-987-6543",
|
"phone": "203.283.5626",
|
||||||
"email": "bob@example.com",
|
"email": "alyssa@beachpartyballoons.com",
|
||||||
"website": "https://www.bobbuilds.com",
|
"website": "beachpartyballoons.com",
|
||||||
"photo": "https://example.com/bob.jpg",
|
"photo": "assets/logo.png",
|
||||||
"address": "456 Hammer Street, Constructionville"
|
"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"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
78
script.js
78
script.js
@ -1,4 +1,9 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
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 businessCard = document.getElementById('businessCard');
|
||||||
const nameElement = document.getElementById('name');
|
const nameElement = document.getElementById('name');
|
||||||
const titleElement = document.getElementById('title');
|
const titleElement = document.getElementById('title');
|
||||||
@ -11,40 +16,49 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const balloonElement = document.getElementById('balloon');
|
const balloonElement = document.getElementById('balloon');
|
||||||
|
|
||||||
fetch('data.json')
|
fetch('data.json')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
// If using the multiple employee format, choose the employee to display.
|
// Try to match the filename to the employee's name (case-insensitive)
|
||||||
// For example, to display the first employee:
|
const employee = data.find(emp => emp.name.toLowerCase() === personName);
|
||||||
const employee = data[0]; // Or choose by ID or other criteria.
|
|
||||||
|
|
||||||
nameElement.textContent = employee.name;
|
// If no match found, optionally show an error or fallback
|
||||||
titleElement.textContent = employee.title;
|
if (!employee) {
|
||||||
addressElement.textContent = employee.address;
|
businessCard.innerHTML = `<p style="color:red">No data found for "${personName}".</p>`;
|
||||||
profileElement.src = employee.profile;
|
return;
|
||||||
photoElement.src = employee.photo;
|
}
|
||||||
balloonElement.src = employee.balloon;
|
|
||||||
|
|
||||||
// Create phone link
|
// Populate card with employee data
|
||||||
const phoneLink = document.createElement('a');
|
nameElement.textContent = employee.name;
|
||||||
phoneLink.href = `tel:${employee.phone}`;
|
titleElement.textContent = employee.title;
|
||||||
phoneLink.textContent = employee.phone;
|
addressElement.textContent = employee.address;
|
||||||
phoneLinkElement.appendChild(phoneLink);
|
profileElement.src = employee.profile;
|
||||||
|
photoElement.src = employee.photo;
|
||||||
|
balloonElement.src = employee.balloon;
|
||||||
|
|
||||||
// Create email link
|
// Phone
|
||||||
const emailLink = document.createElement('a');
|
phoneLinkElement.innerHTML = '';
|
||||||
emailLink.href = `mailto:${employee.email}`;
|
const phoneLink = document.createElement('a');
|
||||||
emailLink.textContent = employee.email;
|
phoneLink.href = `tel:${employee.phone}`;
|
||||||
emailLinkElement.appendChild(emailLink);
|
phoneLink.textContent = employee.phone;
|
||||||
|
phoneLinkElement.appendChild(phoneLink);
|
||||||
|
|
||||||
// Create website link
|
// Email
|
||||||
const websiteLink = document.createElement('a');
|
emailLinkElement.innerHTML = '';
|
||||||
websiteLink.href = employee.website;
|
const emailLink = document.createElement('a');
|
||||||
websiteLink.textContent = employee.website;
|
emailLink.href = `mailto:${employee.email}`;
|
||||||
websiteLinkElement.appendChild(websiteLink);
|
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>';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Error fetching data:', error);
|
|
||||||
businessCard.innerHTML = '<p>Error loading data. Check the console.</p>'; // Display an error message
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user