-
Notifications
You must be signed in to change notification settings - Fork 0
/
scripts.js
111 lines (94 loc) · 4.35 KB
/
scripts.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const perPageOptions = [10, 30, 50, 100];
let currentPage = 1;
let reposPerPage = 10;
/*-------------------------------------------- Repository Division*-------------------------------------------*/
function loadRepositories() {
const username = document.getElementById('username').value;
const repositoriesDiv = document.getElementById('repositories');
const loaderDiv = document.getElementById('loader');
const paginationDiv = document.getElementById('pagination');
const welcomeDiv = document.getElementById('welcome');
if (!username) {
alert('Please enter a GitHub username.');
return;
}
loaderDiv.style.display = 'flex';
repositoriesDiv.innerHTML = '';
paginationDiv.innerHTML = '';
welcomeDiv.innerHTML = '';
// Fetch repositories from GitHub API and sort by creation date
fetch(`https://api.github.com/users/${username}/repos?per_page=${reposPerPage}&page=${currentPage}&sort=created`)
.then(response => response.json())
.then(repositories => {
loaderDiv.style.display = 'none';
repositories.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); // Sort repositories by creation date (newest first)
displayRepositories(repositories);
displayWelcomeMessage(username);
welcomeDiv.style.display = 'block';
createPagination(repositories.length);
})
.catch(error => {
loaderDiv.style.display = 'none';
alert('Error fetching repositories. Please check the username and try again.');
console.error(error);
});
}
/*---------------------------------------------------Welcome Division------------------------------------*/
function displayWelcomeMessage(username) {
const welcomeDiv = document.getElementById('welcome');
const welcomeMessage = document.createElement('div');
welcomeMessage.innerHTML = `<p>Welcome to ${username}'s repository page.</p>`;
welcomeDiv.appendChild(welcomeMessage);
}
/*-------------------------------------------------Repository Division------------------------------------*/
function displayRepositories(repositories) {
const repositoriesDiv = document.getElementById('repositories');
repositories.forEach(repository => {
const repositoryDiv = document.createElement('div');
repositoryDiv.classList.add('repository');
repositoryDiv.innerHTML = `
<h3>${repository.name}</h3>
<p>${repository.description || 'No description available.'}</p>
<p>Language: ${repository.language || 'Not specified'}</p>
<p>Topics: ${repository.topics.join(', ')}</p>
`;
repositoriesDiv.appendChild(repositoryDiv);
});
}
/*----------------------------------------------------Pagination Division-----------------------------------------*/
function createPagination(totalRepositories) {
const paginationDiv = document.getElementById('pagination');
const totalPages = Math.ceil(totalRepositories / reposPerPage);
const selectPerPage = document.createElement('select');
selectPerPage.addEventListener('change', (event) => {
reposPerPage = parseInt(event.target.value);
currentPage = 1;
loadRepositories();
});
perPageOptions.forEach(option => {
const optionElement = document.createElement('option');
optionElement.value = option;
optionElement.textContent = `${option} per page`;
if (option === reposPerPage) {
optionElement.selected = true;
}
selectPerPage.appendChild(optionElement);
});
const prevButton = document.createElement('button');
prevButton.textContent = 'Previous';
prevButton.addEventListener('click', () => changePage(-1));
prevButton.disabled = currentPage === 1;
const nextButton = document.createElement('button');
nextButton.textContent = 'Next';
nextButton.addEventListener('click', () => changePage(1));
nextButton.disabled = currentPage === totalPages;
paginationDiv.innerHTML = '';
paginationDiv.appendChild(prevButton);
paginationDiv.appendChild(selectPerPage);
paginationDiv.appendChild(nextButton);
}
/*-------------------------------------------------------More than 10 repos--------------------------------------------*/
function changePage(change) {
currentPage += change;
loadRepositories();
}