diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..dfe8c35a --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# Ignore environmental API keys +.env + +# Other +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..0b606717 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,20 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This week, we want you to create a place to keep track of the GitHub repos that we're using here at Technigo. The project is to continue practicing JavaScript and API skills with the help of GitHub's own -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +This week we focused on fetching and collecting datas from API. I found it challenging to collect the correct datas and display them on the matching project. It was a good practice to learn about dynamic ID and how it helped me to solve the problem above. -## View it live +My main goal was to go through all level requirents and learn as much as possible. It took me a long time to implement the search bar and filter button. I am happy to find a solution to complete it and learned a lot about how and when to use the filter() and sort() method. Regarding to the site's user friendliness, I selected few important categories such as languages, updated time, and show all to help the user get the search result faster. + +## What will I improve, if I had more time + +I have to admit that the search field is not yet perfect, as I aimed to implement a function for the clear ❌ button. When the user click ❌, it will display all the project's cards, instead of showing empty space. -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +## Figma's link: +https://www.figma.com/file/x2cLkf2v0G3r83hNHfUpgv/Untitled?node-id=0%3A1 + +## View it live +https://suki-github.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..8ac15007 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,48 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const updateChart = (projects) => { + + const labels = [ + '' + ]; + + const data = { + labels: labels, + datasets: [{ + label: `Done: ${projects}`, + backgroundColor: ['#7365e5'], + data: [projects], + }, + { + label: `Total: ${19}`, + backgroundColor: [ '#D6CDE9'], + data: [19-projects], + } + ] + }; + + const config = { + type: 'bar', + data: data, + options: { + barThickness: 30, + maxBarThickness: 30, + responsive: true, + indexAxis: 'y', + scales: { + x: { + stacked: true, + }, + y: { + stacked: true + } + } + } + }; + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..ae133518 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,92 @@ - Project GitHub Tracker + + Project GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
+ + +
+
+ +
+ + + + +
+ + +
+ + +
+ +
+ + +
+
+ +
+ + - - + + + + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..2fbaf338 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,399 @@ +// List to do +// A list of all repos that are forked ones from Technigo DONE +// Your username and profile picture - DONE +// Most recent update (push) for each repo DONE +// Name of your default branch for each repo - DONE +// URL to the actual GitHub repo - DONE +// Number of commit messages for each repo DONE +// All pull requests DONE +// A chart of how many projects you've done so far, compared to how many you will do using Chart.js. +// Filter board DONE +// Search Bar DONE + + +///////// DOM MANIPULATION ////////// +const user = document.querySelector(".user-info"); +const projects = document.querySelector("#projects"); +const comments = document.querySelector(".comments"); +const commits = document.querySelector(".commits"); +const closeModal = document.querySelector(".close-modal-btn"); +const modalBackground = document.querySelector(".see-more"); + +const filterBtn = document.getElementById("filter"); +const searchBtn = document.getElementById("search"); + + +///////// GLOBAL VARIABLES ////////// +let reponame; +let colorNumber = 0; +const colors = ["#F3E0F0", "#D6CDE9"]; + + +///////// ABOUT API ///////// +const username = "sukiphan97"; +const API_URL = `https://api.github.com/users/${username}/repos`; + + +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}` + } +} + + +///////// FETCH FIRST API TO GET USER INFO AND PROJECTS ////////// + fetch (API_URL) + .then(res => res.json()) + .then(data => { + + //To get data and display user infor + userInfo(data[0]); + + //To get only projects forked from Technigo + const datafilter = data.filter(item => item.name.startsWith("project") && item.fork) + + // Draw the chart + updateChart(datafilter.length); + + // Adding event to filter button + filterBtn.addEventListener("change", () => { + + // To get access to different option groups + const optgroup = filterBtn.options[filterBtn.selectedIndex].parentNode.label; + + if (optgroup === "language") { + filterLanguage(datafilter, filterBtn.value); + + } else { + filterTime(datafilter) + } + } + ) + + //////// Search Button //////// + searchBtn.addEventListener("search", (e) => { + + searchRepo(datafilter, searchBtn.value) + + } + ) + + /////// Generate main dashboard when user reload the page /////// + data.forEach(project => { + + reponame = project.name; + + if (datafilter) { + + gitDashBoard(project) + + + } + + }) + + }) + + + /////// Function to filter language /////// + const filterLanguage = (datafilter, language) => { + + projects.innerHTML = ""; + + // This variable is to store the filtered value below + let repoLanguage = []; + + if (language === "JavaScript" || language === "HTML") { + + repoLanguage = datafilter.filter(item => item.language === language); + + } else { + repoLanguage = datafilter; + } + + // To loop over the filtered array and display only selected language + repoLanguage.forEach(item => { + + reponame = item.name; + + gitDashBoard(item); + + }) + } + + /////// Function to filter lasted-update projects /////// + const filterTime = (datafilter) => { + + // To clear the board before applying new filter + projects.innerHTML = ""; + + // To organize the projects' card from newest to oldes one + datafilter.sort((a,b) => { + + return new Date(a.pushed_at) < new Date(b.pushed_at) ? 1 : -1; + + }) + + // Display the filtered card + datafilter.forEach(item => { + + reponame = item.name; + gitDashBoard(item); + + }) + + + } + + /////// Seach bar /////// + const searchRepo = (data,input) => { + + + projects.innerHTML=""; + + + let inputName = input.replaceAll(" ", "-") + const projectName = data.filter(item => item.name === inputName.toLowerCase()) + + projectName.forEach(item => { + reponame = item.name; + gitDashBoard(item); + getColor(item); + countTime(item); + technigoPR(reponame) + }) + } + + /////// Function to display username and other user info /////// + const userInfo = (data) => { + + const userPicture = data.owner.avatar_url; + + user.innerHTML += ` + +
+ +
+ + ${username} +
+ CONTACT +
+ +

