The Palos Publishing Company

Categories We Write About

Create a GitHub issue reporter

Written by

Bernardo Palos

in

Here’s a simple GitHub Issue Reporter implemented in HTML and JavaScript. It allows users to submit issues to a public GitHub repository using the GitHub API (via fetch). You’ll need a GitHub personal access token to authorize the request if posting as an authenticated user (required for private repos or higher rate limits).

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GitHub Issue Reporter</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; }
    label { display: block; margin-top: 10px; }
    input, textarea { width: 100%; padding: 8px; margin-top: 5px; }
    button { margin-top: 15px; padding: 10px 20px; }
  </style>
</head>
<body>
  <h1>GitHub Issue Reporter</h1>
  <form id="issueForm">
    <label for="title">Issue Title</label>
    <input type="text" id="title" required>

    <label for="body">Description</label>
    <textarea id="body" rows="6" required></textarea>

    <label for="repo">Repository (e.g. username/repo)</label>
    <input type="text" id="repo" placeholder="your-username/repo-name" required>

    <label for="token">GitHub Token (optional)</label>
    <input type="password" id="token" placeholder="Personal Access Token (optional)">

    <button type="submit">Submit Issue</button>
  </form>

  <div id="response"></div>

  <script>
    document.getElementById('issueForm').addEventListener('submit', async (e) => {
      e.preventDefault();

      const title = document.getElementById('title').value;
      const body = document.getElementById('body').value;
      const repo = document.getElementById('repo').value;
      const token = document.getElementById('token').value;
      const responseEl = document.getElementById('response');

      const url = `https://api.github.com/repos/${repo}/issues`;

      const headers = {
        'Accept': 'application/vnd.github+json',
        'Content-Type': 'application/json',
      };

      if (token) headers['Authorization'] = `Bearer ${token}`;

      try {
        const res = await fetch(url, {
          method: 'POST',
          headers: headers,
          body: JSON.stringify({ title, body })
        });

        const data = await res.json();

        if (res.ok) {
          responseEl.innerHTML = `<p style="color:green;">Issue created: <a href="${data.html_url}" target="_blank">${data.title}</a></p>`;
        } else {
          responseEl.innerHTML = `<p style="color:red;">Error: ${data.message}</p>`;
        }
      } catch (error) {
        responseEl.innerHTML = `<p style="color:red;">Network error: ${error.message}</p>`;
      }
    });
  </script>
</body>
</html>

Features:

  • Allows optional authentication (for higher rate limits or private repos)

  • Reports errors and success messages

  • Clean and minimal interface

Note: GitHub’s API has rate limits for unauthenticated requests. For public usage without a token, users will be limited to 60 requests per hour per IP. For personal or private repos, a GitHub token is required.

Would you like a React or desktop app version too?

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About