Skip to content

Commit

Permalink
update spotlight cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Mar 22, 2024
1 parent f900960 commit 9c39ca8
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 103 deletions.
63 changes: 1 addition & 62 deletions chamber/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,68 +144,7 @@ <h3>Five Day Forecast</h3>
</div>

<div class="spotlights">
<div class="cards">
<article class="card">
<h3>Spotlight One</h3>
<p>content for card one</p>
<div class="contact-info">
<address>
5555 W Somewhere Blvd<br />
City, State ZIP
</address>
<ul>
<li><a href="tel:+1234567890">+1 (234) 567-890</a></li>
<li><a href="mailto:info@example.com">info@example.com</a></li>
</ul>
</div>
</article>
<!-- /card-one -->
<article class="card">
<h3>Spotlight Two</h3>
<p>content for card two</p>
<div class="contact-info">
<address>
5555 W Somewhere Blvd<br />
City, State ZIP
</address>
<ul>
<li><a href="tel:+1234567890">+1 (234) 567-890</a></li>
<li><a href="mailto:info@example.com">info@example.com</a></li>
</ul>
</div>
</article>
<!-- /card-two -->
<article class="card">
<h3>Spotlight Three</h3>
<p>content for card three</p>
<div class="contact-info">
<address>
5555 W Somewhere Blvd<br />
City, State ZIP
</address>
<ul>
<li><a href="tel:+1234567890">+1 (234) 567-890</a></li>
<li><a href="mailto:info@example.com">info@example.com</a></li>
</ul>
</div>
</article>
<!-- /card-three -->
<article class="card">
<h3>Spotlight Four</h3>
<p>content for card four</p>
<div class="contact-info">
<address>
5555 W Somewhere Blvd<br />
City, State ZIP
</address>
<ul>
<li><a href="tel:+1234567890">+1 (234) 567-890</a></li>
<li><a href="mailto:info@example.com">info@example.com</a></li>
</ul>
</div>
</article>
<!-- /card-four -->
</div>
<div class="cards"></div>
</div>
</main>
<!-- Footer -->
Expand Down
93 changes: 57 additions & 36 deletions chamber/scripts/chamberJS.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
if (window.location.pathname === "/wdd230/chamber/index.html" || window.location.pathname === "/chamber/index.html") {
getSpotLightMembers();
getCopyrightYear();
getLastModified();
initBanner();
Expand Down Expand Up @@ -37,7 +38,9 @@ function screenMode() {
const element = document.body;
element.classList.toggle("dark-mode");

const sections = document.querySelectorAll("main, div.info, div.spotlights, div.event, article.card, div.weather-info, div.form-wrapper, section.member div.form-wrapper");
const sections = document.querySelectorAll(
"main, div.info, div.spotlights, div.event, article.card, div.weather-info, div.form-wrapper, section.member div.form-wrapper"
);
sections.forEach((section) => {
section.classList.toggle("dark-mode");
});
Expand Down Expand Up @@ -126,41 +129,59 @@ function initBanner() {
banner.classList.add("banner-hide");
});
}

// ********* Spotlight Members *********
function displaySpotlightMembers() {
const members = [
{
name: "Linda",
image: "images/linda.jpg",
alt: "Linda",
bio: "Linda is a dedicated member of the Chamber. She is always ready to help and support the community."
},
{
name: "John",
image: "images/john.jpg",
alt: "John",
bio: "John is a dedicated member of the Chamber. He is always ready to help and support the community."
},
{
name: "Jane",
image: "images/jane.jpg",
alt: "Jane",
bio: "Jane is a dedicated member of the Chamber. She is always ready to help and support the community."
/* ****************************************************
Spotlight Members
***************************************************** */

async function getSpotLightMembers() {
const dataURL = "https://vwolfley.github.io/wdd230/chamber/data/members.json";
try {
const response = await fetch(dataURL);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
];

const spotlights = document.querySelector(".spotlights");
members.forEach((member) => {
const card = document.createElement("article");
card.classList.add("card");
card.innerHTML = `
<img src="${member.image}" alt="${member.alt}">
<div class="info">
<h3>${member.name}</h3>
<p>${member.bio}</p>
const data = await response.json();
// console.log(data);
displaySpotlightMembers(data.members);
return data;
} catch (error) {
console.error("Error fetching data:", error);
throw error;
}
}

function displaySpotlightMembers(members) {
console.log(members);

let topMembers = members.filter((member) => member.membership === "Silver" || member.membership === "Gold");

let randomMembers = topMembers.sort(() => 0.5 - Math.random()).slice(0, 4);

const spotlights = document.querySelector(".cards");

randomMembers.forEach((member) => {
const spotlight = document.createElement("article");
spotlight.classList.add("card");

let status = member.membership === "Silver" ? "silver" : "gold";

spotlight.innerHTML = `
<h3 class="card-header ${status}">${member.membership} Member</h3>
<div class="card-body">
<img src="${member.logo}" alt="${member.company.toLowerCase()}-logo" loading="lazy" width=75 height=auto>
<div class="contact-info">
<address>
${member.address}
<br />
${member.city}, ${member.state} ${member.zip}
</address>
<div>
<a href=${member.website} target="_blank">${member.website}</a>
</div>
</div>
`;
spotlights.appendChild(card);
</div>
`;

spotlights.appendChild(spotlight);
});
}
}
43 changes: 38 additions & 5 deletions chamber/styles/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
--error-text: #a94442;
--error-background: #f2dede;
--error-border: #ebccd1;

--membershipNP: seaGreen;
--membershipBronze: #cd7f32;
--membershipSilver: #c0c0c0;
--membershipGold: #ffd700;
}
/* Mobile CSS ******************************** */

Expand Down Expand Up @@ -270,13 +275,41 @@ main {
}

.card {
padding: 1.5rem;
border-radius: 0.5rem;
border-width: 1px;
border-color: #cbd5e1;
max-width: 24rem;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
height: 100%;
}
.card-header {
margin: 0;
border-radius: 0.5rem 0.5rem 0 0;
padding: .8rem;
font-size: large;
font-weight: 700;
}
.card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 1.2rem;
}
.card-body h3 {
margin: 0 0 8px 0;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.75rem;
}
.contact-info div {
display: flex;
flex-direction: column;
gap: 5px;
}

.card.dark-mode {
Expand Down Expand Up @@ -774,19 +807,19 @@ form {
margin-top: 0;
}
.np {
background-color: seaGreen;
background-color: var(--membershipNP);
color: var(--text-color-secondary);
}
.bronze {
background-color: #cd7f32;
background-color: var(--membershipBronze);
color: var(--text-color-secondary);
}
.silver {
background-color: #c0c0c0;
background-color: var(--membershipSilver);
color: var(--text-color-main);
}
.gold {
background-color: #ffd700;
background-color: var(--membershipGold);
color: var(--text-color-main);
}

Expand Down

0 comments on commit 9c39ca8

Please sign in to comment.