github-api/index.html at main · arin-r/github-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Information</title>
    <style>
      body {
        font-family: "Courier New", Courier, monospace;
        background-color: #0093e9;
        background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
        text-align: center;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
      }

      h1 {
        margin-bottom: 20px;
      }

      label {
        font-size: 18px;
        margin-bottom: 5px;
      }

      input {
        padding: 8px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        font-family: "Courier New", Courier, monospace;
      }

      button {
        padding: 8px 16px;
        font-size: 16px;
        background-color: #18181b;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background-color: #2f2f31;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 800px; /* Set a maximum width for the container */
        width: 90%; /* Set a width to make it responsive */
        margin: auto; /* Center the container */
      }
      .info {
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: left;
        font-family: "Courier New", Courier, monospace;
        display: none; /* Hide by default */
        width: 50%;
      }

      p {
        font-size: 18px;
        margin: 10px 0;
      }

      strong {
        font-weight: bold;
      }
      .search_bar {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      @media screen and (max-width: 600px) {
        /* Adjustments for smaller screens */

        .info {
          width: 80%; /* Adjust the width of the info div */
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GitHub Stalker</h1>

      <div>
        <label class="strong" for="usernameInput"
          ><strong>Enter GitHub Username:</strong></label
        >
      </div>
      <div class="search_bar">
        <input type="text" id="usernameInput" placeholder="GitHub Username" />
        <button onclick="fetchGitHubInfo()">Get Info</button>
      </div>

      <div class="info">
        <p><strong>Username:</strong> <span id="username"></span></p>
        <p>
          <strong>Public Repositories:</strong> <span id="publicRepos"></span>
        </p>
        <p><strong>Followers:</strong> <span id="followers"></span></p>
        <p><strong>Following:</strong> <span id="following"></span></p>
      </div>
    </div>

    <script>
      function fetchGitHubInfo() {
        // Get GitHub username from input field
        const githubUsername = document.getElementById("usernameInput").value;

        // GitHub API endpoint for user information
        const apiUrl = `https://api.github.com/users/${githubUsername}`;

        // Fetch data from GitHub API
        fetch(apiUrl)
          .then((response) => response.json())
          .then((data) => {
            // Update HTML with GitHub information
            document.getElementById("username").innerText = data.login;
            document.getElementById("publicRepos").innerText =
              data.public_repos;
            document.getElementById("followers").innerText = data.followers;
            document.getElementById("following").innerText = data.following;

            // Show the information div
            document.querySelector(".info").style.display = "block";
          })
          .catch((error) => console.error("Error fetching data:", error));
      }
    </script>
  </body>
</html>