Welcome to my Github Tracker 👋

+ + ` + } + + + /////// Function to generate project board /////// + const gitDashBoard = (project) => { + + reponame = project.name; + + // This condition is to display only forked projects from Technigo + if (project.fork === true && reponame.startsWith("project-")) { + + const repoName = reponame.split("-"); + + const repoTitle = repoName.map(letter => letter[0].toUpperCase() + letter.slice(1)); + + // Update HTML + projects.innerHTML += ` + +
+ +
+ + ${repoTitle.join(" ")} - ${project.default_branch} + +

Updated

+ +
+ +
+ + ${project.language} + + + +
+ +
+ + ` + + } + + // All functions to display other datas and style the projects'card + getColor(project); + countTime(project); + styling(project); + technigoPR(reponame) + + } + + + ///////// FETCH TECHNIGO'S PULL REQUEST ////////// + const technigoPR = (reponame) => { + + fetch(`https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, options) + .then(res => res.json()) + .then(data => { + + // Adding event for "See more" button, when user clicks it, a modal will popup + document.getElementById(`${reponame}-modal-btn`).addEventListener("click", () =>{ + + data.forEach(item => { + + if (item.user.login === username) { + getCommits(item.commits_url, reponame) + getComments(item.review_comments_url, reponame) + } + + else if (item.user.login === "emmahogberg88" && reponame === "project-weather-app") { + getComments(item.review_comments_url, reponame) + } + + }) + }) + }) + } + + /////// Function to fetch comments's API link /////// + const getComments = (comments_url, reponame) => { + + fetch(comments_url) + .then (res => res.json()) + .then (data => { + comments.innerHTML = ""; + if (data.length === 0) { + + comments.innerHTML = `

No comment for this project

` + + } else if (data.length > 0) { + + data.forEach(item => comments.innerHTML += `
  • ${item.body}
    • `) + + } + + // To remove the hidden class and show the modal + document.querySelector(".see-more").style.display = "flex"; + + }) + } + + /////// Function to fetch commits's API link /////// + const getCommits = (commits_url, reponame) => { + + fetch(commits_url,options) + .then(res => res.json()) + .then(data => { + + if (data.length > 0) { + commits.innerHTML = `📌 Number of commits: ${data.length}`; + + } else { + commits.innerHTML = `📌 Number of commits: 0`; + + } + + }) + + } + + + /////// Function to count since when the project was updated /////// + const countTime = (project) => { + + // Get pushed time + const pushDate = new Date(project.pushed_at); + + // Get current time + const today = new Date(); + + // Count time, seconds, minutes, hours, days + const sinceTime = (today - pushDate); + + const seconds = Math.round( sinceTime / 1000 ); + + const minutes = Math.round( seconds / 60 ); + + const hours = Math.round( minutes/60 ); + + const days = Math.round( hours/24 ); + + const months = Math.round( days/30 ); + + + const updateTime = document.getElementById(`${reponame}-time`); + + //Filter the time and how to display it + if (minutes < 1) { + + updateTime.innerHTML += `${seconds} ago`; + } + else if ( minutes >= 1 && minutes < 60) { + + updateTime.innerHTML += `${minutes} ago`; + } + else if ( minutes >= 60 && hours < 24) { + + updateTime.innerHTML += `${hours} hours ago`; + + } + else if (hours >= 24 && days <= 30) { + + updateTime.innerHTML += `${days} days ago`; + + } + else if (days > 30 && months < 12) { + + updateTime.innerHTML += `${months} months ago`; + } + else { + + updateTime.innerHTML += `${sinceTime.toDateString()}`; + + } + } + + /////// Function apply different colors for the projects'card/////// + const getColor = (project) => { + + colorNumber++; + + if (colorNumber > colors.length - 1) { + colorNumber = 0; + } + + document.getElementById(reponame).style.background = colors[colorNumber]; + + } + + /////// Function style the language tag/////// + const styling = (project) => { + if(project.language === "JavaScript") { + document.querySelector(`.${reponame}-language`).style.background = "#7365e5" + } else { + document.querySelector(`.${reponame}-language`).style.background = "#333" + } + + } + + + /////// Adding event for modal close button/////// + closeModal.addEventListener("click", () => { + modalBackground.style.display = "none"; + }) + + modalBackground.addEventListener("click", () => { + modalBackground.style.display = "none"; + + }) + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..c929706b 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,403 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #FFf; + display: flex; + flex-direction: column; + font-family: 'Raleway', sans-serif; + color: #333; +} + +button { + cursor: pointer; +} + + +.hidden { + display: none; +} + +/***************** USER INFO *****************/ +.user-info { + height: 100%; + padding: 3.2rem; + overflow: hidden; +} + +.user-info .header-container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + padding: 2.4rem 0 4.8rem 0; +} + +.user-info .header-container div { + display: flex; + align-items: center; + gap: 1rem; +} + +h1 { + font-size: 2.8rem; + padding-right: 6rem; + line-height: 1.4; +} + +.user-info .header-container img { + border-radius: 400px; + height: 52px; + width: auto; + padding: 0.5rem; + position: relative; +} + +.user-info .user-name, +.user-info p { + font-size: 1.4rem; + letter-spacing: 1.4px; + font-weight: 500; + color: #333; +} + +.user-name:link, +.user-name:visited { + text-decoration: none; + font-weight: 700; + transition: all 0.4s ease; +} + +.user-name:hover, +.user-name:active { + color: #7365e5; +} + +.cta-btn:link, +.cta-btn:visited { + background: #000; + padding: 1.2rem 1.8rem; + text-decoration: none; + font-size: 1.0rem; + font-weight: 700; + letter-spacing: 2px; + border-radius: 8px; + border: solid 1px transparent; + color: #Fff; + transition: all 0.4s ease; + margin-top: 1.2rem; +} + +.cta-btn:hover, +.cta-btn:active { + background: #fff; + border: solid 1px #000; + color: #000; +} + +.hand-waiving { + position: absolute; + padding-left: 1rem; + transform: rotate(-10deg); + animation: waiving 1s ease-in-out infinite; +} + +@keyframes waiving { + + 0% { + transform: rotate(-12deg); + } + + 50% { + transform: rotate(20deg); + font-size: 3.6rem; + } + + 60% { + transform: rotate(22deg); + } + + 100% { + transform: rotate(-12deg); + } + +} + +/***************** SEARCH BAR AND FILTER BUTTON DISPLAY *****************/ + +.input-container { + display: flex; + gap: 1.2rem; + padding: 0 3.2rem 3.2rem 3.2rem; + justify-content: space-between; + +} + +.input-container label { + background: #f7f6f9; + padding: 1.2rem; + font-size: 1.6rem; + display: flex; + align-items: center; + border-radius: 6px; + width: 90%; +} + +.input-container select, +.input-container .search-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + outline: none; +} + +.input-container .search-input { + background: transparent; + padding: 0 1.2rem; +} + + +.input-container select { + background: none; + border-radius: 6px; + border: solid 1px #666; + text-align: center; + text-indent: 5px hanging; + padding: 1rem; + display: block; + font-size: 1.4rem; + width: 15%; +} + + +/***************** PROJECTS'S CARD AND CHART*****************/ + +#projects { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); + grid-gap: 2.6rem; + padding-bottom: 4.8rem; +} + +.repo { + height: 169px; + padding: 2.4rem; + border-radius: 20px; + display: flex; + justify-content: space-between; +} + +h2 { + font-size: 1.8rem; +} + +.repo .repo-title { + text-decoration: none; + color: #333; + font-size: 1.6rem; + font-weight: 700; + letter-spacing: 0.8px; +} + +.repo div:first-of-type{ + width: 70%; +} + +.repo div:nth-of-type(2) { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: auto; +} + +.repo .language { + background: #7365e5; + color: #fff; + font-size: 1rem; + font-weight: 700; + letter-spacing: 1px; + padding: 0.6rem 1.2rem; + border-radius: 100px; +} + +.repo .time { + font-size: 1.2rem; + color: #666; + margin-top: 1rem; +} + +.repo .open-modal-btn { + background: none; + border: none; + font-size: 1.6rem; + cursor: pointer; + transition: all 0.4s ease; +} + +.repo .open-modal-btn:hover { + color: #7365e5; +} + + +/***************** MODAL *****************/ +.see-more { + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + min-width: 100vw; + min-height: 100vh; + padding: 4.8rem; + background: none; + position: fixed; + z-index: 5; + backdrop-filter: blur(5px) brightness(0.5); + -webkit-backdrop-filter: blur(5px) brightness(0.5); +} + +.see-more-container { + background: #f7f6f9; + border-radius: 20px; + padding: 2.4rem 4.8rem 4.8rem 4.8rem; + display: flex; + flex-direction: column; + gap: 2.4rem; + overflow: scroll; + height: 65vh; + font-size: 1.4rem; + letter-spacing: 1px; +} + +.close-modal-btn { + background: none; + border: none; + width: 10%; + align-self: flex-end; +} + +.close-modal-btn ion-icon { + font-size: 3.6rem; + color: #7365e5; + background: #f7f6f9; + border-radius: 100px; + position: fixed; +} + +.comments { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.comments-title, +.commits { + font-weight: 600; +} + +.comments li { + margin-left: 2.4rem; + margin-top: 1.2rem; +} + + +/***************** CHART *****************/ + +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 4.8rem; + padding: 0 4.8rem 4.8rem 4.8rem; +} + +.chart { + width: 300px; + height: 100px; + display: inline-block; + min-width: 200px; +} + +/***************** FOOTER *****************/ +footer { + background: #f7f6f9; + display: flex; + flex-direction: column; + align-items: center; + padding: 3.2rem; + gap: 2.4rem; +} + + +footer ul { + display: flex; + gap: 1.2rem; + list-style: none; +} + + +footer ion-icon, +footer p { + font-size: 1.8rem; + text-align: center; + color: #333; +} + + +/************************ MEDIA QUERIES ************************/ + +@media (min-width: 640px) { + + h1 { + font-size: 5.2rem; + } + + .user-info .header-container img { + height: 75px; + width: auto; + } + + .user-info { + padding: 4.8rem; + } + + .user-info .user-name { + font-size: 2.0rem; + } + + .cta-btn:link { + font-size: 1.4rem; + } + + .container { + flex-direction: row; + padding: 0 4.8rem; + align-items: flex-start; + justify-content: space-between; + margin-top: 2.4rem; + } + + + .canva { + width: 40%; + } + + #projects { + width: 55%; + } + + + .see-more-container { + width: 50vw; + } + +} +