GitHub存储库地址
最近为了过一张全栈学习路线的检查点,随便写了一个网页的Demo出来

路线图网址

// Get Username activities
async function getUserActivities(username) {
    try {
        //fetch repos
        const response = await fetch(`https://api.github.com/users/${username}/repos`, {
            headers: {
                'Accept': 'application/vnd.github.v3+json'
            }
        });

        //check response
        if (!response.ok) {
            throw new Error(`视奸失败!Github朝你扔过来了一个${response.status}`);
        }

        //Parse data
        const repos = await response.json();
        const langs = {};

        repos.forEach(repo => {
            const lang = repo.language;
            if (lang) {
                langs[lang] = (langs[lang] || 0) + 1;
            }
        });

        //A magic algorithm
        return Object.entries(langs).sort((a, b) => b[1] - a[1]);
    } catch (e) {
        console.log(e);
    }
}

//form action
document.getElementById('search-form').addEventListener('submit', async function (event) {
    event.preventDefault();

    const username = this.querySelector('input').value;
    if (!username) return;

    const rankDir = document.getElementById('rank');
    rankDir.innerHTML = '';

    try {
        const sortedLangs = await getUserActivities(username);
        sortedLangs.forEach(([lang, count]) => {
            rankDir.insertAdjacentHTML('beforeend',
                `<div class="bg-white m-2 p-1">
                    <span>${username} 的所有存储库中主要使用了 ${count} 次 ${lang}</span>
                </div>`
            );
        });
    } catch (e) {
        console.error(e);
    }
})

逻辑很简单, 就是从HTML表单中拿取username, 然后匿名与GitHubApi交互, 拿到的数据经过字典排序, 按顺序输出在HTML里就行了, 我的想在后面的更新中, 把一个用户所有的信息都盒完, 然后制成不同游戏风格的战绩统计图🤔
如果大家有更多可实现的想法可以说一声, 或者直接一起来参与制作, 唉, 又幻想了, 幻想有人能来一起制作乐子