Lesson 12 - Code and exercises

tomer79sagi · Dec 11, 2023 · bf60a0b · bf60a0b
1 parent 409f78b
commit bf60a0b
Show file tree

Hide file tree

Showing 55 changed files with 533 additions and 0 deletions.
diff --git a/29.11.23/async/index.html → 10 - 29.11.23/async/index.html b/29.11.23/async/index.html → 10 - 29.11.23/async/index.html
diff --git a/29.11.23/async/script.js → 10 - 29.11.23/async/script.js b/29.11.23/async/script.js → 10 - 29.11.23/async/script.js
diff --git a/29.11.23/async_clear_interval/index.html → ... 29.11.23/async_clear_interval/index.html b/29.11.23/async_clear_interval/index.html → ... 29.11.23/async_clear_interval/index.html
diff --git a/29.11.23/async_clear_interval/script.js → 10 - 29.11.23/async_clear_interval/script.js b/29.11.23/async_clear_interval/script.js → 10 - 29.11.23/async_clear_interval/script.js
diff --git a/29.11.23/async_exercise/index.html → 10 - 29.11.23/async_exercise/index.html b/29.11.23/async_exercise/index.html → 10 - 29.11.23/async_exercise/index.html
diff --git a/29.11.23/async_exercise/script.js → 10 - 29.11.23/async_exercise/script.js b/29.11.23/async_exercise/script.js → 10 - 29.11.23/async_exercise/script.js
diff --git a/29.11.23/xmlhttprequest/index.html → 10 - 29.11.23/xmlhttprequest/index.html b/29.11.23/xmlhttprequest/index.html → 10 - 29.11.23/xmlhttprequest/index.html
diff --git a/29.11.23/xmlhttprequest/script.js → 10 - 29.11.23/xmlhttprequest/script.js b/29.11.23/xmlhttprequest/script.js → 10 - 29.11.23/xmlhttprequest/script.js
diff --git a/03.12.23/xmlhttprequest/index.html → 11 - 03.12.23/xmlhttprequest/index.html b/03.12.23/xmlhttprequest/index.html → 11 - 03.12.23/xmlhttprequest/index.html
diff --git a/03.12.23/xmlhttprequest/script.js → 11 - 03.12.23/xmlhttprequest/script.js b/03.12.23/xmlhttprequest/script.js → 11 - 03.12.23/xmlhttprequest/script.js
diff --git a/03.12.23/xmlhttprequest_exercise/index.html → ....12.23/xmlhttprequest_exercise/index.html b/03.12.23/xmlhttprequest_exercise/index.html → ....12.23/xmlhttprequest_exercise/index.html
diff --git a/03.12.23/xmlhttprequest_exercise/script.js → ...3.12.23/xmlhttprequest_exercise/script.js b/03.12.23/xmlhttprequest_exercise/script.js → ...3.12.23/xmlhttprequest_exercise/script.js
diff --git a/03.12.23/xmlhttprequest_post/index.html → 11 - 03.12.23/xmlhttprequest_post/index.html b/03.12.23/xmlhttprequest_post/index.html → 11 - 03.12.23/xmlhttprequest_post/index.html
diff --git a/03.12.23/xmlhttprequest_post/script.js → 11 - 03.12.23/xmlhttprequest_post/script.js b/03.12.23/xmlhttprequest_post/script.js → 11 - 03.12.23/xmlhttprequest_post/script.js
diff --git a/12 - 10.12.23/11_homework/index.html b/12 - 10.12.23/11_homework/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>10.12.23</h1>
+    <h2>XMLHttpRequest - Homework</h2>
+
+    <div id="buttons">
+      <button id="btnLoad">Load content</button>
+    </div>
+
+    <hr/>
+
+    <div id="output">
+      <table id='myTable'>
+
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/12 - 10.12.23/11_homework/script.js b/12 - 10.12.23/11_homework/script.js
@@ -0,0 +1,53 @@
+let usersObj;
+
+// -- MODEL --
+// Function that retrieves data from server
+const getUsersFromServer = () => {
+    const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+    // When a 'completed' request was called and a 'completed' response was sent back
+    // Here we will handle both successful server actions and unsuccessful server actions
+    xhr.onload = () => {
+        // JSON.parse() --> Convert JSON text to Javascript object
+        usersObj = JSON.parse(xhr.responseText);
+        let usersHTML = '';
+
+        // Create all <TR>s for all users
+        for (let user of usersObj) {
+            usersHTML += `
+                <tr>
+                    <td>${user.id}</td>
+                    <td>${user.name}</td>
+                    <td>${user.email}</td>
+                    <td>${user.phone}</td>
+                </tr>
+            `;
+        }
+
+        // 1. Add titles to the userHTML
+        // 2. Add to DOM
+        document.getElementById('myTable').innerHTML = usersHTML;
+    }
+
+    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+    xhr.send();
+}
+
+// -- VIEW --
+// פונקציה שמקבלת מערך של אובייקטים של משתמשים ומייצרת טבלה להציג אותם
+// Function that recieves array of JS objects and creates a table with the information
+const createTableFromUsers = (arrUsers) => {
+
+}
+
+// -- CONTROLLER -- מתכלל הפעולות בתוכנה
+const displayUsers = () => {
+    // 1. Call server
+    const arrUsers = getUsersFromServer();
+
+    // 2. Update UI
+    createTableFromUsers(arrUsers);
+}
+
+// נחבר את אירוע הלחיצה לפונקציית קבלת המידע מהשרת
+document.getElementById('btnLoad').addEventListener('click', displayUsers);
diff --git a/12 - 10.12.23/11_homework/users.json b/12 - 10.12.23/11_homework/users.json
@@ -0,0 +1,232 @@
+[
+    {
+        "id": 1,
+        "name": "Leanne Graham",
+        "username": "Bret",
+        "email": "[email protected]",
+        "address": {
+            "street": "Kulas Light",
+            "suite": "Apt. 556",
+            "city": "Gwenborough",
+            "zipcode": "92998-3874",
+            "geo": {
+                "lat": "-37.3159",
+                "lng": "81.1496"
+            }
+        },
+        "phone": "1-770-736-8031 x56442",
+        "website": "hildegard.org",
+        "company": {
+            "name": "Romaguera-Crona",
+            "catchPhrase": "Multi-layered client-server neural-net",
+            "bs": "harness real-time e-markets"
+        }
+    },
+    {
+        "id": 2,
+        "name": "Ervin Howell",
+        "username": "Antonette",
+        "email": "[email protected]",
+        "address": {
+            "street": "Victor Plains",
+            "suite": "Suite 879",
+            "city": "Wisokyburgh",
+            "zipcode": "90566-7771",
+            "geo": {
+                "lat": "-43.9509",
+                "lng": "-34.4618"
+            }
+        },
+        "phone": "010-692-6593 x09125",
+        "website": "anastasia.net",
+        "company": {
+            "name": "Deckow-Crist",
+            "catchPhrase": "Proactive didactic contingency",
+            "bs": "synergize scalable supply-chains"
+        }
+    },
+    {
+        "id": 3,
+        "name": "Clementine Bauch",
+        "username": "Samantha",
+        "email": "[email protected]",
+        "address": {
+            "street": "Douglas Extension",
+            "suite": "Suite 847",
+            "city": "McKenziehaven",
+            "zipcode": "59590-4157",
+            "geo": {
+                "lat": "-68.6102",
+                "lng": "-47.0653"
+            }
+        },
+        "phone": "1-463-123-4447",
+        "website": "ramiro.info",
+        "company": {
+            "name": "Romaguera-Jacobson",
+            "catchPhrase": "Face to face bifurcated interface",
+            "bs": "e-enable strategic applications"
+        }
+    },
+    {
+        "id": 4,
+        "name": "Patricia Lebsack",
+        "username": "Karianne",
+        "email": "[email protected]",
+        "address": {
+            "street": "Hoeger Mall",
+            "suite": "Apt. 692",
+            "city": "South Elvis",
+            "zipcode": "53919-4257",
+            "geo": {
+                "lat": "29.4572",
+                "lng": "-164.2990"
+            }
+        },
+        "phone": "493-170-9623 x156",
+        "website": "kale.biz",
+        "company": {
+            "name": "Robel-Corkery",
+            "catchPhrase": "Multi-tiered zero tolerance productivity",
+            "bs": "transition cutting-edge web services"
+        }
+    },
+    {
+        "id": 5,
+        "name": "Chelsey Dietrich",
+        "username": "Kamren",
+        "email": "[email protected]",
+        "address": {
+            "street": "Skiles Walks",
+            "suite": "Suite 351",
+            "city": "Roscoeview",
+            "zipcode": "33263",
+            "geo": {
+                "lat": "-31.8129",
+                "lng": "62.5342"
+            }
+        },
+        "phone": "(254)954-1289",
+        "website": "demarco.info",
+        "company": {
+            "name": "Keebler LLC",
+            "catchPhrase": "User-centric fault-tolerant solution",
+            "bs": "revolutionize end-to-end systems"
+        }
+    },
+    {
+        "id": 6,
+        "name": "Mrs. Dennis Schulist",
+        "username": "Leopoldo_Corkery",
+        "email": "[email protected]",
+        "address": {
+            "street": "Norberto Crossing",
+            "suite": "Apt. 950",
+            "city": "South Christy",
+            "zipcode": "23505-1337",
+            "geo": {
+                "lat": "-71.4197",
+                "lng": "71.7478"
+            }
+        },
+        "phone": "1-477-935-8478 x6430",
+        "website": "ola.org",
+        "company": {
+            "name": "Considine-Lockman",
+            "catchPhrase": "Synchronised bottom-line interface",
+            "bs": "e-enable innovative applications"
+        }
+    },
+    {
+        "id": 7,
+        "name": "Kurtis Weissnat",
+        "username": "Elwyn.Skiles",
+        "email": "[email protected]",
+        "address": {
+            "street": "Rex Trail",
+            "suite": "Suite 280",
+            "city": "Howemouth",
+            "zipcode": "58804-1099",
+            "geo": {
+                "lat": "24.8918",
+                "lng": "21.8984"
+            }
+        },
+        "phone": "210.067.6132",
+        "website": "elvis.io",
+        "company": {
+            "name": "Johns Group",
+            "catchPhrase": "Configurable multimedia task-force",
+            "bs": "generate enterprise e-tailers"
+        }
+    },
+    {
+        "id": 8,
+        "name": "Nicholas Runolfsdottir V",
+        "username": "Maxime_Nienow",
+        "email": "[email protected]",
+        "address": {
+            "street": "Ellsworth Summit",
+            "suite": "Suite 729",
+            "city": "Aliyaview",
+            "zipcode": "45169",
+            "geo": {
+                "lat": "-14.3990",
+                "lng": "-120.7677"
+            }
+        },
+        "phone": "586.493.6943 x140",
+        "website": "jacynthe.com",
+        "company": {
+            "name": "Abernathy Group",
+            "catchPhrase": "Implemented secondary concept",
+            "bs": "e-enable extensible e-tailers"
+        }
+    },
+    {
+        "id": 9,
+        "name": "Glenna Reichert",
+        "username": "Delphine",
+        "email": "[email protected]",
+        "address": {
+            "street": "Dayna Park",
+            "suite": "Suite 449",
+            "city": "Bartholomebury",
+            "zipcode": "76495-3109",
+            "geo": {
+                "lat": "24.6463",
+                "lng": "-168.8889"
+            }
+        },
+        "phone": "(775)976-6794 x41206",
+        "website": "conrad.com",
+        "company": {
+            "name": "Yost and Sons",
+            "catchPhrase": "Switchable contextually-based project",
+            "bs": "aggregate real-time technologies"
+        }
+    },
+    {
+        "id": 10,
+        "name": "Clementina DuBuque",
+        "username": "Moriah.Stanton",
+        "email": "[email protected]",
+        "address": {
+            "street": "Kattie Turnpike",
+            "suite": "Suite 198",
+            "city": "Lebsackbury",
+            "zipcode": "31428-2261",
+            "geo": {
+                "lat": "-38.2386",
+                "lng": "57.2232"
+            }
+        },
+        "phone": "024-648-3804",
+        "website": "ambrose.net",
+        "company": {
+            "name": "Hoeger LLC",
+            "catchPhrase": "Centralized empowering task-force",
+            "bs": "target end-to-end models"
+        }
+    }
+]
diff --git a/12 - 10.12.23/api_nba/index.html b/12 - 10.12.23/api_nba/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>19.11.23</h1>
+    <h2>NBA test</h2>
+    <div id="app"></div>
+    <div id="buttons">
+      <button id="getPlayers">Get Players</button>
+    </div>
+  </body>
+</html>
diff --git a/12 - 10.12.23/api_nba/script.js b/12 - 10.12.23/api_nba/script.js
@@ -0,0 +1,42 @@
+
+// Get players
+function getPlayers() {
+    // 1. Create the XMLHttpRequest object
+    const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+    // 2. Define the successful response function
+    // Make sure to handle the most common ones, 200, 201, 204
+    xhr.onload = () => {
+        // JSON.parse() --> Convert JSON text to Javascript object
+        const data = JSON.parse(xhr.responseText);
+
+        // Iterate / loop over all attributes in the 'responseObj'
+        document.getElementById("app").innerHTML = data;
+    }
+
+    // 3. Define the error response function
+    // Make sure to handle at least the most common ones, 401, 403, 404, 500
+    xhr.onerror = () => {} // Handling errors
+
+    // 4. Define the abort response function
+    xhr.onabort = () => {} // Handling aborted operations (if the operation takes a long time)
+
+    // 5. Define the abort response function
+    xhr.onprogress = () => {} // Handling period updates, e.g. updating a progress bar in the UI
+
+    // 6. Define the GET parameters (ONLY RELEVANT TO GET REQUESTS)
+    var params = "team=1&season=2023";
+
+    // 7. Open the connection to the remote server
+    xhr.open('GET', `https://api-nba-v1.p.rapidapi.com/players?${params}`); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+
+    // 8. Define specific headers to include in the REQUEST, e.g. authentication key
+    xhr.setRequestHeader('X-RapidAPI-Key', 'r66M9SM0SFmshzf6c9KbVDBwXlgVp1pikIxjsn1HaQtduybhz2');
+    xhr.setRequestHeader('X-RapidAPI-Host', 'api-nba-v1.p.rapidapi.com');
+
+    // 9. Make the call to the server
+    xhr.send();
+}
+
+// 10. Attach the function that calls the server to an event in the UI
+document.getElementById('getPlayers').addEventListener('click', getPlayers);
diff --git a/12 - 10.12.23/promise_0/index.html b/12 - 10.12.23/promise_0/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>19.11.23</h1>
+    <h2>Promise</h2>
+
+    <div id="app"></div>
+    <div id="buttons">
+      <button id="start">Start</button>
+    </div>
+  </body>
+</html>