diff --git a/assets/js/contributors.js b/assets/js/contributors.js index c256dc6f..621c8b1d 100644 --- a/assets/js/contributors.js +++ b/assets/js/contributors.js @@ -44,16 +44,38 @@ async function fetchAllContributors() { return contributors; } +function animateCount(element, target, duration = 1000) { + let start = 0; + const increment = target / (duration / 16); // Calculates increment + + function updateCount() { + start += increment; + if (start < target) { + element.innerText = Math.floor(start); + requestAnimationFrame(updateCount); + } else { + element.innerText = target; // Ensure final value is exact + } + } + + updateCount(); +} + // Render stats like total contributions, stars, forks, etc. function renderStats(repoData, contributors) { const statsGrid = document.getElementById("statsGrid"); statsGrid.innerHTML = ` -

${contributors.length}

Contributors

-

${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}

Total Contributions

-

${repoData.stargazers_count}

GitHub Stars

-

${repoData.forks_count}

Forks

+

${contributors.length}

Contributors

+

${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}

Total Contributions

+

${repoData.stargazers_count}

GitHub Stars

+

${repoData.forks_count}

Forks

`; + // Apply counting animation to each stat + animateCount(document.getElementById("contributor-count"), contributors.length); + animateCount(document.getElementById("total-contributions"), contributors.reduce((sum, { contributions }) => sum + contributions, 0)); + animateCount(document.getElementById("stars-count"), repoData.stargazers_count); + animateCount(document.getElementById("forks-count"), repoData.forks_count); } // Render the list of contributors