This project is a simple web application that allows users to retrieve and display GitHub user information and repositories. It utilizes the GitHub API to fetch user details and repositories based on the provided GitHub username. The user interface is designed to be user-friendly, with features like pagination and the ability to customize the number of repositories displayed per page.
HTML/CSS/JavaScript: The project is built using the trio of fundamental web technologies for creating interactive and responsive user interfaces.
Bootstrap 4: The popular CSS framework is used for styling and layout to ensure a clean and consistent design.
Font Awesome: Icons from Font Awesome are employed for visual elements, such as the map marker icon in user location.
GitHub API: The project leverages the GitHub API to fetch user information and repositories dynamically.
1. User Input Users can input a GitHub username in the designated form field.
2. Fetch User Data Upon clicking the "Get Repositories" button, the application fetches user information using the GitHub API.
3. Display User Info User information, including avatar, username, bio, and location, is displayed prominently.
4. Fetch Repositories The application then fetches the repositories associated with the provided username.
5. Display Repositories Each repository is presented in a card format, showing details like name, description, topics, and language.
6. Pagination The repositories are paginated, allowing users to navigate through multiple pages.
7. Customizable Repositories per Page Users can select the number of repositories to display per page from a dropdown menu.
![image](https://private-user-images.githubusercontent.com/90563881/297775142-20c2763d-fbef-404a-94f9-0c3ce647ee85.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE5OTc2NTUsIm5iZiI6MTcyMTk5NzM1NSwicGF0aCI6Ii85MDU2Mzg4MS8yOTc3NzUxNDItMjBjMjc2M2QtZmJlZi00MDRhLTk0ZjktMGMzY2U2NDdlZTg1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI2VDEyMzU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5MDA2NGI2MWNiYmQyY2I0NjA2ZWMzMTJiMmM0NTNhNGExOGVkOTYxYzMzYTNlY2EzMDU5MDg0YjgyNDg3MDYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.KfjoHYVMw1xtiOG6dFVTMXxNtATh91EOxTTowix7S3g)
To run the application locally, follow these steps:
-
Clone the repository: git clone repo_link
-
Open the index.html file in a web browser.
Keep Learning