A web application that analyzes and visualizes the programming language distribution across all repositories of any GitHub user or organization.

Features

• User & Organization Analysis: Analyze repositories for both individual GitHub users and organizations
• Visual Data Representation: Toggle between bar chart and pie chart views for language distribution
• Detailed Statistics: View comprehensive language statistics with percentages and byte counts
• Profile Information: Display user/organization profile with avatar, bio, and repository count
• Repository Summary: Get insights into the analyzed repositories
• Real-time Updates: Refresh button to update the analysis with latest data
• Responsive Design: Clean, modern UI that works across different screen sizes

Project Structure

githublanganaliser/
├── index.html      # Main HTML structure
├── app.js          # JavaScript application logic
└── style.css       # Styling and layout

Files

• index.html - Contains the UI structure with form inputs, chart container, and results sections
• app.js - Handles GitHub API interactions, data processing, and chart rendering
• style.css - Provides styling for all UI components

Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with custom properties
• JavaScript (ES6+): Application logic and API interactions
• Chart.js: Data visualization library for creating interactive charts
• GitHub REST API: Fetching repository and language data

Usage

1. Open index.html in a web browser
2. Enter a GitHub username or organization name in the input field
3. Check the "This is an organization" checkbox if analyzing an organization
4. Click the "Analyze" button
5. View the results including:
   • Profile information
   • Language distribution chart (toggle between bar/pie chart)
   • Detailed language statistics
   • Repository summary

Features in Detail

Input Form

• Text input for GitHub username/organization
• Checkbox to specify if the target is an organization
• Analyze button with loading state

Results Display

• Profile Section: Avatar, name, bio, repository count, and last updated timestamp
• Language Analysis: Interactive charts showing language distribution with toggle between bar and pie chart views
• Language Statistics: Detailed list of languages with percentages
• Repository Summary: Overview of analyzed repositories

Error Handling

• User-friendly error messages displayed when issues occur
• Validates input and API responses

API Integration

The application uses the GitHub REST API to fetch:

• User/Organization profile data
• Repository lists
• Language data for each repository

Browser Compatibility

Works in all modern browsers that support:

• ES6+ JavaScript features
• CSS Grid and Flexbox
• HTML5 Canvas (for Chart.js)

Setup

No build process required. Simply:

1. Clone or download the repository
2. Open index.html in a web browser
3. Start analyzing!

You can access website by clicling this link

https://harshit4847.github.io/githublanganaliser/

Note

This application makes unauthenticated requests to the GitHub API, which has rate limits (60 requests per hour per IP address). For higher rate limits, you would need to add GitHub API token authentication in app.js.