get info from github api and all functionality done

gavimena · Apr 21, 2018 · 76ac1e6 · 76ac1e6
1 parent c6bfdbb
commit 76ac1e6
Show file tree

Hide file tree

Showing 9 changed files with 7,374 additions and 28 deletions.
diff --git a/css/main.css b/css/main.css
diff --git a/index.html b/index.html
@@ -1,11 +1,21 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Adalab Web Starter Kit</title>
-	<link rel="stylesheet" href="css/main.css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="stylesheet" href="/css/main.css">
+	<title>GitHub</title>
 </head>
 <body>
-	<script src="js/main.min.js"></script>
+	<select id="user-select" name="select-user">
+		<option class="option-user">Selecciona una usuaria</option>
+	</select>
+	<div class="user-container">
+
+	</div>
+	<p class="member-since">Miembro desde hace 0 meses</p>
+	<img src="images/logo-adalab-80px.png" alt="logo-adalab">
+	<script src="js/main.js"></script>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,67 @@
 'use strict';
 
-console.log('>> Ready :)');
+var app =  function() {
+
+	let adalabUsers = [];
+	let adalaberInfo = {};
+	const userSelect = document.getElementById('user-select');
+	const userContainer = document.querySelector('.user-container');
+	const memberSince = document.querySelector('.member-since');
+
+	fetch('https://api.github.com/orgs/adalab/public_members?per_page=68')
+		.then(function(response){
+			return response.json();
+		})
+		.then(function(json){
+			adalabUsers = json;
+
+			for (var i = 0; i < adalabUsers.length; i++) {
+				let optionUser = document.createElement('option');
+				optionUser.value = adalabUsers[i].login;
+				optionUser.innerHTML = adalabUsers[i].login;
+				userSelect.appendChild(optionUser);
+			}
+		});
+
+	userSelect.addEventListener('change', () => {
+		let userName = event.target.value;
+
+		fetch(`https://api.github.com/users/${userName}`)
+			.then(function(response){
+					return response.json();
+				})
+				.then(function(json){
+					adalaberInfo = json;
+
+		renderUserInfo(adalaberInfo);
+		})
+	});
+
+	function renderUserInfo(adalaberInfo) {
+		console.log('dentro render', adalaberInfo);
+		userContainer.innerHTML = `
+			<img src=https://avatars1.githubusercontent.com/u/${adalaberInfo.id} alt="adalaber avatar">
+			<div>
+				<p>@${adalaberInfo.login}</p>
+				<h2>${adalaberInfo.name}</h2>
+				<p>${adalaberInfo.location}</p>
+			</div>
+			<div>
+				<div>
+					<h2>${adalaberInfo.public_repos}</h2>
+					<p>Repos</p>
+				</div>
+				<div>
+					<h2>${adalaberInfo.followers}</h2>
+					<p>Followers</p>
+				</div>
+				<div>
+					<h2>${adalaberInfo.following}</h2>
+					<p>Following</p>
+				</div>
+			</div>`;
+		memberSince.innerHTML = `Miembro desde ${adalaberInfo.created_at}`;
+	}
+}
+
+app();
diff --git a/js/main.min.js b/js/main.min.js