Complete Fix Bugs in Open Source Projects
This commit is contained in:
Deepak Kumar
@@ -2,20 +2,52 @@
|
||||
|
||||
## Description
|
||||
|
||||
A brief description of the fix bugs in open source projects project.
|
||||
This project aims to provide a platform that allows developers to easily find, track, and fix bugs in open-source repositories. Users can search for repositories, view issues reported in those repositories, and contribute fixes to resolve them. The project focuses on enhancing collaboration between contributors and maintainers, streamlining bug tracking, and making it easier to contribute to open-source projects.
|
||||
|
||||
## Features
|
||||
|
||||
- Feature 1
|
||||
- Feature 2
|
||||
- Feature 3
|
||||
- **Bug Tracking**: Provides an intuitive interface for finding, tracking, and fixing bugs in open-source repositories. Users can view detailed issues with status updates.
|
||||
- **Collaboration Tools**: Seamless communication between contributors and repository maintainers. Features like issue comments, status updates, and labels ensure smooth collaboration.
|
||||
- **Code Review System**: Once a fix is proposed, the code undergoes a review process to ensure quality and consistency. This feature fosters quality contributions and helps maintain code standards.
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- JavaScript
|
||||
- HTML
|
||||
- CSS
|
||||
- **JavaScript**: Core language for the functionality of the platform.
|
||||
- **HTML**: Used for structuring the web pages and components.
|
||||
- **CSS**: Styling the platform, providing a clean, modern, and responsive design. It uses advanced CSS features like Flexbox and Grid for layout, along with hover effects and animations for better user experience.
|
||||
- **GitHub API**: Used to fetch real-time data from repositories for issues, pull requests, and other project details.
|
||||
|
||||
## Setup
|
||||
|
||||
Instructions to set up and run the project.
|
||||
### Prerequisites
|
||||
|
||||
1. **Git**: Ensure you have Git installed on your machine. If not, [download Git here](https://git-scm.com/).
|
||||
2. **Text Editor**: You can use any text editor (VS Code, Sublime Text, etc.) to edit the code.
|
||||
3. **Web Browser**: To view the platform and test its functionality.
|
||||
|
||||
### Installation Steps
|
||||
|
||||
1. **Clone the Repository**:
|
||||
- Open your terminal or command prompt.
|
||||
- Clone the repository using the following command:
|
||||
```bash
|
||||
git clone https://github.com/yourusername/fix-bugs-open-source.git
|
||||
```
|
||||
|
||||
2. **Navigate to the Project Folder**:
|
||||
```bash
|
||||
cd fix-bugs-open-source
|
||||
```
|
||||
|
||||
3. **Install Dependencies**:
|
||||
- This project doesn't have external dependencies as it is built using vanilla HTML, CSS, and JavaScript. You can open it directly in the browser.
|
||||
|
||||
4. **Open in Browser**:
|
||||
- Simply open the `index.html` file in your browser to view and interact with the platform.
|
||||
|
||||
5. **Running the Project Locally**:
|
||||
- After opening the project, you can start interacting with the platform by entering repository URLs (e.g., `owner/repo`) and fetching open issues.
|
||||
|
||||
### Notes:
|
||||
- **GitHub API Limitations**: If you are making too many requests to GitHub's API, you might encounter rate-limiting. To overcome this, consider using your own GitHub API token.
|
||||
- **Contributing**: You can fork the repository, create a branch, and submit a pull request for any improvements or bug fixes you'd like to contribute.
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fix Bugs in Open Source Projects</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Fix Bugs in Open Source Projects</h1>
|
||||
</header>
|
||||
|
||||
<section id="repo-search">
|
||||
<h2>Search Repository</h2>
|
||||
<form id="repoSearchForm">
|
||||
<label for="repoUrl">Enter Repository (e.g., owner/repo)</label>
|
||||
<input type="text" id="repoUrl" placeholder="e.g., facebook/react" required>
|
||||
<button type="submit">Search Issues</button>
|
||||
</form>
|
||||
<p id="error-message" class="hidden"></p>
|
||||
</section>
|
||||
|
||||
<section id="issue-list">
|
||||
<h2>Issues in Repository</h2>
|
||||
<div id="loading-indicator" class="hidden">Loading issues...</div>
|
||||
<ul id="issuesList"></ul>
|
||||
<p id="no-issues" class="hidden">No issues found in this repository.</p>
|
||||
</section>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
document.getElementById('repoSearchForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const repoUrl = document.getElementById('repoUrl').value.trim();
|
||||
|
||||
// Reset the state
|
||||
document.getElementById('error-message').classList.add('hidden');
|
||||
document.getElementById('issuesList').innerHTML = '';
|
||||
document.getElementById('loading-indicator').classList.remove('hidden');
|
||||
document.getElementById('no-issues').classList.add('hidden');
|
||||
|
||||
if (repoUrl) {
|
||||
fetchIssuesFromRepo(repoUrl);
|
||||
}
|
||||
});
|
||||
|
||||
function fetchIssuesFromRepo(repoUrl) {
|
||||
const [owner, repo] = repoUrl.split('/');
|
||||
|
||||
if (!owner || !repo) {
|
||||
showError('Please enter a valid GitHub repository (e.g., owner/repo).');
|
||||
return;
|
||||
}
|
||||
|
||||
const issuesUrl = `https://api.github.com/repos/${owner}/${repo}/issues`;
|
||||
|
||||
fetch(issuesUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Unable to fetch issues. Please check the repository URL.');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.length === 0) {
|
||||
showNoIssuesMessage();
|
||||
} else {
|
||||
displayIssues(data);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showError(error.message);
|
||||
});
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('loading-indicator').classList.add('hidden');
|
||||
document.getElementById('error-message').textContent = message;
|
||||
document.getElementById('error-message').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function showNoIssuesMessage() {
|
||||
document.getElementById('loading-indicator').classList.add('hidden');
|
||||
document.getElementById('no-issues').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function displayIssues(issues) {
|
||||
const issuesList = document.getElementById('issuesList');
|
||||
document.getElementById('loading-indicator').classList.add('hidden');
|
||||
|
||||
issues.forEach(issue => {
|
||||
const listItem = document.createElement('li');
|
||||
const statusClass = issue.state.toLowerCase();
|
||||
|
||||
// Add state-based class for color coding
|
||||
listItem.classList.add(statusClass);
|
||||
|
||||
listItem.innerHTML = `
|
||||
<div class="issue-status">${issue.state.charAt(0).toUpperCase() + issue.state.slice(1)}</div>
|
||||
<strong>${issue.title}</strong>
|
||||
<p>${issue.body ? issue.body.substring(0, 150) + '...' : 'No description available'}</p>
|
||||
<a href="${issue.html_url}" target="_blank">View on GitHub</a>
|
||||
<button class="fix-button" onclick="fixIssue('${issue.html_url}')">Fix Issue</button>
|
||||
`;
|
||||
|
||||
issuesList.appendChild(listItem);
|
||||
});
|
||||
}
|
||||
|
||||
function fixIssue(issueUrl) {
|
||||
window.open(issueUrl, '_blank');
|
||||
}
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
/* General Styles */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f7fc;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Search Form Styles */
|
||||
#repo-search {
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
width: 250px;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Issue List Styles */
|
||||
#issuesList {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin: 20px auto;
|
||||
max-width: 1100px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
#issuesList li {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#issuesList li:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.issue-status {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
padding: 6px 12px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
text-transform: capitalize;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#issuesList li.open .issue-status {
|
||||
background: linear-gradient(135deg, #00b0ff, #007bff); /* Blue gradient for open issues */
|
||||
}
|
||||
|
||||
#issuesList li.closed .issue-status {
|
||||
background: linear-gradient(135deg, #6c757d, #adb5bd); /* Gray gradient for closed issues */
|
||||
}
|
||||
|
||||
#issuesList li.in-progress .issue-status {
|
||||
background: linear-gradient(135deg, #ffc107, #ff9800); /* Yellow gradient for in-progress issues */
|
||||
}
|
||||
|
||||
#issuesList li a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#issuesList li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#issuesList li p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#issuesList li .fix-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#issuesList li .fix-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
#loading-indicator {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
#no-issues {
|
||||
text-align: center;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
#issuesList {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#repo-search input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user