Skip to content

Moved JS content to script.js #1156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 24, 2024
Merged

Moved JS content to script.js #1156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 0 additions & 104 deletions Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,110 +89,6 @@ <h2>Repositories</h2>
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
</footer>

<!-- Existing JavaScript code -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const directoriesList = document.getElementById('directories');

async function fetchDirectories() {
try {
const response = await fetch('/api/github/repos');

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();

const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');

directories.forEach(directory => {
const li = document.createElement('li');
li.classList.add('card');

const h3 = document.createElement('h3');
h3.textContent = directory.name;

const a = document.createElement('a');
a.href = directory.html_url;
a.textContent = 'View Repository';
a.classList.add('btn-view-repo');

li.appendChild(h3);
li.appendChild(a);
directoriesList.appendChild(li);
});
} catch (error) {
console.error('Error fetching directories:', error);
directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
}
}

fetchDirectories();
});
</script>

<!-- JavaScript for toggling statistics section -->
<script>
document.addEventListener('DOMContentLoaded', async function () {
const repoOwner = 'recodehive';
const repoName = 'machine-learning-repos';
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;

try {
// Fetch repository data
const repoResponse = await fetch(apiUrl);
const repoData = await repoResponse.json();

// Populate statistics cards
document.getElementById('total-stars').innerText = repoData.stargazers_count;
document.getElementById('total-forks').innerText = repoData.forks_count;
document.getElementById('open-issues').innerText = repoData.open_issues_count;
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';

// Fetch languages
const languagesResponse = await fetch(`${apiUrl}/languages`);
const languagesData = await languagesResponse.json();
const languageList = document.getElementById('language-list');
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
let mostUsedLanguage = { name: '', bytes: 0 };

for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar" style="width: ${percentage}%;"></div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
mostUsedLanguage = { name: language, bytes: bytes };
}
}

document.getElementById('most-used-language').innerText = mostUsedLanguage.name;

} catch (error) {
console.error('Error fetching data from GitHub API:', error);
}

// Toggle statistics section
const toggleButton = document.getElementById('toggle-stats');
const statsSection = document.getElementById('statistics-cards');
statsSection.style.display = 'none';

toggleButton.addEventListener('click', function () {
if (statsSection.style.display === 'none') {
statsSection.style.display = 'block';
} else {
statsSection.style.display = 'none';
}
});

});
</script>
<script src="js/script.js"></script>
</body>
</html>
94 changes: 72 additions & 22 deletions Website/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
document.addEventListener('DOMContentLoaded', function() {
const directoriesList = document.getElementById('directories');

// Function to fetch and display directories
async function fetchDirectories() {
const directoriesList = document.getElementById('directories');
try {
const response = await fetch('/api/github/repos');

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();

const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');

directories.forEach(directory => {
Expand All @@ -35,27 +32,80 @@ document.addEventListener('DOMContentLoaded', function() {
}
}

fetchDirectories();
});
// Function to toggle languages section
function toggleLanguagesSection() {
const toggleLanguagesButton = document.createElement('button');
toggleLanguagesButton.id = 'toggle-languages';
toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
const languagesList = document.getElementById('language-list');
document.getElementById('languages').insertBefore(toggleLanguagesButton, languagesList);

languagesList.style.display = 'none';

toggleLanguagesButton.addEventListener('click', function() {
languagesList.style.display = languagesList.style.display === 'none' ? 'block' : 'none';
});
}

// Function to fetch and display repository stats
async function fetchRepoStats() {
const repoOwner = 'recodehive';
const repoName = 'machine-learning-repos';
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;

document.addEventListener('DOMContentLoaded', async function () {
// Existing code...
try {
// Fetch repository data
const repoResponse = await fetch(apiUrl);
const repoData = await repoResponse.json();

// Toggle languages section
const toggleLanguagesButton = document.createElement('button');
toggleLanguagesButton.id = 'toggle-languages';
toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
document.getElementById('languages').insertBefore(toggleLanguagesButton, document.getElementById('language-list'));
// Populate statistics cards
document.getElementById('total-stars').innerText = repoData.stargazers_count;
document.getElementById('total-forks').innerText = repoData.forks_count;
document.getElementById('open-issues').innerText = repoData.open_issues_count;
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';

const languagesList = document.getElementById('language-list');
languagesList.style.display = 'none';
// Fetch and display languages
const languagesResponse = await fetch(`${apiUrl}/languages`);
const languagesData = await languagesResponse.json();
const languageList = document.getElementById('language-list');
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
let mostUsedLanguage = { name: '', bytes: 0 };

toggleLanguagesButton.addEventListener('click', function () {
if (languagesList.style.display === 'none') {
languagesList.style.display = 'block';
} else {
languagesList.style.display = 'none';
for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar" style="width: ${percentage}%;"></div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
mostUsedLanguage = { name: language, bytes: bytes };
}
}

document.getElementById('most-used-language').innerText = mostUsedLanguage.name;

} catch (error) {
console.error('Error fetching data from GitHub API:', error);
}
});
}

// Function to toggle statistics section
function toggleStatsSection() {
const toggleButton = document.getElementById('toggle-stats');
const statsSection = document.getElementById('statistics-cards');
statsSection.style.display = 'none';

toggleButton.addEventListener('click', function() {
statsSection.style.display = statsSection.style.display === 'none' ? 'block' : 'none';
});
}

fetchDirectories();
toggleLanguagesSection();
fetchRepoStats();
toggleStatsSection();
});