Lesson 17 code

tomer79sagi · Dec 27, 2023 · 3a1c430 · 3a1c430
1 parent cdb86c9
commit 3a1c430
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 0 deletions.
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/index.html b/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/index.html
@@ -0,0 +1,24 @@
+<!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="btnStart">16 - Homework</button>
+    </div>
+
+    <hr/>
+
+    <div id="clock1"></div>
+    <div id="clock2"></div>
+    <div id="clock3"></div>
+  </body>
+</html>
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/main.js b/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/main.js
@@ -0,0 +1,13 @@
+import Timer from "./timer.js";
+
+function eventHandler() {
+    const tIsrael = new Timer(0);
+    const tEST = new Timer(-8);
+    const tUK = new Timer(-2);
+
+    tIsrael.displayTimerInDiv('clock1');
+    tEST.displayTimerInDiv('clock2');
+    tUK.displayTimerInDiv('clock3');
+}
+
+document.getElementById('btnStart').addEventListener('click', eventHandler);
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/timer.js b/17 - 27.12.23 - OOP Private - Inheritence/16 - homework/clock/timer.js
@@ -0,0 +1,28 @@
+class TimeUtil {
+    clock;
+    int;
+
+    // 'tzIsraelOffset' determines the hour difference between israel and the desired timezone
+    // Example, EST: 8 hours behind Israel
+    constructor(tzIsraelOffsetHours) {
+        console.log(`Created a new instance of 'TimeUtil'`);
+        this.clock = new Date();
+        this.clock.setMinutes(this.clock.getMinutes() + (tzIsraelOffsetHours * 60));
+    }
+
+    displayTimerInDiv(divID) {
+        // Create an INTERVAL for continuous time updating
+        this.int = setInterval(() => {
+            // this.clock = new Date();
+            this.clock.setSeconds(this.clock.getSeconds() + 1);
+
+            const hours = this.clock.getHours().toString().padStart(2, '0');
+            const minutes = this.clock.getMinutes().toString().padStart(2, '0');
+            const seconds = this.clock.getSeconds().toString().padStart(2, '0');
+
+            document.getElementById(divID).innerHTML = `${hours}:${minutes}:${seconds}`;
+        }, 1000);
+    }
+}
+
+export default TimeUtil;
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/private/index.html b/17 - 27.12.23 - OOP Private - Inheritence/private/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="btnStart">Start</button>
+    </div>
+
+    <hr/>
+
+    <div id="output">
+    </div>
+  </body>
+</html>
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/private/main.js b/17 - 27.12.23 - OOP Private - Inheritence/private/main.js
@@ -0,0 +1,19 @@
+import Person from "./person.js";
+
+function eventHandler() {
+    const p1 = new Person('Tomer Sagi');
+
+    p1.setName('John Smith');
+    p1.setName(55555);
+
+    // p1.#name = 'John Smith';
+    // console.log(p1.#name);
+
+    // p1.setName('John Smith');
+    // console.log(`My name is: ${p1.getName()}`);
+
+    p1.print();
+    document.getElementById('output').innerHTML = p1.toHTMLString();
+}
+
+document.getElementById('btnStart').addEventListener('click', eventHandler);
diff --git a/17 - 27.12.23 - OOP Private - Inheritence/private/person.js b/17 - 27.12.23 - OOP Private - Inheritence/private/person.js
@@ -0,0 +1,56 @@
+class Person {
+    #name;
+    #age;
+
+    constructor(name) {
+        this.#name = name;
+    }
+
+    setName(name) {
+        name = name.toString();
+        if (name.length < 10) {
+            alert(`No you can't, minimum 10 characters! ('${name}' ${name.length})`);
+        } else {
+            this.#reverseNameChars();
+        }
+    }
+
+    // I want only THIS class/object to be able to use this method
+    // 'Tomer Sagi' ==> 'igaS remoT';
+    #reverseNameChars() {
+        let reversedName = '';
+        for (let i=this.#name.length - 1 ; i>=0 ; i--) {
+            reversedName += this.#name.charAt(i);
+        }
+
+        this.#name = reversedName;
+    }
+
+    getName() {
+        return this.#name;
+    }
+
+    setAge(age) {
+        this.#age = age;
+    }
+
+    getAge() {
+        return this.#age;
+    }
+
+    print() {
+        console.log(this);
+    }
+
+    toHTMLString() {
+        let objString = '';
+
+        for (let attr in this) {
+            objString += `${attr}: ${this[attr]}<br/>`;
+        }
+
+        return objString;
+    }
+}
+
+export default Person;