added all initial files

octoccoper · octoccoper · commit 8c7840831f4c · 2019-01-24T17:18:01.000+02:00
diff --git a/app.js b/app.js
@@ -0,0 +1,15 @@
+// Initialize EasyHTTP object
+const http = new EasyHTTP;
+const ui = new UI();
+
+
+document.getElementById("next").addEventListener("click", () => {
+
+    // Get randow users
+    http.get('https://randomuser.me/api/')
+        .then(data => {
+            console.log(data);
+            ui.pictureProfile(data);
+        })
+        .catch(err => console.log(err));
+})
diff --git a/easyhttp3.js b/easyhttp3.js
@@ -0,0 +1,19 @@
+/**
+ * EasyHTTP2 Library
+ * Cool library for making HTTP requests
+ *
+ * @version 3.0.0
+ * @author  Kate Lo
+ * @license MIT
+ *
+ **/
+
+class EasyHTTP {
+
+    // Make an HTTP GET Request 
+    async get(url) {
+        const response = await fetch(url);
+        const resData = await response.json();
+        return resData;
+    }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Profile Scroller</title>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <!-- Bootstrap CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
+    crossorigin="anonymous">
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6 mx-auto text-center">
+        <h1 class="mb-3">Profile Scroller</h1>
+        <div id="profile">
+        </div>
+        <button id="next" class="btn btn-dark btn-block">Next</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Optional JavaScript -->
+  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
+    crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
+    crossorigin="anonymous"></script>
+  <script src="easyhttp3.js"></script>
+  <script src="ui.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,5 @@
+#location,
+#lastname,
+#firstname {
+    text-transform: capitalize;
+}
diff --git a/ui.js b/ui.js
@@ -0,0 +1,35 @@
+class UI {
+    constructor() {
+        this.profile = document.getElementById("profile");
+    }
+
+    pictureProfile(data) {
+
+        console.log(data.results[0]);
+
+        this.profile.innerHTML = `
+    <div id="imageDisplay">
+    <img src="${data.results[0].picture.large}">
+    </div>
+    <span>Gender:</span>
+    <span id="gender">${data.results[0].gender}</span>
+    <br>
+    <span>Age:</span>
+    <span id="age">${data.results[0].dob.age}</span>
+    <br>
+    <span>Name:</span>
+    <span id="firstname">${data.results[0].name.first}</span>
+    <span id="lastname">${data.results[0].name.last}</span>
+    <br>
+    <br>
+    <div id="profileDisplay">
+    <span>Ceil phone:</span>
+    <span id="cell">${data.results[0].cell}</span>
+    <br>
+  
+    <span>Location:</span>
+    <span id="location">${data.results[0].location.city}</span>
+    </div>
+    <br>`;
+    }
+}
