From f35ec4187dbcbb6eafd1a65f91bb0f6098fbff0f Mon Sep 17 00:00:00 2001 From: Sylvia Wan Date: Sun, 21 Oct 2018 20:04:51 +0100 Subject: [PATCH 1/3] Submission for Lab worksheet 2 --- calc2.css | 40 +++++++++++++++++++++++++++++++ calc2.html | 40 +++++++++++++++++++++++++++++++ calc2.js | 29 ++++++++++++++++++++++ part2.html | 13 ++++++++++ part2.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ part3.css | 26 ++++++++++++++++++++ part3.html | 50 ++++++++++++++++++++++++++++++++++++++ 7 files changed, 268 insertions(+) create mode 100644 calc2.css create mode 100644 calc2.html create mode 100644 calc2.js create mode 100644 part2.html create mode 100644 part2.js create mode 100644 part3.css create mode 100644 part3.html diff --git a/calc2.css b/calc2.css new file mode 100644 index 000000000..ebf837852 --- /dev/null +++ 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 new file mode 100644 index 000000000..330100919 --- /dev/null +++ b/calc2.html @@ -0,0 +1,40 @@ + + + + + + + + + +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/calc2.js b/calc2.js new file mode 100644 index 000000000..227d141fe --- /dev/null +++ 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 new file mode 100644 index 000000000..ea5e21b19 --- /dev/null +++ b/part2.html @@ -0,0 +1,13 @@ + + + + + + + Part 2 + + + + + + \ No newline at end of file diff --git a/part2.js b/part2.js new file mode 100644 index 000000000..02dabe53e --- /dev/null +++ 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); + } + }); + + + + + + \ No newline at end of file diff --git a/part3.css b/part3.css new file mode 100644 index 000000000..3ccb6a640 --- /dev/null +++ b/part3.css @@ -0,0 +1,26 @@ +body { + font-family: "Geneva"; +} + +.content { + position: absolute; + padding: 15px; + border-style: solid; + width: 44%; + height: 50%; +} + +.img { + width: 100%; + height: 100%; +} + +.column { + position: absolute; + left: 60%; + padding: 15px; + border-style: solid; + width: 30%; + height: 50%; +} + diff --git a/part3.html b/part3.html new file mode 100644 index 000000000..31ed4614c --- /dev/null +++ b/part3.html @@ -0,0 +1,50 @@ + + + + + + Part 3 + + + + + + +
+
+
+ + +
+
+ +
+

User Profile

+
+
Name:
+
Username:
+
E-mail:
+
Location:
+
No. of Gists:
+ +
+ +
+

User Repos

