everyone

rkv14001 · Apr 12, 2017 · 591e807 · 591e807
1 parent 99f45c3
commit 591e807
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 3 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1 +1,13 @@
-
+.everyone {
+	padding: 30px;
+}
+.phone-number {
+	display: inline-block;
+	padding: 10px;
+	width: 30%;
+}
+.person {
+	border-left: 10px solid #434389;
+	padding: 5px 0px 5px 15px;
+	margin-bottom: 10px;
+}
diff --git a/everyone.html b/everyone.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <!-- Place favicon.ico in the root directory -->
+
+        <link rel="stylesheet" href="css/normalize.css">
+        <link rel="stylesheet" href="css/main.css">
+        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
+    </head>
+    <body class="everyone">
+        <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+
+        <!-- Add your site or application content here -->
+
+        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
+        <script src="js/plugins.js"></script>
+        <script src="js/everyone.js"></script>
+
+        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+        <script>
+            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+            e.src='https://www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
+        </script>
+    </body>
+</html>
diff --git a/js/everyone.js b/js/everyone.js
@@ -0,0 +1,49 @@
+var base = "http://phonebk.develop.digitalmediauconn.org/phonebook.php";
+
+function getAllPeople(callback) {
+	var ajaxcall = new XMLHttpRequest();
+
+	ajaxcall.onreadystatechange = function() {
+		if (ajaxcall.readyState == 4 && ajaxcall.status == 200) {
+
+			callback(ajaxcall.responseText);
+
+		}
+	}; 
+
+	ajaxcall.open("GET", base + "?do=getAllPeople", true);
+	ajaxcall.send();
+}
+
+function createElement(elemName, classes, text, id, href) {
+	var elem = document.createElement(elemName);
+	for (var i = 0; i < classes.length; i++) {
+		elem.classList.add(classes[i])
+	}
+	elem.appendChild(document.createTextNode(text));
+	elem.setAttribute("id", id);
+	elem.setAttribute("href", href)
+	return elem;
+}
+
+function format(text) {
+	var arr = JSON.parse(text);
+	arr.sort(function(a,b) {
+		return a.lastname > b.lastname;
+	});
+	var parent = document.querySelector("body");
+	console.log(arr);
+	for (var i = 0; i < arr.length; i++) {
+		var person = arr[i];
+		var div = createElement("div", ["person"], "");
+		var name = createElement("h3", [], person.firstname + " " + person.lastname);
+
+		var phone = createElement("a", ["phone-number"], person.phone,"", "/" + person.lastname); //add URL HERE
+		var email = createElement("a", ["email"], person.email, "", "mailto:"+ person.email);
+		div.appendChild(name);
+		div.appendChild(phone);
+		div.appendChild(email);
+		parent.appendChild(div);
+	}
+}
+getAllPeople(format);
diff --git a/js/main.js b/js/main.js
@@ -1,11 +1,21 @@
 var base = "http://phonebk.develop.digitalmediauconn.org/phonebook.php";
 
-function ajaxCall(uri, callback) {
+function getAllPeople(callback) {
 	var ajaxcall = new XMLHttpRequest();
 
-	ajaxcall.onreadystatechange = callback; 
+	ajaxcall.onreadystatechange = function() {
+		if (ajaxcall.readyState == 4 && ajaxcall.status == 200) {
+
+			callback(ajaxcall.responseText);
+
+		}
+	}; 
 
 	ajaxcall.open("GET", base + "?do=getAllPeople", true);
 	ajaxcall.send();
 }
 
+getAllPeople(function(text) {
+	var arr = JSON.parse(text);
+	console.log(arr);
+});