diff --git a/03.12.23/xmlhttprequest/index.html b/03.12.23/xmlhttprequest/index.html
new file mode 100644
index 0000000..8a2bfad
--- /dev/null
+++ b/03.12.23/xmlhttprequest/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 19.11.23
+
+
+
+ 19.11.23
+ XMLHttpRequest
+
+
+
+
+
+
+
+
diff --git a/03.12.23/xmlhttprequest/script.js b/03.12.23/xmlhttprequest/script.js
new file mode 100644
index 0000000..385a2ea
--- /dev/null
+++ b/03.12.23/xmlhttprequest/script.js
@@ -0,0 +1,45 @@
+const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+xhr.onload = () => {
+ // Convert JSON text to JS object
+ const responseObj = JSON.parse(xhr.responseText);
+ document.getElementById("jsObj").innerHTML = responseObj[0].name;
+
+ // Display raw JSON text
+ document.getElementById("output").innerHTML = xhr.responseText;
+}
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/users'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+xhr.send();
+
+
+const jsonText = `
+ {
+ "id": 1,
+ "name": "Leanne Graham",
+ "username": "Bret",
+ "email": "Sincere@april.biz"
+ }
+`;
+
+const jsObject = {
+ id: 1,
+ name: "Leanne Graham",
+ username: "Bret",
+ email: "Sincere@april.biz"
+};
+
+
+
+
+
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/comments'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+
+// Big NO NOs
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/get_posts'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+
+
+// xhr.open('POST', 'https://jsonplaceholder.typicode.com/users'); // == CREATE
+// xhr.open('PUT', 'https://jsonplaceholder.typicode.com/users'); // == UPDATE
+// xhr.open('DELETE', 'https://jsonplaceholder.typicode.com/users'); // == DELETE
\ No newline at end of file
diff --git a/03.12.23/xmlhttprequest_exercise/index.html b/03.12.23/xmlhttprequest_exercise/index.html
new file mode 100644
index 0000000..8a2bfad
--- /dev/null
+++ b/03.12.23/xmlhttprequest_exercise/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 19.11.23
+
+
+
+ 19.11.23
+ XMLHttpRequest
+
+
+
+
+
+
+
+
diff --git a/03.12.23/xmlhttprequest_exercise/script.js b/03.12.23/xmlhttprequest_exercise/script.js
new file mode 100644
index 0000000..b6e03aa
--- /dev/null
+++ b/03.12.23/xmlhttprequest_exercise/script.js
@@ -0,0 +1,39 @@
+const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+xhr.onload = () => {
+ // JSON.parse() --> Convert JSON text to Javascript object
+ const userObj = JSON.parse(xhr.responseText);
+
+ // Iterate / loop over all attributes in the 'responseObj'
+ // for ... in --> Objects
+ // for ... of --> Arrays
+ for (let prop in userObj) {
+ // - Iteration 1: prop = 'id';
+ // document.getElementById("jsObj").innerHTML += `${id}: ${userObj[id]}
`;
+
+ // - Iteration 2: prop = 'name'
+ // document.getElementById("jsObj").innerHTML += `${name}: ${userObj[name]}
`;
+
+ // - Iteration 3: prop = 'email'
+ // document.getElementById("jsObj").innerHTML += `${email}: ${userObj[email]}
`;
+
+ // - Iteration 4+: prop = 'name'....
+ // ....
+
+
+ // This is dynamic, how it MUST be
+ //document.getElementById("jsObj").innerHTML += `${prop}: ${userObj[prop]}
`;
+
+ // Options to add new HTML tags
+ // 1. Add to HTML using 'document.createElement()'
+ // 2. Add to HTML using 'innerHTML'
+ document.getElementById("jsObj").innerHTML += `
+
+ ${prop}: ${userObj[prop]}
+
+ `;
+ }
+}
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+xhr.send();
\ No newline at end of file
diff --git a/03.12.23/xmlhttprequest_post/index.html b/03.12.23/xmlhttprequest_post/index.html
new file mode 100644
index 0000000..8a2bfad
--- /dev/null
+++ b/03.12.23/xmlhttprequest_post/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 19.11.23
+
+
+
+ 19.11.23
+ XMLHttpRequest
+
+
+
+
+
+
+
+
diff --git a/03.12.23/xmlhttprequest_post/script.js b/03.12.23/xmlhttprequest_post/script.js
new file mode 100644
index 0000000..ad615bc
--- /dev/null
+++ b/03.12.23/xmlhttprequest_post/script.js
@@ -0,0 +1,43 @@
+function createNewPost() {
+ const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+ // 1. Convert JS object to JSON text so we can 'SEND' to the server
+ const jsonData = JSON.stringify({
+ title: 'foo',
+ body: 'bar',
+ userId: 1
+ });
+
+ // 2. Use the POST method
+ xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
+
+ // 3. Set request headers
+ xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
+
+ // 4. Incldue the 'jsonData' in the 'send()' method
+ xhr.send(jsonData);
+}
+
+
+function getSingleUser() {
+ const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+ xhr.onload = () => {
+ // JSON.parse() --> Convert JSON text to Javascript object
+ const userObj = JSON.parse(xhr.responseText);
+
+ // Iterate / loop over all attributes in the 'responseObj'
+ for (let prop in userObj) {
+ document.getElementById("jsObj").innerHTML += `
+
+ ${prop}: ${userObj[prop]}
+
+ `;
+ }
+ }
+
+ xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+ xhr.send();
+}
+
+createNewPost();
\ No newline at end of file