Committed code from lesson 16

tomer79sagi · Dec 24, 2023 · dbfba2c · dbfba2c
1 parent 83f26b1
commit dbfba2c
Show file tree

Hide file tree

Showing 10 changed files with 283 additions and 0 deletions.
diff --git a/15 - 20.12.23 - Modules/modules/server_module/control.js b/15 - 20.12.23 - Modules/modules/server_module/control.js
@@ -0,0 +1,15 @@
+import { getData, postData } from "./model.js";
+import { default as updateUI } from "./view.js";
+
+// -- CONTROL --
+async function start() {
+  // 1. Get list of posts from server - GET
+  let data = await getData();
+  updateUI(data);
+
+  // 2. Create new post on server - POST
+  data = await postData();
+  alert(`${data.id} - ${data.title}`);
+}
+
+export default start;
diff --git a/15 - 20.12.23 - Modules/modules/server_module/index.html b/15 - 20.12.23 - Modules/modules/server_module/index.html
@@ -0,0 +1,23 @@
+<!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 type="module" src="./main.js"></script>
+  </head>
+  <body>
+    <h1>17.12.23</h1>
+    <h2>Modules</h2>
+
+    <div id="buttons">
+      <button id="btnLoad">Start</button>
+    </div>
+
+    <hr/>
+
+    <div id="output">
+    </div>
+  </body>
+</html>
diff --git a/15 - 20.12.23 - Modules/modules/server_module/main.js b/15 - 20.12.23 - Modules/modules/server_module/main.js
@@ -0,0 +1,3 @@
+import { default as start } from './control.js';
+
+start(); 
diff --git a/15 - 20.12.23 - Modules/modules/server_module/model.js b/15 - 20.12.23 - Modules/modules/server_module/model.js
@@ -0,0 +1,37 @@
+// -- MODEL --
+// 1. Makes call to server
+// 2. Returns a Promise object
+async function getData() {
+
+    // 1. 1st option, using async/await
+    let response = await fetch('https://jsonplaceholder.typicode.com/posts');
+    if (response.ok) { // if HTTP status is within the range of 200 and 299
+      return response.json(); // Similar to JSON.parse();
+    }
+}
+
+async function postData() {
+    const myPost = {
+        title: 'foo',
+        body: 'bar',
+        userId: 1,
+    };
+
+    // 1. 1st option, using async/await
+    let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
+        method: 'POST',
+        body: JSON.stringify(myPost),
+        headers: {
+        'Content-type': 'application/json; charset=UTF-8',
+        },
+    });
+
+    if (response.ok) { // if HTTP status is within the range of 200 and 299
+        return response.json(); // Similar to JSON.parse();
+    }
+}
+
+export {
+    getData,
+    postData
+}
diff --git a/15 - 20.12.23 - Modules/modules/server_module/view.js b/15 - 20.12.23 - Modules/modules/server_module/view.js
@@ -0,0 +1,23 @@
+// -- VIEW --
+// Responsible for updating the UI with data
+// אחראי על עדכון הממשק משתמש באמצעות דאטה שהוא מקבל כקלט לפונקציה
+function updateUI(data) {
+    // משתנה שישמור את התוכן של הטבלה שיתעדכן בכל איטרציה של הלולאה
+    let htmlContent = '';
+
+    // לולאה שעוברת על כל האיברים מהמערך שהתקבל מהתשובה של השרת
+    for (let post of data) {
+      htmlContent += `
+        <tr>
+          <td>${post.userId}</td>
+          <td>${post.id}</td>
+          <td>${post.title}</td>
+          <td>${post.body}</td>
+        </tr>
+      `;
+    }
+
+    document.getElementById('output').innerHTML = `<table>${htmlContent}</table>`;
+}
+
+export default updateUI;
diff --git a/16 - 24.12.23 - OOP basic/15 - homework/time_utilities.js b/16 - 24.12.23 - OOP basic/15 - homework/time_utilities.js
@@ -0,0 +1,30 @@
+class TimeUtil {
+    constructor() {
+        console.log(`Created a new instance of 'TimeUtil'`);
+    }
+
+    createTimer(divID) {
+        let counter = 1;
+
+        // Create an INTERVAL for continuous time updating
+        setInterval(() => {
+            const myDate = new Date();
+
+            const hours = myDate.getHours().toString().padStart(2, '0');
+            const minutes = myDate.getMinutes().toString().padStart(2, '0');
+            const seconds = myDate.getSeconds().toString().padStart(2, '0');
+
+            document.getElementById(divID).innerHTML = `${hours}:${minutes}:${seconds}`;
+        }, 1000);
+    }
+}
+
+function print() {
+    console.log('Hey, how are you?');
+}
+
+export default TimeUtil;
+
+export {
+    print
+}
diff --git a/16 - 24.12.23 - OOP basic/oop_properties/index.html b/16 - 24.12.23 - OOP basic/oop_properties/index.html
@@ -0,0 +1,21 @@
+<!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 type="module" src="./main.js"></script>
+  </head>
+  <body>
+    <h1>24.12.23</h1>
+    <h2>Fetch</h2>
+
+    <div id="buttons">
+      <button id="btnLoad">OOP</button>
+    </div>
+
+    <hr/>
+
+    <div id="output"></div>
+  </body>
+</html>
diff --git a/16 - 24.12.23 - OOP basic/oop_properties/main.js b/16 - 24.12.23 - OOP basic/oop_properties/main.js
@@ -0,0 +1,66 @@
+class Student {
+    first_name;
+    last_name;
+    age = 23;
+
+    constructor(first_name, last_name) {
+        this.first_name = first_name;
+        this.last_name = last_name;
+    }
+
+    // Exercise 2 - Solution
+    sayWelcome() {
+        alert(`Welcome ${this.first_name} ${this.last_name}`);
+    }
+
+    // Exercise 3 - Solution
+    changeName(first_name, last_name) {
+        this.first_name = first_name;
+        this.last_name = last_name;
+    }
+
+    // Encapsulation
+    printToConsole() {
+        console.log(this);
+    }
+
+    printToHTML(divID) {
+        let html = '';
+
+        // 'element' => name of each property in the class
+        // 'this' => the object I'm in, which is of type Student
+        for (let element in this) {
+            html += `${element}: ${this[element]}<br/>`;
+        }
+
+        document.getElementById(divID).innerHTML += html;
+    }
+}
+
+// MUST use regular callback function and NOT arrow function, in order to use the 'this' functionality
+document.getElementById('btnLoad').addEventListener('click', function() {
+    // 'document.getElementById('btnLoad')' --> Button object
+    this.innerHTML = 'Clicked Me';
+    this.style.width = '150px';
+    this.style.backgroundColor = 'green';
+
+    setTimeout(() => {
+        const student1 = new Student('Tomer', 'Sagi');
+        student1.age = 45;
+        student1.sayWelcome();
+        student1.changeName('Michael', 'Jordan');
+        student1.sayWelcome();
+        // student1.printToConsole();
+        // student1.printToHTML('output');
+
+        const student2 = new Student('John', 'Smith');
+        // student2.printToConsole();
+        // student2.printToHTML('output');
+
+        const student3 = new Student('Moshe', 'Zichmech');
+        delete student3.age;
+        // student3.printToConsole();
+        // student3.printToHTML('output');
+    }, 2000);
+
+})
diff --git a/16 - 24.12.23 - OOP basic/oop_static_methods/index.html b/16 - 24.12.23 - OOP basic/oop_static_methods/index.html
@@ -0,0 +1,21 @@
+<!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 type="module" src="./main.js"></script>
+  </head>
+  <body>
+    <h1>24.12.23</h1>
+    <h2>Fetch</h2>
+
+    <div id="buttons">
+      <button id="btnLoad">OOP - Static Methods</button>
+    </div>
+
+    <hr/>
+
+    <div id="output"></div>
+  </body>
+</html>
diff --git a/16 - 24.12.23 - OOP basic/oop_static_methods/main.js b/16 - 24.12.23 - OOP basic/oop_static_methods/main.js
@@ -0,0 +1,44 @@
+class Car {
+    make; // e.g. Hyudai
+    model; // e.g. Getz
+    static totalCars;
+
+    treatmentStatus;
+    static TREATMET_STATUSES = {
+        OPEN: 1,
+        IN_PROGRESS: 2,
+        CLOSED: 3
+    };
+
+    constructor(make, model) {
+        this.make = make;
+        this.model = model;
+        this.treatmentStatus = Car.TREATMET_STATUSES.OPEN;
+    }
+
+    displayDetails() {
+        console.log(`Car details`);
+        console.log(this);
+    }
+
+    static displayTotalCars() {
+        console.log(`Total cars: ${Car.totalCars}`);
+    }
+}
+
+// 1. Create and manipulate OBJECTS of type Car
+const car1 = new Car('Hyundai', 'Getz');
+const car2 = new Car('Subaru', 'Legacy');
+
+car1.displayDetails();
+car2.displayDetails();
+
+// 2. Update and use STATIC properties and methods in Class Car
+Car.totalCars = 5;
+Car.displayTotalCars();
+
+function randomStaticStuff() {
+    Math.random(); // STATIC (don't use 'new')
+    JSON.parse(); // STATIC
+    JSON.stringify(); // STATIC
+}