Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
serg1557733
/
HomeWorks
Tarkkaile 1
Äänestä 0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

HW10 Password OOP first step

serg155alternate 2 vuotta sitten
vanhempi
910099e5e5
commit
df3fcf2f3a
9 muutettua tiedostoa jossa 174 lisäystä ja 2 poistoa
Jaettu näkymä Näytä diff tilastot
  1. BIN
      Class works/volume/Nightingale.mp3
  2. 3 0
      Class works/volume/script.js
  3. 2 1
      HW10 Closures and scopes/index.html
  4. 21 0
      HW10 Closures and scopes/oop/index.html
  5. 56 0
      HW10 Closures and scopes/oop/oop-closures.js
  6. 10 0
      HW10 Closures and scopes/oop/style.css
  7. 15 0
      HW10 Closures and scopes/style.css
  8. 1 1
      HW9 DOM2/index.html
  9. 66 0
      HW9 DOM2/script.js

BIN
Class works/volume/Nightingale.mp3
Näytä tiedosto


+ 3 - 0
Class works/volume/script.js
Näytä tiedosto 

@@ -88,6 +88,9 @@ function Control(el, {
 
     this.getValue = () => value
 
 }
 
 
+
 
+
 
+
 
 const audio = document.querySelector('audio');
 
 
 const red = new Control(root, {

+ 2 - 1
HW10 Closures and scopes/index.html
Näytä tiedosto 

@@ -12,9 +12,10 @@
 
 
 <body>
 
     <div class="container">
 
-       
+        <div class="root"></div>
 
     </div>
 
     <script src="script.js"></script>
 
+    <script src="oop-closures.js"></script>
 
 </body>
 
 
 </html>

+ 21 - 0
HW10 Closures and scopes/oop/index.html
Näytä tiedosto 

@@ -0,0 +1,21 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>HW10 Closures OOP
 
+    </title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div id='root'></div>
 
+    </div>
 
+ 
+    <script src="oop-closures.js"></script>
 
+</body>
 
+
 
+</html>

+ 56 - 0
HW10 Closures and scopes/oop/oop-closures.js
Näytä tiedosto 

@@ -0,0 +1,56 @@
 
+//Password
 
+
 
+function Password(parent = document.body, open = false){
 
+
 
+    const input = document.createElement('input');
 
+    const btn = document.createElement('button');
 
+    
+    parent.append(input, btn);
 
+    let value = '';
 
+    let readProp = open;
 
+    btn.innerText = readProp ? 'show' : 'hide' ;
 
+
 
+    this.setValue = newValue => {
 
+        if (newValue != ' ' && newValue && newValue !== value)
 
+            value = newValue
 
+    }
 
+
 
+    this.setOpen = newOpen => {
 
+        if (newOpen != readProp && newOpen != undefined)
 
+            readProp = newOpen  
+            
+    }
 
+
 
+    input.oninput = this.onChange = (input) => {
 
+        if (typeof this.onChange === 'function' && input.data !== value)
 
+            this.onChange(input.data)
 
+        value = input.data;
 
+
 
+    }
 
+
 
+    btn.onclick = this.onOpenChange = (newOpen) => {
 
+        if (typeof this.onChange === 'function')
 
+            this.onOpenChange(readProp);
 
+        readProp = !readProp;
 
+        btn.innerText = readProp ? 'show' : 'hide' ;
 
+
 
+        }
 
+
 
+    
+    this.getValue = () => value;
 
+    this.getOpen = () => readProp;  
+}
 
+
 
+
 
+
 
+
 
+ let p = new Password(root, true)
 
+
 
+    p.onChange = data => console.log(data)
 
+    p.onOpenChange = open => console.log(open)
 
+
 
+    //p.setValue('qwerty')
 
+    console.log(p.getValue())
 
+
 
+    p.setOpen(true)
 
+    //console.log(p.getOpen())

+ 10 - 0
HW10 Closures and scopes/oop/style.css
Näytä tiedosto 

@@ -0,0 +1,10 @@
 
+*, html {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+.container {
 
+    position: relative;
 
+    max-width: 1140px;
 
+    margin: 0 auto;
 
+    padding: 50px;
 
+}

+ 15 - 0
HW10 Closures and scopes/style.css
Näytä tiedosto 

@@ -8,3 +8,18 @@
 
     margin: 0 auto;
 
     padding: 50px;
 
 }
 
+table {
 
+    margin-bottom: 20px;
 
+}
 
+
 
+td {
 
+    border-style: ridge;
 
+    width: 40px;
 
+    height: 40px;
 
+    text-align: center;
 
+    vertical-align: middle;
 
+
 
+ }
 
+ tr:nth-child(2n + 1) {
 
+    background-color: rgb(223, 227, 235);
 
+ }

+ 1 - 1
HW9 DOM2/index.html
Näytä tiedosto 

@@ -11,7 +11,7 @@
 
 
 <body>
 
     <div class="container">
 
-       
+        <div class="root"></div>
 
     </div>
 
     <script src="script.js"></script>
 
 </body>

+ 66 - 0
HW9 DOM2/script.js
Näytä tiedosto 

@@ -0,0 +1,66 @@
 
+//DOM
 
+
 
+/* ТЕще дз: переписать подсветку таблицы используя минимум this.* и максимум переменных замыкания. Для этого Надо занести обработчики событий во вложенный for  */
 
+
 
+function Table(rootElementClass) {
 
+
 
+    let domElement = document.querySelector(`.${rootElementClass}`);
 
+    this.tableCreate = () => {
 
+        let table = document.createElement('table');
 
+        for (let i = 0; i < 10; i++) {
 
+            let tr = document.createElement('tr');
 
+            table.append(tr);
 
+            for (let k = 0; k < 10; k++) {
 
+                let td = document.createElement('td');
 
+                if (i === 0) {
 
+                    td.innerText = k;
 
+                    tr.append(td);
 
+                } else if (k === 0) {
 
+                    td.innerText = i;
 
+                    tr.append(td);
 
+                } else {
 
+                    td.innerText = i * k;
 
+                    tr.append(td);
 
+                }
 
+            }
 
+        }
 
+        domElement.append(table);
 
+    }
 
+    this.cellLigth = () => {
 
+        const td = document.querySelectorAll('td');
 
+        td.forEach((item, i) => {
 
+            item.onmouseover = (e) => {
 
+                item.style.backgroundColor = 'yellow';
 
+                item.parentNode.style.backgroundColor = 'green';
 
+                let trCollect = Array.from(item.parentElement.parentElement.children);
 
+                trCollect.forEach((el, i) => {
 
+                    if (el.children[i].cellIndex === item.cellIndex) {
 
+                        Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = 'red');
 
+                    }
 
+                });
 
+            };
 
+
 
+            item.onmouseout = () => {
 
+                item.style.backgroundColor = '';
 
+                item.parentNode.style.backgroundColor = '';
 
+                let trCollect = Array.from(item.parentElement.parentElement.children);
 
+                trCollect.forEach((el, i) => {
 
+                    if (el.children[i].cellIndex === item.cellIndex) {
 
+                        Array.from(el.parentElement.children).forEach(elem => elem.children[i].style.backgroundColor = '');
 
+                    }
 
+
 
+                });
 
+            }
 
+        })
 
+
 
+    }
 
+}
 
+
 
+let table1 = new Table('root');
 
+table1.tableCreate();
 
+table1.cellLigth();
 
+
 
+
 
+let table2 = new Table('root');
 
+table1.tableCreate();
 
+table1.cellLigth();