index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub API toturial/practice</title>
</head>

<body>
    <h1>GitHub tutorial</h1>
    <!-- buttons -->
    <button id='btnRepos'>Repos</button>
    <button id='btnIssues'>Issues</button>
    <button id='btnCommits'>Commits</button>
    <!-- results -->
    <div style="border: 1px solid black;"id="divResult">
    </div>

    <!-- start of JS script -->
    <script>
        const btnRepos = document.getElementById("btnRepos")
        const btnIssues = document.getElementById("btnIssues")
        const btnCommits = document.getElementById("btnCommits")

        const divResult = document.getElementById("divResult")

        // events
        btnRepos.addEventListener("click", getRepos)
        btnIssues.addEventListener("click", getIssues)
        btnCommits.addEventListener("click", e=> getCommits())


        // start of functions
        // getRepos search start

        async function getRepos() {
            clear();
            // alert("testing boilerplate")
            const url = "https://api.github.com/search/repositories?q=stars:100000..600000"
            // stars being the parameter ":" is the separator for the parameter and its value, the 100000.
            const response = await fetch(url)
            const result = await response.json()
            // querystring vs resource parameter
            console.log(result)

            result.items.forEach(i => {


                const anchor = document.createElement("a")
                anchor.href = i.html_url;
                anchor.textContent = i.full_name;
                divResult.appendChild(anchor)
                divResult.appendChild(document.createElement("br"))

            })
        }
        // getRepos end
        // getIssues start
        async function getIssues() {
            clear();
            // alert("testing boilerplate")
            const url = "https://api.github.com/search/issues?q=author:raisedadead repo:freecodecamp/freecodecamp type:issue"
            // stars being the parameter ":" is the separator for the parameter and its value, the 100000.
            const response = await fetch(url)
            const result = await response.json()
            // querystring vs resource parameter
            // console.log(result)

            result.items.forEach(i => {


                const anchor = document.createElement("a")
                anchor.href = i.html_url;
                anchor.textContent = i.title;
                divResult.appendChild(anchor)
                divResult.appendChild(document.createElement("br"))

            })
        }
        // search issues end

        // section 3: Search commits
        //searchCommits start
        async function getCommits(url = "https://api.github.com/search/commits?q=repo:freecodecamp/freecodecamp author-date:2021-10-01..2021-10-05") {
            //we passed a default parameter for our url and gave it the value of the github api repo/commit search
            clear();
            // alert("testing boilerplate")
            const headers = {
                "Accept" : "application/vnd.github.cloak-preview"
            }
            const response = await fetch(url, {
                "method" : "GET",
                "headers" : headers
            })

            const link = response.headers.get("link")
            const links = link.split(",")
            const urls = links.map(a=> {
                return{
                    url: a.split(";")[0].replace(">","").replace("<",""),
                    title: a.split(";")[1]
                }
            })

            const result = await response.json()
            // querystring vs resource parameter
            // console.log(result)

            result.items.forEach(i => {

                const img = document.createElement("img")
                img.src = i.author.avatar_url;
                img.style.width="32px"
                img.style.height="32px"
                const anchor = document.createElement("a")
                anchor.href = i.html_url;
                anchor.textContent = i.commit.message.substr(0,80) + "...";
                divResult.appendChild(img)
                divResult.appendChild(anchor)
                divResult.appendChild(document.createElement("br"))

            })

            urls.forEach(u => {
                const btn = document.createElement("button")
                btn.textContent = u.title;
                btn.addEventListener("click", e=> getCommits(u.url))
                divResult.appendChild(btn)
            })

        }

        // clear function start
        function clear() {
            while (divResult.firstChild)
                divResult.removeChild(divResult.firstChild)
        }
        // clear function end







    </script>
</body>

</html>