SocialHackersClass10 · student0b4dc0d3 · Mar 26, 2020 · Mar 26, 2020 · Mar 26, 2020 · Mar 26, 2020
diff --git a/Week1/homework/js-exercises/common-files/api-axios.js b/Week1/homework/js-exercises/common-files/api-axios.js
@@ -0,0 +1,17 @@
+
+    function requestByAxios (theURL,onSuccess,onFailure) {
+        axios.get(theURL)
+        .then(function(aResponse) {
+            //  console.log('Axios call success! ');
+            //  console.log(aResponse);
+            onSuccess(aResponse.data);
+        })
+        .catch(function(anError) {
+            //  console.log('Axios call failed with following message: ');
+            //  console.log(anError);
+            onFailure('Axios',undefined,anError);
+        });
+    };
+
+;
+
diff --git a/Week1/homework/js-exercises/common-files/api-xhr.js b/Week1/homework/js-exercises/common-files/api-xhr.js
@@ -0,0 +1,22 @@
+
+    function requestByXHR (theURL,onSuccess,onFailure) {
+        let myXHR=new XMLHttpRequest();
+        myXHR.onreadystatechange=function() {
+            if (myXHR.readyState===XMLHttpRequest.DONE){
+                if (myXHR.status===200) {
+                    //  console.log('XHR call success! ');
+                    //  console.log(JSON.parse(myXHR.responseText));
+                    onSuccess(JSON.parse(myXHR.responseText));
+                } else {
+                    //  console.log(`XHR call failed with status=[${myXHR.status}] `);
+                    //  if (myXHR.statusText) {console.log(myXHR.statusText)};
+                    onFailure('XHR',myXHR.status,myXHR.statusText);
+                };
+            };
+        };
+        myXHR.open("GET",theURL,true);
+        myXHR.send();
+    };
+
+;
+
diff --git a/Week1/homework/js-exercises/ex01-random-user/index.html b/Week1/homework/js-exercises/ex01-random-user/index.html
@@ -0,0 +1,28 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title id="id_page_title"></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="./main.css" />
+    </head>
+    <body>
+        <div id="id_page_header" class="cls_text_align_right"></div>
+
+        <div class="cls_api_data_container">
+            <table id="id_list_xhr_data"></table>
+            <button onclick="apiCallThroughXHR()">Request new Data through XHR</button>
+        </div>
+        <div class="cls_api_data_container">
+            <table id="id_list_axios_data"></table>
+            <button onclick="apiCallThroughAxios()">Request new Data through Axios</button>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        <script src="../common-files/api-axios.js"></script>
+        <script src="../common-files/api-xhr.js"></script>
+        <script src="./main.js"></script>
+    </body>
+</html>
+
diff --git a/Week1/homework/js-exercises/ex01-random-user/main.css b/Week1/homework/js-exercises/ex01-random-user/main.css
@@ -0,0 +1,67 @@
+
+* {
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    margin: 0px 18px;
+    font-family: sans-serif;
+    font-size: 1.5em;
+}
+
+table {
+    padding: 0px 0px 10px;
+}
+
+td {
+    padding: 0px 12px 3px 0px;
+}
+
+hr {
+    display: block;
+    margin: 12px auto 12px;
+    color: navy;
+    border-style: outset;
+    border-width: 2px;
+}
+
+.cls_text_align_left {
+    text-align: left;
+}
+
+.cls_text_align_right {
+    text-align: right;
+}
+
+.cls_text_align_center {
+    text-align: center;
+}
+
+.cls_unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#id_page_header {
+    padding: 12px 16px 8px 16px;
+    margin: 20px 0 0;
+}
+
+.cls_api_data_container {
+    background: linear-gradient(to bottom right, orange, gold);
+    border-radius: 12px;
+    font-size: 1.2rem;
+    padding: 20px;
+    margin-top: 15px;
+    margin-left: 10px;
+    display: inline-block;
+}
+
+;
+
diff --git a/Week1/homework/js-exercises/ex01-random-user/main.js b/Week1/homework/js-exercises/ex01-random-user/main.js
@@ -0,0 +1,60 @@
+
+{
+    'use strict';
+
+    let lmntRef=document.getElementById('id_page_header');
+    lmntRef.style.backgroundColor='gold';
+    document.getElementById('id_page_title').innerHTML=lmntRef.innerHTML=
+        `(Homework: Javascript 3 - week 1) - (Exercise 01: randomuser API with XHR & Axios)`;
+    lmntRef.style.borderRadius='12px';
+    document.body.style.backgroundColor='#102030';
+
+    const symbolEuro='€';
+    const symbolApostrophe='’';     /*   ’   or ´   or ‘  */
+
+    const xhrListRef=document.getElementById('id_list_xhr_data');
+    const axiosListRef=document.getElementById('id_list_axios_data');
+    const targetURL='https://www.randomuser.me/api';
+
+    apiCallThroughXHR();
+    apiCallThroughAxios();
+
+    function apiCallThroughXHR(){
+        xhrListRef.innerHTML=createProgressHTML();
+        requestByXHR(targetURL,(apiData)=>{xhrListRef.innerHTML=createDataHTML(apiData.results[0])}
+            ,(apiMethod,errorStatus,errorMsg)=>{xhrListRef.innerHTML=createErrorHTML(errorStatus,errorMsg)});
+    };
+
+    function apiCallThroughAxios() {
+        axiosListRef.innerHTML=createProgressHTML();
+        requestByAxios(targetURL,(apiData)=>{axiosListRef.innerHTML=createDataHTML(apiData.results[0])}
+            ,(apiMethod,errorStatus,errorMsg)=>{axiosListRef.innerHTML=createErrorHTML(errorStatus,errorMsg)});
+    };
+
+    function createDataHTML(theData) {
+        return `<tr><td>Name</td><td>(${theData.name.title}) ${
+                                         theData.name.first} ${theData.name.last}</td></tr> `
+             + `<tr><td>Gender</td><td>${theData.gender}</td></tr> `
+             + `<tr><td>Born</td><td>${theData.dob.date.substr(0,10)}</td></tr> `
+             + `<tr><td>Age</td><td>${theData.dob.age}</td></tr> `
+             + `<tr><td>Email</td><td>${theData.email}</td></tr> `
+             + `<tr><td>Country</td><td>${theData.location.country}</td></tr> `
+             + `<tr><td>City</td><td>${theData.location.city}</td></tr> `;
+    }
+
+    function createErrorHTML(theStatus,theMessage) {
+        return '<tr><td>Result</td><td>Unsuccessful</td></tr> '
+             + '<tr><td></td><td></td></tr> '
+             + `<tr><td>Status code</td><td>${theStatus}</td></tr> `
+             + '<tr><td></td><td></td></tr> '
+             + `<tr><td>Message</td><td>${theMessage}</td></tr> `;
+    }
+
+    function createProgressHTML()
+        {return '<tr><td>Request</td><td>Sending in progress...</td></tr> ';}
+
+}
+
+
+;
+
diff --git a/Week1/homework/js-exercises/ex02-random-humor/index.html b/Week1/homework/js-exercises/ex02-random-humor/index.html
@@ -0,0 +1,30 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title id="id_page_title"></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="./main.css" />
+    </head>
+    <body>
+        <div id="id_page_header" class="cls_page_header cls_text_align_right"></div>
+
+        <div id="id_page_info" class="cls_page_header"></div>
+
+        <div class="cls_api_container cls_unselectable">
+            <button onclick="apiCallThroughXHR()">Request new Data through XHR</button>
+            <button onclick="apiCallThroughAxios()">Request new Data through Axios</button>
+            <div class="cls_api_data_container">
+                <img id="id_api_data_image" />
+                <table id="id_api_data_table"></table>
+            </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        <script src="../common-files/api-axios.js"></script>
+        <script src="../common-files/api-xhr.js"></script>
+        <script src="./main.js"></script>
+    </body>
+</html>
+
diff --git a/Week1/homework/js-exercises/ex02-random-humor/main.css b/Week1/homework/js-exercises/ex02-random-humor/main.css
@@ -0,0 +1,87 @@
+
+* {
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    margin: 0px 18px;
+    font-family: sans-serif;
+    font-size: 1.5em;
+}
+
+table {
+    border-spacing: 0;
+}
+
+tr {
+    background: linear-gradient(to bottom right, gold, orange);
+}
+
+td {
+    vertical-align: top;
+    padding: 1px 4px;
+    max-width: 58vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+img {
+    margin: 0 10px 10px 0;
+    height: 100%;
+    border-width: 2px;
+    border-style: outset;
+}
+
+hr {
+    display: block;
+    margin: 12px auto 12px;
+    color: navy;
+    border-style: outset;
+    border-width: 2px;
+}
+
+.cls_text_align_left {
+    text-align: left;
+}
+
+.cls_text_align_right {
+    text-align: right;
+}
+
+.cls_text_align_center {
+    text-align: center;
+}
+
+.cls_unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.cls_page_header {
+    padding: 12px 16px 8px 16px;
+    margin: 20px 0px;
+}
+
+.cls_api_container {
+    background-color: orange;
+    font-size: 1.2rem;
+    padding: 12px 16px;
+    margin-top: 10px;
+    border-radius: 16px;
+}
+
+.cls_api_data_container {
+    padding-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+;
+