├── .gitignore ├── README.md ├── docs └── screenshot.png ├── package-lock.json ├── package.json ├── src ├── app │ ├── config.json │ ├── github.js │ ├── index.js │ └── ui.js └── index.html └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gihtub Client 2 | A simple github client web applcation using OOP javascript and the Github API 3 | 4 | # Screenshot 5 | ![](docs/screenshot.png) 6 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fazt/github-client/866156738e416160a9eb0aa9960fa68c9f7036d6/docs/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fazt-github-client", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode production", 8 | "dev": "webpack-dev-server --mode development --open" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "html-webpack-plugin": "^3.2.0", 15 | "webpack": "^4.12.0", 16 | "webpack-cli": "^3.0.7", 17 | "webpack-dev-server": "^3.1.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "client_id": "1ddb6bf4ad54c50f900a", 3 | "client_secret": "4ac9fe6ec91fbbe36e57f68cfbf444361e884483" 4 | } 5 | -------------------------------------------------------------------------------- /src/app/github.js: -------------------------------------------------------------------------------- 1 | class Github { 2 | constructor (clientId, clientSecret) { 3 | if(!clientId || !clientSecret) { 4 | return console.warn('Please use a client_id and a client_secret'); 5 | } 6 | this.client_id= clientId; 7 | this.client_secret = clientSecret; 8 | this.repos_count = 7; 9 | this.repos_sort = 'created: asc'; 10 | } 11 | 12 | async fetchUser(user) { 13 | console.log(user); 14 | const userDataRequest = await fetch(`http://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`); 15 | 16 | const repositoriesRequest = await fetch(`http://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_id}&client_secret=${this.client_secret}`); 17 | 18 | const userData = await userDataRequest.json(); 19 | const repositories = await repositoriesRequest.json(); 20 | 21 | return { 22 | userData, 23 | repositories 24 | } 25 | } 26 | 27 | } 28 | 29 | module.exports = Github; 30 | -------------------------------------------------------------------------------- /src/app/index.js: -------------------------------------------------------------------------------- 1 | const UI= require('./ui'); 2 | const Github = require('./github'); 3 | 4 | const { client_id, client_secret }= require('./config.json'); 5 | 6 | // Classes Initialization 7 | const github = new Github(client_id, client_secret); 8 | const ui = new UI(); 9 | 10 | // DOM Elements 11 | const userForm = document.getElementById('userForm'); 12 | 13 | // DOM Events 14 | userForm.addEventListener('submit', (e) => { 15 | e.preventDefault(); 16 | const textSearch = document.getElementById('textSearch').value; 17 | if (textSearch !== '') { 18 | github.fetchUser(textSearch) 19 | .then(data => { 20 | if (data.userData.message === 'Not Found') { 21 | ui.showMessage('User not Found', 'alert alert-danger mt-2 col-md-12'); 22 | } else { 23 | // Render Profile 24 | ui.showProfile(data.userData); 25 | ui.showRepositories(data.repositories); 26 | } 27 | }); 28 | } else { 29 | ui.reset(); 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/ui.js: -------------------------------------------------------------------------------- 1 | class UI { 2 | constructor() { 3 | this.profile = document.getElementById('profile'); 4 | } 5 | 6 | showProfile(user) { 7 | this.profile.innerHTML = ` 8 |
9 | 10 |
11 |

${user.name} / ${user.login}

12 | 13 | View Profile 14 | 15 | 16 | followers: ${user.followers} 17 | 18 | 19 | following: ${user.following} 20 | 21 | 22 | company: ${user.company} 23 | 24 | 25 | blog: ${user.blog} 26 | 27 |
28 |
29 | `; 30 | this.clearMessage(); 31 | } 32 | 33 | showRepositories(repositories) { 34 | console.log(repositories) 35 | let template = ''; 36 | repositories.forEach(repo => { 37 | template += ` 38 |
39 |
40 |
41 | ${repo.name} 42 |
43 |
44 | 45 | Language: ${repo.language} 46 | 47 | 48 | forks: ${repo.forks_count} 49 | 50 |
51 |
52 |
53 | `; 54 | }); 55 | document.getElementById('repositories').innerHTML = template; 56 | } 57 | 58 | showMessage(message, cssClass) { 59 | this.clearMessage(); 60 | const div = document.createElement('div'); 61 | div.className = cssClass; 62 | div.appendChild(document.createTextNode(message)); 63 | const content = document.querySelector('.row'); 64 | const profile = document.querySelector('#profile'); 65 | content.insertBefore(div, profile); 66 | setTimeout(() => this.clearMessage(), 3000); 67 | } 68 | 69 | clearMessage() { 70 | const alertfound = document.querySelector('.alert'); 71 | if(alertfound) { 72 | alertfound.remove(); 73 | } 74 | } 75 | 76 | reset() { 77 | this.profile.innerHTML = ` 78 |
79 |

Learn Something New Everydary

80 |
81 | ` 82 | } 83 | } 84 | 85 | module.exports = UI; 86 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fazt Github Client 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 25 | 26 |
27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | entry: './src/app/index.js', 6 | output: { 7 | path: path.join(__dirname, 'dist'), 8 | filename: 'bundle.js' 9 | }, 10 | devServer: { 11 | port: 3000 12 | }, 13 | plugins: [ 14 | new HtmlWebpackPlugin({ 15 | template: './src/index.html' 16 | }) 17 | ] 18 | }; 19 | --------------------------------------------------------------------------------