Skip to content

Commit

Permalink
Merge pull request #97 from shawaiz-khan/contributor-count
Browse files Browse the repository at this point in the history
Contributor count
  • Loading branch information
JollyJolli authored Oct 15, 2024
2 parents 63f19e1 + 7b2df80 commit 7d277e2
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 44 deletions.
19 changes: 18 additions & 1 deletion src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const modal = document.querySelector(".modal");
const modalWrapper = document.querySelector(".modal-wrapper");
const modalContent = document.querySelector(".modal-content");
const modalClose = document.querySelector(".close-modal-button");
const contributerCount = document.querySelector(".total-contributors");

modalClose.addEventListener("click", closeModal);

Expand All @@ -29,16 +30,32 @@ async function loadContributors() {
}

contributors = await response.json();

// Count the contributors
const count = countItems(contributors);
console.log(`Number of contributors: ${count}`);

contributerCount.textContent = `Total: ${count}`;

cachedContributors = contributors;
} catch (error) {
console.error("Error loading contributors:", error);
alert("Error loading contributors: " + error.message);
alert(
"Oops! Something went wrong while loading the contributors. Please try again later.\n\n" +
"Error details: " +
error.message
);
} finally {
hideLoadingScreen();
}

return contributors;
}

// Helper function to count items in an object or array
function countItems(obj) {
return Array.isArray(obj) ? obj.length : Object.keys(obj).length;
}

function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
Expand Down
90 changes: 48 additions & 42 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@

<!-- SEO Meta Tags -->
<title>HacktoberWall | Join Hacktoberfest & Contribute!</title>
<meta name="description"
content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta name="description" content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta name="keywords" content="HacktoberWall, Hacktoberfest, open source, contribute, coding, developers" />

<!-- Open Graph Meta Tags for Social Media Sharing -->
<meta property="og:title" content="HacktoberWall | Join Hacktoberfest & Contribute!" />
<meta property="og:description"
content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta property="og:description" content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta property="og:image" content="/img/logo.png" />
<meta property="og:url" content="https://hacktoberwall.formen.cc/" />
<meta property="og:type" content="website" />
Expand All @@ -27,8 +25,7 @@
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="/img/logo.png" />
<meta name="twitter:title" content="HacktoberWall | Join Hacktoberfest & Contribute!" />
<meta name="twitter:description"
content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta name="twitter:description" content="Contribute to Hacktoberfest by editing the HacktoberWall mural and become part of the open-source community!" />
<meta name="twitter:image" content="/img/logo.png" />
<meta name="twitter:image:alt" content="Hacktoberfest Logo" />

Expand Down Expand Up @@ -88,9 +85,11 @@
0% {
right: -150px;
}

50% {
right: 50%;
}

100% {
right: 100%;
}
Expand All @@ -113,9 +112,11 @@
0% {
left: -150px;
}

50% {
left: 50%;
}

100% {
left: 110%;
}
Expand Down Expand Up @@ -161,55 +162,60 @@
<div id="speechBubble">Happy Hacktoberfest!</div>
</div>

<main class="container">
<section class="wall-section">
<h2>Participants</h2>
<main class="container">
<section class="wall-section">
<h2>Participants</h2>
<div class="main-search-container">
<div class="search-sort-container">
<!-- Search Contributors -->
<div class="search-container">
<input
type="text"
id="searchInput"
placeholder="Search contributors..."
aria-label="Search contributors"
tabindex="0"
/>
<button id="searchButton" aria-label="Search contributors" tabindex="0">
<i class="fas fa-search" aria-hidden="true"></i>
Search
</button>
<input
type="text"
id="searchInput"
placeholder="Search contributors..."
aria-label="Search contributors"
tabindex="0"
/>
<button id="searchButton" aria-label="Search contributors" tabindex="0">
<i class="fas fa-search" aria-hidden="true"></i>
Search
</button>
</div>

<!-- Sort Contributors -->
<div class="sort-container">
<label for="sortSelect" aria-label="Sort contributors by name">Sort:</label>
<select id="sortSelect" class="sort-select">
<option value="none" selected>Sort By</option>
<option value="asc">A-Z</option>
<option value="desc">Z-A</option>
<option value="none" selected>Sort By</option>
<option value="asc">A-Z</option>
<option value="desc">Z-A</option>
</select>
</div>
</div>


<div id="wall" class="wall" role="region" aria-live="polite" aria-label="List of contributors"></div>
<div id="paginationWrapper" class="pagination"></div>
</section>

<!-- Modal for funFacts-->
<div class="modal hidden" aria-hidden="true" role="dialog" aria-labelledby="title-modal-1">
<div class="modal-wrapper">
<a href="#" class="close-modal-button" aria-label="Close modal" title="Close modal"><i
class="fa-solid fa-xmark"></i></a>
<h2 class="modal-title">Fun Facts</h2>
<blockquote class="modal-content"></blockquote>
</div>
</div>

<!-- Contributor Count -->
<div class="total-contributors">Total: 0</div>
</div>
</main>

<!-- Contributor Wall -->
<div id="wall" class="wall" role="region" aria-live="polite" aria-label="List of contributors"></div>
<div id="paginationWrapper" class="pagination"></div>
</section>

<!-- Modal for funFacts -->
<div class="modal hidden" aria-hidden="true" role="dialog" aria-labelledby="title-modal-1">
<div class="modal-wrapper">
<a href="#" class="close-modal-button" aria-label="Close modal" title="Close modal"><i class="fa-solid fa-xmark"></i></a>
<h2 class="modal-title">Fun Facts</h2>
<blockquote class="modal-content"></blockquote>
</div>
</div>
</main>

<footer>
<p>
Contribute at
<a href="https://github.com/JollyJolli/HacktoberWall" target="_blank"
aria-label="Visit HacktoberWall GitHub Repository" tabindex="0">GitHub</a>
<a href="https://github.com/JollyJolli/HacktoberWall" target="_blank" aria-label="Visit HacktoberWall GitHub Repository" tabindex="0">GitHub</a>
</p>
</footer>

Expand All @@ -220,4 +226,4 @@ <h2 class="modal-title">Fun Facts</h2>
<script src="app.js"></script>
</body>

</html>
</html>
15 changes: 14 additions & 1 deletion src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,27 @@ header {
transition: all 0.3s ease;
width: 100%;
max-width: 500px;
margin: 1rem auto;
margin: 1rem 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

background: rgba(255, 255, 255, 0.267);
backdrop-filter: blur(4.5px);
-webkit-backdrop-filter: blur(4.5px);
}

.main-search-container {
display: flex;
gap: 5px;
width: 100%;
align-items: center;
justify-content: center;
}

.total-contributors {
color: black;
font-size: 1.2rem;
}

.dark-mode .search-container {
background-color: rgba(255, 139, 255, 0.1);
/* Light pink for dark mode */
Expand Down

0 comments on commit 7d277e2

Please sign in to comment.