bjg · sylviawan · Oct 21, 2018 · Nov 8, 2018 · Dec 6, 2018
diff --git a/calc2.css b/calc2.css
@@ -0,0 +1,40 @@
+body {
+  font-family: "Geneva";
+}
+
+.calc-container {
+  border: 2px solid black;
+  background-color: #F8F8F8;
+  width: 600px;
+  border-radius: 12px;
+}
+
+.textview {
+  border-style: inset;
+  border-radius: 12px;
+  position: center;
+  height: 60px;
+  width: 550px;
+  margin: 20px auto;
+  background-color: #FFFFFF;
+  font-size: 50px;
+  color: #B4B4B4;
+  text-align: right;
+  padding-right: 2px;
+}
+
+.grid-container {
+  display: grid;
+  grid-column-gap: 20px;
+  grid-row-gap: 10px;
+  grid-template-columns: auto auto auto auto;
+  padding: 20px;
+}
+.grid-item {
+  background-color: #D3D3D3;
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 5px 5px #808080;
+  font-size: 30px;
+  text-align: center;
+}
diff --git a/calc2.html b/calc2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="calc2.css">
+  <script src="calc2.js"></script>
+</head>
+
+<body>
+
+<div class="calc-container">
+    <form name="form">
+        <input class="textview" id="text" value="0" name="0">
+    </form>
+
+  <div class="grid-container">
+    <input class="grid-item" type="button" value="(" onclick="insert('(')">
+    <input class="grid-item" type="button" value=")" onclick="insert(')')">
+    <input class="grid-item" type="button" value="±" onclick="insert('-')">
+    <input class="grid-item" type="button" value="÷" onclick="insert('/')">
+    <input class="grid-item" type="button" value="7" onclick="insert(7)">
+    <input class="grid-item" type="button" value="8" onclick="insert(8)">
+    <input class="grid-item" type="button" value="9" onclick="insert(9)">
+    <input class="grid-item" type="button" value="x" onclick="insert('*')">
+    <input class="grid-item" type="button" value="4" onclick="insert(4)">
+    <input class="grid-item" type="button" value="5" onclick="insert(5)">
+    <input class="grid-item" type="button" value="6" onclick="insert(6)">
+    <input class="grid-item" type="button" value="-" onclick="insert('-')">
+    <input class="grid-item" type="button" value="1" onclick="insert(1)">
+    <input class="grid-item" type="button" value="2" onclick="insert(2)">
+    <input class="grid-item" type="button" value="3" onclick="insert(3)">
+    <input class="grid-item" type="button" value="+" onclick="insert('+')">
+    <input class="grid-item" type="button" value="0" onclick="insert(0)">
+    <input class="grid-item" type="button" value="." onclick="insert('.')">
+    <input class="grid-item" type="button" value="c" onclick="clr()">
+    <input class="grid-item" type="button" value="=" onclick="equal()">
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/calc2.js b/calc2.js
@@ -0,0 +1,29 @@
+
+let exp = '';
+
+
+function insert(num) {
+  console.log(num);
+  let text = document.getElementById('text');
+
+  text.value += num;
+  exp += num;
+  console.log(exp);
+}
+
+function equal() {
+  let screen = document.getElementById('text');
+  let x = eval(exp);
+  text.value = x;
+  exp = 0;
+  console.log("VALLED");
+  console.log(x);
+
+}
+
+function clr() {
+  text.value = 0;
+  exp = 0;
+}
+
+
diff --git a/part2.html b/part2.html
@@ -0,0 +1,13 @@
+<!-- Part 2 of Lab 2 -->
+
+<!DOCTYPE html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Part 2</title>
+	<script src="part2.js"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/part2.js b/part2.js
@@ -0,0 +1,70 @@
+
+
+// 1. List of objects having the attributes
+fetch('http://jsonplaceholder.typicode.com/users')
+	.then(response => response.json())
+	.then(function(data) {
+		let username = data.map( d => {
+			console.log(d.username);
+			console.log(d.address.city);
+			console.log(d.address.zipcode);
+			console.log('\n');
+		});
+
+		// 2. Show the number of users having only zipcodes starting w/ 2 or 5
+
+		let zip = data.map( d => {
+
+			return d.address.zipcode.startsWith('2') || d.address.zipcode.startsWith('5');
+		});
+
+		console.log(zip);
+		console.log('\n');
+
+		data.map(d => {
+			if (zip === true) {
+				console.log(d.username);
+				console.log('\n');
+			}
+		});
+	})
+
+
+// 3. List all of the post titles having more than six words
+fetch('http://jsonplaceholder.typicode.com/posts')
+	.then(response => response.json())
+	.then(function(data) {
+		let title = data.filter( a => {
+			if (a.title.split(' ').length > 6) {
+
+				console.log(a.title);
+				console.log('\n');
+			}
+		});
+
+		// 4. Show a word frequency map for all of the body contents of the posts
+		function wordFreq(data) {
+			let words = data.split(/[\.\?!,\*'"] +/),
+			freq = [], body;
+
+			words.forEach(function (word) {
+				body = newArray.filter(function (b) {
+					return b.body == word;
+				});
+				if (body.length) {
+					body[0].size += 1;
+				}
+				else {
+					freq.push({body: word, size: 1});
+				}
+				return newArray;
+			})
+			console.log(freq);
+		}
+	});
+
+
+
+
+
+
diff --git a/part3.css b/part3.css
@@ -0,0 +1,59 @@
+body {
+	font-family: "Geneva";
+}
+
+#search {
+	float: left
+    padding: 6px;
+    width: 300px;
+    height: 20px;
+    border: 1px solid black;
+    margin-top: 8px;
+}
+
+.container {
+	width: 700px;
+	margin-top: 10px;
+	text-align: left;
+}
+
+#picture {
+	width: 200px;
+	height: 200px;
+	display: block;
+	padding: 2px;
+	border: 1px solid black;
+}
+
+.column {
+	float: left;
+	padding: 15px;
+	border-style: 1px solid black;
+	width: 300px;
+	height: 
+}
+
+.profile {
+	float: left;
+	margin: 0;
+	padding-bottom: 8px;
+	width: 300px;
+	border: 1px solid black;
+}
+
+.content {
+	border: 1px solid black;
+	padding-top: 12px;
+	height: 220px;
+	width: 320px
+	margin-top: 10px;
+	margin-right: 10px;
+}
+
+
+.aside {
+	height: 400px;
+	border: 1px solid black;
+	padding-top: 8px;
+	overflow: auto;
+}
diff --git a/part3.html b/part3.html
@@ -0,0 +1,46 @@
+<!-- Part 3 of Lab 2 -->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Part 3</title>
+
+	<link rel="stylesheet" type="text/css" href="part3.css">
+
+
+</head>
+<body>
+	<script src="part3.js"></script>
+
+	<div class="top-nav">
+			<input type="text" placeholder="Username" id="search">
+			<button onClick="fetchData()">Search</button>
+	</div>
+
+	<div class="container">
+		<!-- left side of the page -->
+		<div class="column">
+			<h3>User Profile</h3>
+			<div class="content">
+				<img class="profile" id='picture'></div>
+				<div class="profile" id="name"><span>Name:</span></div>
+				<div class="profile" id="username"><span>Username:</span></div>
+				<div class="profile" id="email"><span>E-mail:</span></div>
+				<div class="profile" id="location"><span>Location:</span></div>
+				<div class="profile" id="gist"><span>No. of Gists:</span></div>
+			</div>
+		</div>
+
+		<!-- right hand side of the page -->
+		<div class="column">
+			<h3>User Repos</h3>
+			<div class="aside" id="repo">
+				<div class="reposit"><span>Name:</span></div>
+				<div class="reposit"><span>Description:</span></div>
+			</div>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/part3.js b/part3.js
@@ -0,0 +1,56 @@
+function fetchData() {
+  let item = document.getElementById('search').value;
+  const url = 'https://api.github.com/users/';
+  const userURL = 'https://api.github.com/users/' + item;
+  const repoURL = userURL + '/repos';
+  const gistURL = userURL + '/gists';
+  let x = 0;
+
+  // Retrieve's user's details
+  fetch(userURL)
+  .then(response => response.json())
+  .then(function(data) {
+    console.log(data.login);
+    document.getElementById("picture").src = data.avatar_url;
+    document.getElementById("name").innerHTML = "Name: " + data.name;
+    document.getElementById("username").innerHTML = "Username: " + data.login;
+    document.getElementById("email").innerHTML = "E-mail: " + data.email;
+    document.getElementById("location").innerHTML = "Location: " + data.location;
+  }); 
+
+  // Number of gist
+  fetch(gistURL)
+  .then(response => response.json())
+  .then(data => {
+    data.forEach(data => {
+      x++;
+    });
+    document.getElementById("gist").innerHTMl = "No. of Gists: " + x;
+    console.log('gist');
+  });
+
+  // Fetching repository of user
+  fetch(repoURL)
+  .then(response => response.json())
+  .then(data =>
+    data.forEach(data => {
+      let repo = document.getElementById('repo');
+      let repoEntry = document.createElement("div");
+
+      if (repo == null) {
+        repoEntry.innerHTML = "There's no repos!<br>";
+      }
+
+      repoEntry.innerHTML = "Name: " + data.name + "<br>" + "Description: " + data.description + "<br>";
+      repo.appendChild(repoEntry);
+      console.log('repo works!')
+      })
+    );
+
+  //Remove the previous repo to display a new one
+  while(repo.firstChild) {
+    repo.removeChild(repo.firstChild);
+
+  }
+
+}