+
Name:
+
Description:
+
Name:
+
Description:
+
Name:
+
Description:
+
Name:
+
Description:
+
Name:
+
Description:
+ +
+ + + + + \ No newline at end of file From 81157faedf3cebfba602438083c1cb0ccd5ba329 Mon Sep 17 00:00:00 2001 From: Sylvia Wan Date: Thu, 8 Nov 2018 14:17:48 +0000 Subject: [PATCH 2/3] Uploaded wrong files for part 3 --- part3.css | 62 +++++++++++++++++++++++++++++++++++++++++------------- part3.html | 37 +++++++++++++------------------- part3.js | 46 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 37 deletions(-) create mode 100644 part3.js diff --git a/part3.css b/part3.css index 3ccb6a640..46bc69e62 100644 --- a/part3.css +++ b/part3.css @@ -2,25 +2,57 @@ body { font-family: "Geneva"; } -.content { - position: absolute; - padding: 15px; - border-style: solid; - width: 44%; - height: 50%; +#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; } -.img { - width: 100%; - height: 100%; +#picture { + width: 200px; + height: 200px; + display: block; + padding: 2px; + border: 1px solid black; } .column { - position: absolute; - left: 60%; - padding: 15px; - border-style: solid; - width: 30%; - height: 50%; + 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; +} diff --git a/part3.html b/part3.html index 31ed4614c..6c38b9d35 100644 --- a/part3.html +++ b/part3.html @@ -10,41 +10,34 @@ -
-
-
- - -
-
+
+ + +
-
+
+ +

User Profile

+
Name:
-
Username:
+
Username:
E-mail:
Location:
No. of Gists:
- +
+

User Repos

-
Name:
-
Description:
-
Name:
-
Description:
-
Name:
-
Description:
-
Name:
-
Description:
-
Name:
-
Description:
- +
+
Name:
+
Description:
- +
\ No newline at end of file diff --git a/part3.js b/part3.js new file mode 100644 index 000000000..588012f14 --- /dev/null +++ b/part3.js @@ -0,0 +1,46 @@ +function fetchData(search) { + let item = document.getElementById('search').value; + let url = 'https://api.github.com/users/'; + let userURL = 'https://api.github.com/users/' + item; + let repoURL = userURL + '/repos'; + let gistURL = url + '/gists'; + + fetch(userURL) + .then(response => response.json()) + user.then(data => + document.getElementById("picture").src = data.avatar_url; + document.getElementById("name").innerHTML = data.name; + document.getElementById("username").innerHTML = data.login; + document.getElementById("email").innerHTML = data.email; + document.getElementById("location").innerHTML = data.location; + console.log('It works!!'); + + fetch(gistURL) + .then(response => response.json()) + .then(data => { + let x = 0; + forEach(data => { + x++; + }); + document.getElementById("gists").innerHTMl = "No. of Gists:
" + x; + console.log('gists works'); + }); + + 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!
"; + } + + repoEntry.innerHTML = "Name: " + data.name + "
" + "Description: " + data.description + "
"; + repo.appendChild(repoEntry); + console.log('repo works!') + }) + ); + +} From 275b43418bdb0b030873fe352eff14618ba185d0 Mon Sep 17 00:00:00 2001 From: Sylvia Wan Date: Thu, 6 Dec 2018 13:15:01 +0000 Subject: [PATCH 3/3] Problems and Issues Solved --- part3.css | 1 + part3.html | 7 +++++-- part3.js | 42 ++++++++++++++++++++++++++---------------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/part3.css b/part3.css index 46bc69e62..13ca69c7b 100644 --- a/part3.css +++ b/part3.css @@ -55,4 +55,5 @@ body { height: 400px; border: 1px solid black; padding-top: 8px; + overflow: auto; } diff --git a/part3.html b/part3.html index 6c38b9d35..991877a29 100644 --- a/part3.html +++ b/part3.html @@ -6,13 +6,15 @@ Part 3 - + + +
- +
@@ -39,5 +41,6 @@

User Repos

+ \ No newline at end of file diff --git a/part3.js b/part3.js index 588012f14..b283f5e0c 100644 --- a/part3.js +++ b/part3.js @@ -1,36 +1,40 @@ -function fetchData(search) { +function fetchData() { let item = document.getElementById('search').value; - let url = 'https://api.github.com/users/'; - let userURL = 'https://api.github.com/users/' + item; - let repoURL = userURL + '/repos'; - let gistURL = url + '/gists'; + 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()) - user.then(data => + .then(function(data) { + console.log(data.login); document.getElementById("picture").src = data.avatar_url; - document.getElementById("name").innerHTML = data.name; - document.getElementById("username").innerHTML = data.login; - document.getElementById("email").innerHTML = data.email; - document.getElementById("location").innerHTML = data.location; - console.log('It works!!'); + 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 => { - let x = 0; - forEach(data => { + data.forEach(data => { x++; }); - document.getElementById("gists").innerHTMl = "No. of Gists:
" + x; - console.log('gists works'); + 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 repo = document.getElementById('repo'); let repoEntry = document.createElement("div"); if (repo == null) { @@ -43,4 +47,10 @@ function fetchData(search) { }) ); + //Remove the previous repo to display a new one + while(repo.firstChild) { + repo.removeChild(repo.firstChild); + + } + }