bjg · Lynn-Ngx · Oct 21, 2018 · Dec 2, 2018 · Dec 2, 2018
diff --git a/.idea/2018-ditcs-cmpu4043.iml b/.idea/2018-ditcs-cmpu4043.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/worksheets/2-asnychronous-programming/calculator/calculator.css b/worksheets/2-asnychronous-programming/calculator/calculator.css
@@ -0,0 +1,38 @@
+#calculator{
+    border: 1px solid black;
+    width: 380px;
+    height: 100%;
+    border-radius: 5px;
+    padding: 20px;
+    display: inline-block;
+    text-align: center;
+}
+
+#result{
+    border-radius: 5px;
+    display: inline-block;
+    width: 94%;
+    text-align: right;
+    float: right;
+    font-size: 30px;
+    padding: 10px 5px;
+    margin: 5px 5px 20px 5px;
+    color: darkgray;
+    border-top: 3px solid gray;
+    border-left: 3px solid gray;
+    border-right: 3px solid lightgray;
+    border-bottom: 3px solid lightgray;
+}
+
+#buttons button{
+    width: 85px;
+    height: 40px;
+    margin: 3px;
+    border-radius: 5px;
+    font-size: 20px;
+    background-color: darkgray;
+    border-top: 3px solid darkgray;
+    border-left: 3px solid darkgray;
+    border-right: 3px solid gray;
+    border-bottom: 3px solid gray;
+}
diff --git a/worksheets/2-asnychronous-programming/calculator/calculator.html b/worksheets/2-asnychronous-programming/calculator/calculator.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" type="text/css" href="calculator.css">
+    <link>
+</head>
+<body>
+<div id="calculator">
+    <input id="result" placeholder="0" oninput="newInput(value)">
+
+    <div id="buttons">
+        <button onclick="buttonClicked('(')"> ( </button>
+        <button onclick="buttonClicked(')')"> ) </button>
+        <button onclick="buttonClicked('+')"> &#177</button>
+        <button onclick="buttonClicked('/')"> &divide</button>
+        <button onclick="buttonClicked('7')"> 7 </button>
+        <button onclick="buttonClicked('8')"> 8 </button>
+        <button onclick="buttonClicked('9')"> 9 </button>
+        <button onclick="buttonClicked('x')"> x </button>
+        <button onclick="buttonClicked('4')"> 4 </button>
+        <button onclick="buttonClicked('5')"> 5 </button>
+        <button onclick="buttonClicked('6')"> 6 </button>
+        <button onclick="buttonClicked('-')"> - </button>
+        <button onclick="buttonClicked('1')"> 1 </button>
+        <button onclick="buttonClicked('2')"> 2 </button>
+        <button onclick="buttonClicked('3')"> 3 </button>
+        <button onclick="buttonClicked('+')"> + </button>
+        <button onclick="buttonClicked('0')"> 0 </button>
+        <button onclick="buttonClicked('.')"> . </button>
+        <button onclick="clearInput()" > C </button>
+        <button onclick="calculate()"> = </button>
+    </div>
+</div>
+
+<script src="calculator.js"></script>
+</body>
+</html>
+
diff --git a/worksheets/2-asnychronous-programming/calculator/calculator.js b/worksheets/2-asnychronous-programming/calculator/calculator.js
@@ -0,0 +1,56 @@
+let displayAnswer = false
+const input = document.getElementById("result");
+
+const buttonClicked = (characterClicked) => {
+    //Clear the result bar after the answer has been displayed and a new number was clicked
+    if (displayAnswer) clearInput()
+
+    if(!validateInput(input.value + characterClicked)){
+        if (input.value === '0') input.value = characterClicked
+        else input.value = input.value + characterClicked
+    }
+}
+
+const newInput = (value) => {
+    if (displayAnswer) clearInput()
+    let input = value[value.length -1]
+
+    if(validateInput(value)) {
+        document.getElementById('result').value = value.slice(0, -1)
+    }else {
+        //If input is not one of those keys, then delete that input
+        if (!((input === '0') || (input === '1') || (input === '2') || (input === '3') || (input === '4') || (input === '5')
+            || (input === '6') || (input === '7') || (input === '8') || (input === '9') || (input === '+') || (input === '-')
+            || (input === 'x') || (input === '/')|| (input === '(') || (input === ')') || (input === 'c'))) {
+
+            document.getElementById('result').value = value.slice(0, -1)
+        }
+    }
+    if(input === 'c') clearInput()
+    if(input === '=') calculate()
+}
+
+const validateInput = (value) => {
+    //First character cant be ( or x or /
+    const firstCharacter = value.charAt(0)
+    if (firstCharacter === ')' || firstCharacter === 'x' || firstCharacter === '/') return true
+    else return false
+}
+
+const clearInput = () => {
+    document.getElementById("result").value = ''
+    displayAnswer = false
+}
+
+const calculate = () => {
+    displayAnswer = true
+
+    let input = document.getElementById("result").value.replace('x', '*')
+
+    try {
+        document.getElementById("result").value = eval(String(input))
+    }
+    catch(err) {
+        document.getElementById("result").value = 'Error, try again'
+    }
+}
diff --git a/worksheets/2-asnychronous-programming/functional/functional.html b/worksheets/2-asnychronous-programming/functional/functional.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+</body>
+<script>
+    const getUser = () => {
+        fetch('http://jsonplaceholder.typicode.com/users')
+            .then(response => response.json())
+            .then(data => {
+                data.map(function(users){
+                    userData = {}
+
+                    userData.username = users.username
+                    userData.city = users.address.city
+                    userData.zipcode = users.address.zipcode
+
+                    console.log(userData)
+                })
+                console.log(data.filter(user => (user.address.zipcode[0] === '2' || user.address.zipcode[0] === '5' )))
+            })
+    }
+
+    const getPost = () => {
+        fetch('http://jsonplaceholder.typicode.com/posts')
+            .then(response => response.json())
+            .then(posts => {
+                console.log(posts.filter(post => post.title.split(" ").length > 6))
+
+                console.log(posts.filter(post => post.body.split(" ".length)))
+            })
+    }
+    getUser()
+    getPost()
+</script>
+</html>
diff --git a/worksheets/2-asnychronous-programming/github-user/github-user.css b/worksheets/2-asnychronous-programming/github-user/github-user.css
@@ -0,0 +1,76 @@
+.container{
+    display: inline-block;
+    width: 50%;
+    margin: 5px;
+}
+
+#userProfile {
+    float: left;
+    display: inline-block;
+    border: black solid 1px;
+    padding: 1px;
+    width: 48%;
+    height:450px;
+}
+
+#userRepo{
+    display: inline-block;
+    border: black solid 1px;
+    padding: 1px;
+    width: 48%;
+    height:450px;
+}
+
+#userImage{
+    display:block;
+    margin:auto;
+    width: 70%;
+}
+
+#searchBar{
+    margin: 3px;
+    width: 75%;
+    height: 25px;
+}
+
+.userInfo{
+    border-bottom: black solid 1px;
+    padding: 8px;
+}
+
+#searchButton{
+    width: 20%;
+    height: 30px;
+    border-radius: 10px;
+}
+
+#repos{
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+}
+
+.repos{
+    border-bottom: black solid 1px;
+    padding: 6.5px;
+    height: 20%;
+}
+
+.repoName{
+    padding: 5px;
+}
+
+.repoDesc{
+    padding: 5px;
+}
+
+.header{
+    float: left;
+    width: 50%;
+}
+
+#scroll{
+    height: 390px;
+    overflow: scroll;
+}
diff --git a/worksheets/2-asnychronous-programming/github-user/github-user.html b/worksheets/2-asnychronous-programming/github-user/github-user.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <link rel="stylesheet" href="github-user.css">
+</head>
+<body>
+<div class="container">
+    <input id="searchBar" placeholder="Username" value="">
+    <button id="searchButton" onclick="searchUser()">Search</button>
+</div>
+
+<div class="container" style="display: none">
+    <div id="userProfile">
+        <h3> User Profile</h3>
+        <img id="userImage" src="">
+        <div id="name" class="userInfo"> Name: </div>
+        <div id="username" class="userInfo"> Username: </div>
+        <div id="email" class="userInfo"> Email: </div>
+        <div id="location" class="userInfo"> Location: </div>
+        <div id="gist" class="userInfo"> Gist: </div>
+    </div>
+
+    <div id="userRepo">
+        <h3> User Repos</h3>
+        <div id="scroll">
+            <ul id="repos">
+            </ul>
+        </div>
+    </div>
+</div>
+
+<script src="github-user.js"></script>
+</body>
+</html>
diff --git a/worksheets/2-asnychronous-programming/github-user/github-user.js b/worksheets/2-asnychronous-programming/github-user/github-user.js
@@ -0,0 +1,40 @@
+const getRequest = (link) => {
+    return new Promise(async resolve => {
+        const response = await fetch(link)
+        resolve(response.json())
+    })
+}
+
+const searchUser = async() => {
+    const username = document.getElementById('searchBar').value
+
+    const users = await getRequest('https://api.github.com/users/' + username)
+    const repos = await getRequest('https://api.github.com/users/' + username + '/repos')
+    document.getElementById('repos').innerText = ''
+
+    document.getElementsByClassName('container')[1].style.display = 'block'
+
+    document.getElementById('userImage').src = users.avatar_url
+    document.getElementById('name').innerText = 'Name: ' + users.name
+    document.getElementById('username').innerText = 'Username: ' + users.login
+    document.getElementById('email').innerText = 'Email: ' + users.email
+    document.getElementById('location').innerText = 'Location: ' + users.location
+    document.getElementById('gist').innerText = 'Gist: ' + users.public_gists
+
+    for (let i = 0; i < repos.length; i++) {
+        const li = document.createElement('li')
+        li.setAttribute('class', 'repos')
+
+        const repoName = document.createElement('div')
+        repoName.setAttribute('class', 'repoName')
+        repoName.innerText = 'Name: ' + repos[i].name
+
+        const repoDesc = document.createElement('div')
+        repoDesc.setAttribute('class', 'repoDesc')
+        repoDesc.innerText = 'Description: ' + repos[i].description
+
+        li.appendChild(repoName)
+        li.appendChild(repoDesc)
+        document.getElementById('repos').appendChild(li)
+    }
+}