Skip to content

Commit 49f86b5

Browse files
Harshit2012Harshit2012
authored
Add files via upload
1 parent 3d636df commit 49f86b5

4 files changed

Lines changed: 145 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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>RepoCosmos</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" href="logo.jpg">
10+
</head>
11+
<body>
12+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
13+
<div class="container-fluid">
14+
<a class="navbar-brand" href="#">RepoCosmos</a>
15+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
16+
<span class="navbar-toggler-icon"></span>
17+
</button>
18+
<div class="collapse navbar-collapse" id="navbarNav">
19+
<ul class="navbar-nav ms-auto">
20+
<li class="nav-item">
21+
<a class="nav-link active" aria-current="page" href="#">Home</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="#repoForm">Visualize</a>
25+
</li>
26+
</ul>
27+
</div>
28+
</div>
29+
</nav>
30+
<div class="container mt-5">
31+
<div class="jumbotron text-center">
32+
<h1 class="display-4">Welcome to RepoCosmos</h1>
33+
<p class="lead">Easily visualize your repo's stars and forks. Enter the repository details below to get started.</p>
34+
</div>
35+
<div class="row justify-content-center">
36+
<div class="col-md-6">
37+
<form id="repoForm">
38+
<div class="mb-3">
39+
<label for="username" class="form-label">GitHub Username</label>
40+
<input type="text" class="form-control" id="username" required>
41+
</div>
42+
<div class="mb-3">
43+
<label for="repository" class="form-label">Repository Name</label>
44+
<input type="text" class="form-control" id="repository" required>
45+
</div>
46+
<button type="submit" class="btn btn-primary">Visualize Forks & Stars</button>
47+
</form>
48+
</div>
49+
</div>
50+
<div class="mt-5">
51+
<canvas id="forksStarsChart"></canvas>
52+
<div class="text-center mt-3">
53+
<button id="downloadButton" class="btn btn-success">Download Chart</button>
54+
</div>
55+
</div>
56+
</div>
57+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
58+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
59+
<script src="main.js"></script>
60+
</body>
61+
</html>

‎logo.jpg‎

14.1 KB
Loading

‎main.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
document.getElementById('repoForm').addEventListener('submit', function(event) {
2+
event.preventDefault();
3+
const username = document.getElementById('username').value;
4+
const repository = document.getElementById('repository').value;
5+
6+
fetch(`https://api.github.com/repos/${username}/${repository}`)
7+
.then(response => response.json())
8+
.then(data => {
9+
const forks = data.forks_count;
10+
const stars = data.stargazers_count;
11+
12+
const ctx = document.getElementById('forksStarsChart').getContext('2d');
13+
if (window.forksStarsChart instanceof Chart) {
14+
window.forksStarsChart.destroy();
15+
}
16+
window.forksStarsChart = new Chart(ctx, {
17+
type: 'bar',
18+
data: {
19+
labels: ['Forks', 'Stars'],
20+
datasets: [{
21+
label: 'Count',
22+
data: [forks, stars],
23+
backgroundColor: [
24+
'rgba(54, 162, 235, 0.2)',
25+
'rgba(255, 206, 86, 0.2)'
26+
],
27+
borderColor: [
28+
'rgba(54, 162, 235, 1)',
29+
'rgba(255, 206, 86, 1)'
30+
],
31+
borderWidth: 1
32+
}]
33+
},
34+
options: {
35+
responsive: true,
36+
scales: {
37+
y: {
38+
beginAtZero: true,
39+
title: {
40+
display: true,
41+
text: 'Count'
42+
}
43+
},
44+
x: {
45+
title: {
46+
display: true,
47+
text: 'Metric'
48+
}
49+
}
50+
}
51+
}
52+
});
53+
})
54+
.catch(error => {
55+
console.error('Error fetching repository data:', error);
56+
});
57+
});
58+
59+
document.getElementById('downloadButton').addEventListener('click', function() {
60+
const link = document.createElement('a');
61+
link.href = window.forksStarsChart.toBase64Image();
62+
link.download = 'forks-stars-chart.png';
63+
link.click();
64+
});

‎style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
.jumbotron {
6+
background-color: #f8f9fa;
7+
padding: 2rem 1rem;
8+
border-radius: 0.3rem;
9+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
10+
}
11+
12+
#forksStarsChart {
13+
width: 80%;
14+
height: 500px;
15+
margin: 0 auto;
16+
}
17+
18+
#downloadButton {
19+
margin-top: 20px;
20+
}

0 commit comments

Comments
 (0)