diff --git a/15 - 20.12.23 - Modules/modules/server_module/control.js b/15 - 20.12.23 - Modules/modules/server_module/control.js new file mode 100644 index 0000000..4f889c1 --- /dev/null +++ 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; \ No newline at end of file diff --git a/15 - 20.12.23 - Modules/modules/server_module/index.html b/15 - 20.12.23 - Modules/modules/server_module/index.html new file mode 100644 index 0000000..ea151c0 --- /dev/null +++ b/15 - 20.12.23 - Modules/modules/server_module/index.html @@ -0,0 +1,23 @@ + + + + + + 19.11.23 + + + + +

17.12.23

+

Modules

+ +
+ +
+ +
+ +
+
+ + diff --git a/15 - 20.12.23 - Modules/modules/server_module/main.js b/15 - 20.12.23 - Modules/modules/server_module/main.js new file mode 100644 index 0000000..373676e --- /dev/null +++ b/15 - 20.12.23 - Modules/modules/server_module/main.js @@ -0,0 +1,3 @@ +import { default as start } from './control.js'; + +start(); \ No newline at end of file diff --git a/15 - 20.12.23 - Modules/modules/server_module/model.js b/15 - 20.12.23 - Modules/modules/server_module/model.js new file mode 100644 index 0000000..721249a --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/15 - 20.12.23 - Modules/modules/server_module/view.js b/15 - 20.12.23 - Modules/modules/server_module/view.js new file mode 100644 index 0000000..e657dd5 --- /dev/null +++ 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 += ` + + ${post.userId} + ${post.id} + ${post.title} + ${post.body} + + `; + } + + document.getElementById('output').innerHTML = `${htmlContent}
`; +} + +export default updateUI; \ No newline at end of file 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 new file mode 100644 index 0000000..4b1cb34 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/16 - 24.12.23 - OOP basic/oop_properties/index.html b/16 - 24.12.23 - OOP basic/oop_properties/index.html new file mode 100644 index 0000000..c714178 --- /dev/null +++ b/16 - 24.12.23 - OOP basic/oop_properties/index.html @@ -0,0 +1,21 @@ + + + + + + 19.11.23 + + + +

24.12.23

+

Fetch

+ +
+ +
+ +
+ +
+ + diff --git a/16 - 24.12.23 - OOP basic/oop_properties/main.js b/16 - 24.12.23 - OOP basic/oop_properties/main.js new file mode 100644 index 0000000..7a969de --- /dev/null +++ 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]}
`; + } + + 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); + +}) \ No newline at end of file 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 new file mode 100644 index 0000000..5c72891 --- /dev/null +++ b/16 - 24.12.23 - OOP basic/oop_static_methods/index.html @@ -0,0 +1,21 @@ + + + + + + 19.11.23 + + + +

24.12.23

+

Fetch

+ +
+ +
+ +
+ +
+ + 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 new file mode 100644 index 0000000..6493089 --- /dev/null +++ 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 +} \ No newline at end of file