Skip to content

Commit f3051d4

Browse files
Aloneking789Aloneking789
committed
Added Project Explorer
1 parent f5a5dc0 commit f3051d4

File tree

4 files changed

+333
-0
lines changed

4 files changed

+333
-0
lines changed

‎Project Explorer/README.MD‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
🌟 Dynamic GitHub Projects Viewer 🌟
2+
3+
📜 Project Overview
4+
5+
This project is a Dynamic GitHub Projects Viewer that allows users to search for GitHub repositories based on specific topics. It fetches the projects using the GitHub API and displays the results on the webpage, including details such as the repository name, description, and the number of pull requests. 🎯
6+
7+
📂 Project Files
8+
9+
index.html 🖥️: The main HTML file that structures the webpage and includes references to the CSS and JavaScript files.
10+
11+
style.css 🎨: The CSS file that styles the webpage, giving it a professional and clean look with a gradient background and responsive design.
12+
13+
script.js 💻: The JavaScript file responsible for the functionality, including fetching data from the GitHub API, displaying the search results, and managing the loading bar.
14+
15+
✨ Features
16+
17+
Responsive Design 📱: The webpage is fully responsive, making it accessible on both desktop and mobile devices.
18+
19+
Loading Bar 🚀: A dynamic loading bar is displayed at the top of the page during data fetching.
20+
21+
GitHub API Integration 🔗: The project fetches and displays repositories based on user input, including additional details like the number of pull requests.
22+
23+
Error Handling ⚠️: The script includes error handling for network issues or empty search queries.
24+
25+
🛠️ Usage
26+
27+
Search for Projects 🔍: Enter the desired topics in the search bar and click "Search Projects." The results will be displayed below.
28+
29+
View on GitHub 🔗: Each project result includes a link to view the repository directly on GitHub.
30+
31+
📝 Note
32+
33+
⚙️ No additional dependencies are required, as the project uses vanilla JavaScript for API calls.

‎Project Explorer/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Github Sorted</title>
7+
<!-- Include Font Awesome CDN for icons -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
<body>
12+
<header>
13+
<div class="container">
14+
<h1>Dynamic GitHub Projects</h1>
15+
<nav>
16+
<ul>
17+
<li><a href="#contact">Contact</a></li>
18+
<li><a href="#projects">Projects</a></li>
19+
<li><a href="#about">About</a></li>
20+
</ul>
21+
</nav>
22+
</div>
23+
</header>
24+
25+
<div class="container">
26+
<section id="heading">
27+
<h2>Search Projects</h2>
28+
</section>
29+
30+
<!-- Loading bar section -->
31+
<div id="loading-bar"></div>
32+
33+
<section id="search-bars">
34+
<form id="projectForm">
35+
<input type="text" id="topics" name="topics" placeholder="Enter topics...">
36+
<button type="submit">Search Projects</button>
37+
</form>
38+
</section>
39+
40+
<section id="projects">
41+
<h2>Search Results</h2>
42+
<div class="projects" id="projects-container">
43+
<!-- Project results will be displayed here -->
44+
</div>
45+
</section>
46+
</div>
47+
48+
<footer>
49+
<p>&copy; 2024 Amit Kumar Maurya</p>
50+
</footer>
51+
52+
<script src="./script.js"></script>
53+
</body>
54+
</html>

‎Project Explorer/script.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Define global variable to store project data
2+
let projectData = [];
3+
4+
// Wait for DOM content to be fully loaded
5+
document.addEventListener('DOMContentLoaded', function () {
6+
// Attach event listener for project search form submission
7+
document.getElementById('projectForm').addEventListener('submit', function (event) {
8+
event.preventDefault();
9+
const topics = document.getElementById('topics').value.trim();
10+
if (topics === '') {
11+
alert('Please enter topics to search for projects.');
12+
return;
13+
}
14+
fetchProjects(topics);
15+
});
16+
});
17+
18+
// Function to show loading bar
19+
function showLoadingBar() {
20+
const loadingBar = document.getElementById('loading-bar');
21+
loadingBar.style.transform = 'scaleX(1)';
22+
}
23+
24+
// Function to hide loading bar
25+
function hideLoadingBar() {
26+
const loadingBar = document.getElementById('loading-bar');
27+
loadingBar.style.transform = 'scaleX(0)';
28+
}
29+
30+
// Function to fetch projects based on topics
31+
async function fetchProjects(topics) {
32+
showLoadingBar();
33+
const apiUrl = `https://api.github.com/search/repositories?q=${topics}&per_page=50`;
34+
35+
try {
36+
const response = await fetch(apiUrl);
37+
if (!response.ok) {
38+
throw new Error('Network response was not ok');
39+
}
40+
const data = await response.json();
41+
projectData = await Promise.all(data.items.map(async project => {
42+
const prResponse = await fetch(project.pulls_url.replace('{/number}', ''));
43+
const prData = await prResponse.json();
44+
const prCount = prData.length;
45+
return { ...project, prCount };
46+
}));
47+
displayProjects(projectData);
48+
} catch (error) {
49+
console.error('Error fetching projects:', error);
50+
alert('Failed to fetch projects. Please try again later.');
51+
} finally {
52+
hideLoadingBar();
53+
}
54+
}
55+
56+
// Function to display projects in the UI
57+
function displayProjects(projects) {
58+
const resultsDiv = document.getElementById('projects-container');
59+
resultsDiv.innerHTML = '';
60+
projects.forEach(project => {
61+
const projectDiv = document.createElement('div');
62+
projectDiv.classList.add('project');
63+
64+
const title = document.createElement('h3');
65+
title.textContent = project.name;
66+
67+
const description = document.createElement('p');
68+
description.textContent = project.description || 'No description available';
69+
70+
const prCount = document.createElement('p');
71+
prCount.textContent = `Pull Requests: ${project.prCount}`;
72+
73+
const link = document.createElement('a');
74+
link.href = project.html_url;
75+
link.target = '_blank';
76+
link.textContent = 'View on GitHub';
77+
78+
projectDiv.appendChild(title);
79+
projectDiv.appendChild(description);
80+
projectDiv.appendChild(prCount);
81+
projectDiv.appendChild(link);
82+
83+
resultsDiv.appendChild(projectDiv);
84+
});
85+
}

