From 90a7d85751290c73e20736c39b96c79238fd30e7 Mon Sep 17 00:00:00 2001 From: Dilshad Date: Thu, 9 Nov 2023 17:40:33 +0500 Subject: [PATCH] Create main.js --- main.js | 252 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 main.js diff --git a/main.js b/main.js new file mode 100644 index 0000000..8120868 --- /dev/null +++ b/main.js @@ -0,0 +1,252 @@ +// Function to fetch and display user profile +async function fetchProfile() { + const username = document.getElementById('searchInput').value; + const userInfoContainer = document.getElementById('userInfo'); + const loadingIndicator = document.getElementById('loadingIndicator'); + const errorMessage = document.getElementById('errorMessage'); + + // Reset previous state + userInfoContainer.innerHTML = ''; + errorMessage.innerHTML = ''; + loadingIndicator.style.display = 'block'; + + try { + const response = await fetch(`https://api.github.com/users/${username}`); + + if (!response.ok) { + throw new Error('User not found'); + } + + const userData = await response.json(); + + // Display user information + userInfoContainer.innerHTML = ` + Avatar +

${userData.name}

+

${userData.bio || 'No bio available'}

+

Followers: ${userData.followers} | Following: ${userData.following}

+

Public Repositories: ${userData.public_repos}

