chris/BPB-Cards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made card data dynamic

Browse Source
This commit is contained in:
chris 2025-06-25 19:05:45 -04:00
parent b3d945643b
commit bd62cee80b
10 changed files with 149 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
index.html → alyssa.html
View File

BIN
assets/alyssa/alyssa.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

BIN
assets/aubrey/aubrey.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

0
balloon.jpg → assets/chris/balloon.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

0
chris.jpg → assets/chris/chris.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 185 KiB

0
photo.png → assets/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 MiB

After

Width:  |  Height:  |  Size: 4.0 MiB

36
aubrey.html Normal file
View 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
View 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 >

33
data.json
View File

@ -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"
}
]

32
script.js
View File

@ -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');
@ -13,10 +18,16 @@ document.addEventListener('DOMContentLoaded', () => {
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.
// 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;
@ -24,27 +35,30 @@ document.addEventListener('DOMContentLoaded', () => {
photoElement.src = employee.photo;
balloonElement.src = employee.balloon;
// Create phone link
// Phone
phoneLinkElement.innerHTML = '';
const phoneLink = document.createElement('a');
phoneLink.href = `tel:${employee.phone}`;
phoneLink.textContent = employee.phone;
phoneLinkElement.appendChild(phoneLink);
// Create email link
// Email
emailLinkElement.innerHTML = '';
const emailLink = document.createElement('a');
emailLink.href = `mailto:${employee.email}`;
emailLink.textContent = employee.email;
emailLinkElement.appendChild(emailLink);
// Create website link
// Website
websiteLinkElement.innerHTML = '';
const websiteLink = document.createElement('a');
websiteLink.href = employee.website;
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>'; // Display an error message
businessCard.innerHTML = '<p>Error loading data. Check the console.</p>';
});
});