‎Project Explorer/style.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100vh; /* Ensure the body takes at least the full viewport height */
5+
margin: 0;
6+
padding: 0;
7+
font-family: Arial, sans-serif;
8+
background: linear-gradient(to right, black, grey, white);
9+
background-repeat: no-repeat;
10+
background-attachment: fixed;
11+
color: #fff;
12+
}
13+
14+
header {
15+
background-color: #333;
16+
color: #fff;
17+
text-align: center;
18+
padding: 1rem 0;
19+
border-bottom: #77A6F7 3px solid;
20+
}
21+
22+
header .container {
23+
display: flex;
24+
justify-content: space-between;
25+
align-items: center;
26+
padding: 0 20px;
27+
}
28+
29+
header h1 {
30+
margin: 0;
31+
font-size: 1.5rem;
32+
}
33+
34+
header nav ul {
35+
padding: 0;
36+
list-style: none;
37+
display: flex;
38+
}
39+
40+
header nav ul li {
41+
margin-left: 40px;
42+
}
43+
44+
header nav ul li a {
45+
color: #fff;
46+
text-decoration: none;
47+
text-transform: uppercase;
48+
font-size: 16px;
49+
}
50+
51+
.container {
52+
width: 100%;
53+
max-width: 1200px;
54+
margin: auto;
55+
padding: 20px;
56+
flex: 1; /* Expand to fill remaining space */
57+
}
58+
59+
section {
60+
margin-bottom: 40px;
61+
}
62+
63+
form {
64+
display: flex;
65+
align-items: center;
66+
gap: 10px;
67+
margin-bottom: 20px;
68+
}
69+
70+
input[type="text"],
71+
button {
72+
padding: 10px;
73+
font-size: 1rem;
74+
border: 1px solid #ccc;
75+
border-radius: 4px;
76+
}
77+
78+
input[type="text"] {
79+
width: 100%; /* Make search bars take full width */
80+
max-width: 400px; /* Limit maximum width */
81+
}
82+
83+
button {
84+
background-color: #777;
85+
color: #fff;
86+
border: none;
87+
cursor: pointer;
88+
transition: background-color 0.3s ease;
89+
}
90+
91+
button:hover {
92+
background-color: #999;
93+
}
94+
.projects {
95+
display: flex;
96+
flex-wrap: wrap;
97+
gap: 40px;
98+
justify-content: space-around;
99+
}
100+
101+
.project {
102+
flex: 1 1 300px;
103+
padding: 15px;
104+
border: 1px solid #ccc;
105+
border-radius: 8px;
106+
background-color: #333;
107+
color: #fff;
108+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
109+
display: flex;
110+
flex-direction: column;
111+
justify-content: space-between;
112+
}
113+
114+
.project h3 {
115+
margin: 0;
116+
font-size: 1.2rem;
117+
}
118+
119+
.project p {
120+
margin: 10px 0 0;
121+
font-size: 1rem;
122+
overflow: hidden;
123+
text-overflow: ellipsis;
124+
display: -webkit-box;
125+
-webkit-line-clamp: 2;
126+
-webkit-box-orient: vertical;
127+
}
128+
129+
.project a {
130+
align-self: flex-end;
131+
text-decoration: none;
132+
color: #77A6F7;
133+
transition: color 0.3s ease;
134+
}
135+
136+
.project a:hover {
137+
color: #99c2f5;
138+
}
139+
140+
footer {
141+
margin-top: auto; /* Push the footer to the bottom */
142+
color: #fff;
143+
background-color: #333;
144+
text-align: center;
145+
position: relative;
146+
147+
}
148+
149+
/* Loading bar */
150+
#loading-bar {
151+
width: 100%;
152+
height: 4px;
153+
background-color: rgb(234, 159, 234);
154+
position: fixed;
155+
top: 0;
156+
left: 0;
157+
z-index: 1000;
158+
transform: scaleX(0);
159+
transform-origin: left;
160+
transition: transform 0.3s ease;
161+
}

0 commit comments

Comments
 (0)