+ View on GitHub + `; + + // Fetch recent activity + const activityResponse = await fetch(`${userData.events_url}?per_page=5`); + const activityData = await activityResponse.json(); + + // Display recent activity + displayRecentActivity(activityData); + + // Fetch repositories + const reposResponse = await fetch(userData.repos_url); + const reposData = await reposResponse.json(); + + // Extract languages from repositories + const languages = reposData.map(repo => repo.language); + + // Remove null and undefined values + const filteredLanguages = languages.filter(language => language); + + // Count language occurrences + const languageCounts = filteredLanguages.reduce((acc, language) => { + acc[language] = (acc[language] || 0) + 1; + return acc; + }, {}); + + // Display language distribution chart + displayLanguageChart(languageCounts); + + // Display repositories + displayRepositories(reposData); + + // Display additional statistics + const contributionsResponse = await fetch(`https://api.github.com/users/${username}/contributions`); + const contributionsData = await contributionsResponse.json(); + + displayStatistics(contributionsData, reposData); + } catch (error) { + // Handle errors + errorMessage.innerHTML = `Error: ${error.message}`; + } finally { + // Hide loading indicator + loadingIndicator.style.display = 'none'; + } +} + +// Function to display recent activity +function displayRecentActivity(activityData) { + const activityList = document.getElementById('activityList'); + + // Clear previous activity + activityList.innerHTML = ''; + + activityData.forEach(activity => { + const activityItem = document.createElement('li'); + activityItem.textContent = `${activity.type} - ${new Date(activity.created_at).toLocaleString()}`; + activityList.appendChild(activityItem); + }); +} + +// Function to display the language distribution chart +function displayLanguageChart(languageCounts) { + const chartContainer = document.getElementById('chartContainer'); + + // Create a pie chart + const ctx = document.createElement('canvas').getContext('2d'); + chartContainer.innerHTML = ''; + chartContainer.appendChild(ctx.canvas); + + new Chart(ctx, { + type: 'pie', + data: { + labels: Object.keys(languageCounts), + datasets: [{ + data: Object.values(languageCounts), + backgroundColor: [ + 'rgba(255, 99, 132, 0.7)', + 'rgba(54, 162, 235, 0.7)', + 'rgba(255, 206, 86, 0.7)', + 'rgba(75, 192, 192, 0.7)', + 'rgba(153, 102, 255, 0.7)', + 'rgba(255, 159, 64, 0.7)', + ], + }], + }, + }); +} + +// Function to display repositories +function displayRepositories(reposData) { + const repositoriesList = document.getElementById('repositoriesList'); + + // Clear previous repositories + repositoriesList.innerHTML = ''; + + reposData.forEach(repo => { + const repoItem = document.createElement('li'); + repoItem.innerHTML = ` + ${repo.name} - + Star Count: ${repo.stargazers_count} | + Language: ${repo.language || 'Not specified'} | + Last Updated: ${new Date(repo.pushed_at).toLocaleDateString()} + + `; + repoItem.dataset.name = repo.name; + repoItem.dataset.stargazers_count = repo.stargazers_count; + repoItem.dataset.pushed_at = repo.pushed_at; + repoItem.dataset.language = repo.language || ''; + + repositoriesList.appendChild(repoItem); + }); + + // Initial sorting + sortRepositories(); +} + +// Function to sort repositories +function sortRepositories() { + const sortCriteria = document.getElementById('sortCriteria').value; + const repositoriesList = document.getElementById('repositoriesList'); + const repositories = Array.from(repositoriesList.children); + + repositories.sort((a, b) => { + const aValue = a.dataset[sortCriteria]; + const bValue = b.dataset[sortCriteria]; + + if (sortCriteria === 'pushed_at') { + return new Date(bValue) - new Date(aValue); + } + + return bValue - aValue; + }); + + repositories.forEach(repo => repositoriesList.appendChild(repo)); +} + +// Function to filter repositories by language +function filterRepositories() { + const filterLanguage = document.getElementById('filterLanguage').value.toLowerCase(); + const repositoriesList = document.getElementById('repositoriesList'); + const repositories = Array.from(repositoriesList.children); + + repositories.forEach(repo => { + const repoLanguage = repo.dataset.language.toLowerCase(); + if (repoLanguage.includes(filterLanguage)) { + repo.style.display = 'block'; + } else { + repo.style.display = 'none'; + } + }); +} + +// Function to display statistics +function displayStatistics(contributionsData, reposData) { + const statisticsContainer = document.getElementById('statistics'); + + // Calculate the longest streak of consecutive days with contributions + const longestStreak = calculateLongestStreak(contributionsData); + document.getElementById('longestStreak').textContent = `Longest Streak: ${longestStreak} days`; + + // Calculate the most used programming language + const mostUsedLanguage = calculateMostUsedLanguage(reposData); + document.getElementById('mostUsedLanguage').textContent = `Most Used Language: ${mostUsedLanguage || 'Not specified'}`; +} + +// Function to calculate the longest streak of consecutive days with contributions +function calculateLongestStreak(contributionsData) { + let currentStreak = 0; + let longestStreak = 0; + + contributionsData.forEach(contribution => { + if (contribution.count > 0) { + currentStreak++; + } else { + if (currentStreak > longestStreak) { + longestStreak = currentStreak; + } + currentStreak = 0; + } + }); + + // Check the last streak in case it extends to the end + if (currentStreak > longestStreak) { + longestStreak = currentStreak; + } + + return longestStreak; +} + +// Function to calculate the most used programming language +function calculateMostUsedLanguage(reposData) { + const languageCounts = reposData.reduce((acc, repo) => { + const language = repo.language || 'Not specified'; + acc[language] = (acc[language] || 0) + 1; + return acc; + }, {}); + + const mostUsedLanguage = Object.keys(languageCounts).reduce((a, b) => languageCounts[a] > languageCounts[b] ? a : b, ''); + + return mostUsedLanguage; +} + +// Function to open the modal +function openModal(repo) { + const modal = document.getElementById('modal'); + const repoName = document.getElementById('repoName'); + const repoDescription = document.getElementById('repoDescription'); + const repoLanguage = document.getElementById('repoLanguage'); + const repoCreationDate = document.getElementById('repoCreationDate'); + + repoName.textContent = repo.name; + repoDescription.textContent = repo.description || 'No description available'; + repoLanguage.textContent = `Language: ${repo.language || 'Not specified'}`; + repoCreationDate.textContent = `Created on: ${new Date(repo.created_at).toLocaleDateString()}`; + + modal.style.display = 'flex'; +} + +// Function to close the modal +function closeModal() { + const modal = document.getElementById('modal'); + modal.style.display = 'none'; + } +