From a085897343f3b49c87a60d7efb76785815100bc5 Mon Sep 17 00:00:00 2001 From: Abhinav Chauhan Date: Fri, 17 Oct 2025 00:16:03 +0530 Subject: [PATCH] feat(creators): add hardcoded creators list with carousel UI Added an initial hardcoded list of creators and implemented a carousel for navigation. Skipped dynamic population of PR mergers from GitHub API for now, since it requires multiple API requests and was hitting rate limits. --- app.js | 123 +++--- index.html | 99 ++++- main.css | 1069 +++++++++++++++++++++++++++------------------------- 3 files changed, 722 insertions(+), 569 deletions(-) diff --git a/app.js b/app.js index f69dbfa..0286b33 100644 --- a/app.js +++ b/app.js @@ -1,67 +1,70 @@ -'use strict'; +"use strict"; // load more content function loadMore() { - const paragraphs = document.querySelectorAll('#projects_items .load_more'); + const paragraphs = document.querySelectorAll("#projects_items .load_more"); for (let i = 0; i < paragraphs.length; i++) { - paragraphs[i].classList.add('show'); + paragraphs[i].classList.add("show"); } - const hr = document.querySelectorAll('.line_hr'); + const hr = document.querySelectorAll(".line_hr"); for (let i = 0; i < hr.length; i++) { - hr[i].classList.add('sh'); + hr[i].classList.add("sh"); } - document.getElementById('load-more-button').style.display = 'none'; - document.getElementById('hide-button').style.display = 'block'; + 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'); + const paragraphs = document.querySelectorAll("#projects_items .load_more"); for (let i = 0; i < paragraphs.length; i++) { - paragraphs[i].classList.remove('show'); + paragraphs[i].classList.remove("show"); } - const hr = document.querySelectorAll('.line_hr'); + const hr = document.querySelectorAll(".line_hr"); for (let i = 0; i < hr.length; i++) { - hr[i].classList.remove('sh'); + hr[i].classList.remove("sh"); } - document.getElementById('load-more-button').style.display = 'block'; - document.getElementById('hide-button').style.display = 'none'; + 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"; +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, - }; - })); + 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 > div > div"); + 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'; + + authors.forEach((author) => { + const personDiv = document.createElement("div"); + personDiv.className = "person"; personDiv.innerHTML = `
@@ -70,36 +73,44 @@ async function setAuthors(apiURL) {
-

${author.bio || 'No biography available'}

+

${ + author.bio || "No biography available" + }

`; 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 => ` + element.innerHTML = + contributors.length === 0 + ? "No developers found" + : contributors + .map( + (contributor) => ` ${contributor.name}'s avatar ${contributor.name} - `).join(''); + ` + ) + .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 😅"; + 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 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'); + const toTopButton = document.getElementById("toTop"); if (!toTopButton) return; - window.addEventListener('scroll', () => { + window.addEventListener("scroll", () => { if (window.scrollY > 100) { - toTopButton.style.display = 'block'; + toTopButton.style.display = "block"; } else { - toTopButton.style.display = 'none'; + toTopButton.style.display = "none"; } }); - toTopButton.addEventListener('click', (e) => { + toTopButton.addEventListener("click", (e) => { e.preventDefault(); window.scrollTo({ top: 0, - behavior: 'smooth' + 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" }); + }); +} + // Wait for DOM content to be loaded before executing scripts -document.addEventListener('DOMContentLoaded', () => { - setAuthors(members_url).catch(console.error); +document.addEventListener("DOMContentLoaded", async () => { loadAllContributors(); + initCarousel(); setupScrollToTop(); -}); \ No newline at end of file +}); diff --git a/index.html b/index.html index 561d744..3badee5 100644 --- a/index.html +++ b/index.html @@ -511,13 +511,13 @@

MFBT

Our Mission

-
- We are committed to making our community a welcoming space for everyone. - Whether you're a seasoned developer, a beginner, or just curious, - you're welcome here! We dedicated to fostering growth, collaboration, - and continuous learning. Our mission is to cultivate an environment - where individuals support each other in developing exceptional programs - and expanding their knowledge. +
+ We are committed to making our community a welcoming space for everyone. + Whether you're a seasoned developer, a beginner, or just curious, + you're welcome here! We dedicated to fostering growth, collaboration, + and continuous learning. Our mission is to cultivate an environment + where individuals support each other in developing exceptional programs + and expanding their knowledge.

Our Values

@@ -540,18 +540,88 @@

Our Values

-
+
-
-

Creators

-
- +
+

Creators

+
+ +
+ +
+
+ + Unarokov Astemir's avatar +

Unarokov Astemir

+ +
+

+ ✋ Hi, I’m Astemir. I’m a web developer who is creating a lot of interesting things. + I can work on front-end part and also on back-end part of the application. +

+
+ +
+
+ + Irina Kogai's avatar +

Irina Kogai

+ +
+

Full-Stack Software Engineer & Engineering Manager

+
+ +
+
+ + Minerva Bot's avatar +

Minerva Bot

+ +
+

A helpful bot

+
+ +
+
+ + Sofia Mikhalevich's avatar +

Sofia Mikhalevich

+ +
+

Web developer with skills in illustrating and design

+
+ +
+
+ + Andrey's avatar +

Andrey

+
+

+ An ordinary man with extraordinary ideas. + Also like home-made pizza +

+ +
+
+ + Yurij Mikhalevich's avatar +

Yurij Mikhalevich

+ +
+

No biography available

+
+ +
+ +
+
- +
@@ -594,8 +664,7 @@

Join us

- -