feat: add hardcoded creators list with carousel UI #80
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,67 +1,70 @@ | ||||||||||
| "use strict"; | ||||||||||
|
|
||||||||||
| // load more content | ||||||||||
| function loadMore() { | ||||||||||
| const paragraphs = document.querySelectorAll("#projects_items .load_more"); | ||||||||||
| for (let i = 0; i < paragraphs.length; i++) { | ||||||||||
| paragraphs[i].classList.add("show"); | ||||||||||
| } | ||||||||||
| const hr = document.querySelectorAll(".line_hr"); | ||||||||||
| for (let i = 0; i < hr.length; i++) { | ||||||||||
| hr[i].classList.add("sh"); | ||||||||||
| } | ||||||||||
| document.getElementById("load-more-button").style.display = "none"; | ||||||||||
| document.getElementById("hide-button").style.display = "block"; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| function hide() { | ||||||||||
| const paragraphs = document.querySelectorAll("#projects_items .load_more"); | ||||||||||
| for (let i = 0; i < paragraphs.length; i++) { | ||||||||||
| paragraphs[i].classList.remove("show"); | ||||||||||
| } | ||||||||||
| const hr = document.querySelectorAll(".line_hr"); | ||||||||||
| for (let i = 0; i < hr.length; i++) { | ||||||||||
| hr[i].classList.remove("sh"); | ||||||||||
| } | ||||||||||
| document.getElementById("load-more-button").style.display = "block"; | ||||||||||
| document.getElementById("hide-button").style.display = "none"; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| const members_url = | ||||||||||
| "https://api.github.com/orgs/move-fast-and-break-things/members"; | ||||||||||
|
|
||||||||||
| // fetch authors data | ||||||||||
| async function getAuthors(apiURL) { | ||||||||||
| const response = await fetch(apiURL); | ||||||||||
| if (!response.ok) { | ||||||||||
| throw new Error(`HTTP error! status: ${response.status}`); | ||||||||||
| } | ||||||||||
| const data = await response.json(); | ||||||||||
| return Promise.all( | ||||||||||
| data.map(async (element) => { | ||||||||||
| const userResponse = await fetch(element.url); | ||||||||||
| if (!userResponse.ok) { | ||||||||||
| throw new Error(`HTTP error! status: ${userResponse.status}`); | ||||||||||
| } | ||||||||||
| const userData = await userResponse.json(); | ||||||||||
| return { | ||||||||||
| name: userData.name || userData.login, | ||||||||||
| bio: userData.bio, | ||||||||||
| avatar: userData.avatar_url, | ||||||||||
| html_url: userData.html_url, | ||||||||||
| }; | ||||||||||
| }) | ||||||||||
| ); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| // set authors in the DOM | ||||||||||
| async function setAuthors(apiURL) { | ||||||||||
| const authors = await getAuthors(apiURL); | ||||||||||
| const container = document.querySelector("#creators .persons"); | ||||||||||
| if (!container) { | ||||||||||
| throw new Error("Container element not found"); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| authors.forEach((author) => { | ||||||||||
| const personDiv = document.createElement("div"); | ||||||||||
| personDiv.className = "person"; | ||||||||||
| personDiv.innerHTML = ` | ||||||||||
| <div class="name_and_img"> | ||||||||||
| <a href="${author.html_url}" class="tooltip" target="_blank"> | ||||||||||
|
|
@@ -70,36 +73,44 @@ async function setAuthors(apiURL) { | |||||||||
| </a> | ||||||||||
| </div> | ||||||||||
|
|
||||||||||
| <p class="about_person">${ | ||||||||||
| author.bio || "No biography available" | ||||||||||
| }</p> | ||||||||||
| `; | ||||||||||
| container.appendChild(personDiv); | ||||||||||
| }); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| // set contributors in the DOM | ||||||||||
| async function setContributors(apiURL, element) { | ||||||||||
| try { | ||||||||||
| const contributors = await getAuthors(apiURL); | ||||||||||
| element.innerHTML = | ||||||||||
| contributors.length === 0 | ||||||||||
| ? "No developers found" | ||||||||||
| : contributors | ||||||||||
| .map( | ||||||||||
| (contributor) => ` | ||||||||||
| <span class="developer-name"> | ||||||||||
| <a href="${contributor.html_url}" class="tooltip" target="_blank"> | ||||||||||
| <img src="${contributor.avatar}" alt="${contributor.name}'s avatar" class="shining-image"> | ||||||||||
| <span class="tooltip-text">${contributor.name}</span> | ||||||||||
| </a> | ||||||||||
| </span> | ||||||||||
| ` | ||||||||||
| ) | ||||||||||
| .join(""); | ||||||||||
| } catch (error) { | ||||||||||
| console.error("Error setting contributors:", error); | ||||||||||
| element.innerHTML = | ||||||||||
| "Can't load the developer list. Check out the repository page to see all of the contributors 😅"; | ||||||||||
| } | ||||||||||
| } | ||||||||||
|
|
||||||||||
| // load all contributors | ||||||||||
| async function loadAllContributors() { | ||||||||||
| const developerLists = document.querySelectorAll(".developers-list"); | ||||||||||
| const promises = Array.from(developerLists).map((devList) => { | ||||||||||
| const apiURL = devList.getAttribute("data-value"); | ||||||||||
| return setContributors(apiURL, devList); | ||||||||||
| }); | ||||||||||
|
|
@@ -108,29 +119,45 @@ async function loadAllContributors() { | |||||||||
|
|
||||||||||
| // Scroll-to-top functionality | ||||||||||
| function setupScrollToTop() { | ||||||||||
| const toTopButton = document.getElementById("toTop"); | ||||||||||
| if (!toTopButton) return; | ||||||||||
|
|
||||||||||
| window.addEventListener("scroll", () => { | ||||||||||
| if (window.scrollY > 100) { | ||||||||||
| toTopButton.style.display = "block"; | ||||||||||
| } else { | ||||||||||
| toTopButton.style.display = "none"; | ||||||||||
| } | ||||||||||
| }); | ||||||||||
|
|
||||||||||
| toTopButton.addEventListener("click", (e) => { | ||||||||||
| e.preventDefault(); | ||||||||||
| window.scrollTo({ | ||||||||||
| top: 0, | ||||||||||
| behavior: "smooth", | ||||||||||
| }); | ||||||||||
| }); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| function initCarousel() { | ||||||||||
| const persons = document.querySelector(".persons"); | ||||||||||
| const nextBtn = document.querySelector(".carousel-btn.next"); | ||||||||||
| const prevBtn = document.querySelector(".carousel-btn.prev"); | ||||||||||
|
|
||||||||||
| if (!persons || !nextBtn || !prevBtn) return; | ||||||||||
|
|
||||||||||
| nextBtn.addEventListener("click", () => { | ||||||||||
| persons.scrollBy({ left: 260, behavior: "smooth" }); | ||||||||||
| }); | ||||||||||
|
|
||||||||||
| prevBtn.addEventListener("click", () => { | ||||||||||
| persons.scrollBy({ left: -260, behavior: "smooth" }); | ||||||||||
|
There was a problem hiding this comment. The scroll distance of -260 pixels is a magic number. Consider extracting this to a named constant (e.g., |
||||||||||
| }); | ||||||||||
| } | ||||||||||
|
|
||||||||||
| // Wait for DOM content to be loaded before executing scripts | ||||||||||
| document.addEventListener("DOMContentLoaded", async () => { | ||||||||||
| loadAllContributors(); | ||||||||||
|
There was a problem hiding this comment. The event listener callback is marked as
Suggested change
Member
There was a problem hiding this comment. I agree that it makes sense to remove Also, it could make sense to add
Suggested change
|
||||||||||
| initCarousel(); | ||||||||||
| setupScrollToTop(); | ||||||||||
| }); | ||||||||||
|
Member
There was a problem hiding this comment. I see that it doesn't look good on mobile screens. Can you please fix this? 
Member
There was a problem hiding this comment. Another issue is that clicking the left button when the carousel is in the leftmost position does nothing. Let's either disable/hide the button when the carousel is in the leftmost position or make the carousel cyclic and infinite. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The scroll distance of 260 pixels is a magic number. Consider extracting this to a named constant (e.g.,
SCROLL_DISTANCE) to improve maintainability and make it easier to adjust the scroll behavior.