Home Explore Help
Sign In
Viktoriia.Yurchenko
/
HomeWork
Watch 1
Star 0
Fork 0
Files Issues 2 Pull Requests 0 Wiki
Browse Source

hw js8

Vika 3 years ago
parent
3f9f3d3e70
commit
7e392c4542
7 changed files with 265 additions and 0 deletions
Unified View Show Diff Stats
  1. 14 0
      js8/index.html
  2. 141 0
      js8/main.js
  3. 10 0
      js8/style.css
  4. BIN
      wheel/1@3x.png
  5. 19 0
      wheel/index.html
  6. 81 0
      wheel/main.js
  7. 0 0
      wheel/style.css

+ 14 - 0
js8/index.html
View File 

@@ -0,0 +1,14 @@
 
+<!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>Document</title>
 
+  <link href="style.css" rel="stylesheet">
 
+</head>
 
+<body>
 
+  <div id='wrapperPassword'></div>
 
+  <script src="main.js"></script>
 
+</body>
 
+</html>

+ 141 - 0
js8/main.js
View File 

@@ -0,0 +1,141 @@
 
+//debugger;
 
+function Password (parent, open) {
 
+  
+  const inputPassword = document.createElement('input');
 
+  const buttonSeePassword = document.createElement('button');
 
+  const iputPassword1 = document.createElement('input');
 
+  inputPassword.placeholder = 'password';
 
+  iputPassword1.placeholder = 'login';
 
+  parent.append(inputPassword);
 
+  parent.append(iputPassword1);
 
+  parent.appendChild(buttonSeePassword).innerText = 'see password'; 
+  const buttonCheck = document.createElement('button');
 
+  parent.append(buttonCheck);
 
+  buttonCheck.innerHTML= 'submit';
 
+
 
+  buttonCheck.setAttribute('disabled',true);
 
+
 
+  
+  buttonSeePassword.onclick = () => {
 
+    inputPassword.type === 'password' ?  inputPassword.type = 'text' : inputPassword.type = 'password';
 
+    this.hiddenInput2(); 
+  };
 
+  let value = null; 
+
 
+  this.setValue = newvalue => value = newvalue; 
+  
+  this.getValue = () => value;
 
+
 
+  let valueOpen = null;
 
+
 
+  this.setOpen = newvalue => {
 
+    this.onOpenChange(newvalue);
 
+    open = newvalue;
 
+    open ? (inputPassword.type = 'password', valueOpen = open):(inputPassword.type = 'text', valueOpen = open);
 
+
 
+  };
 
+  
+  this.getOpen = () => valueOpen;
 
+
 
+  this.onChange = function (data) {
 
+    data = inputPassword.value;
 
+    console.log(data);
 
+  };
 
+  
+  inputPassword.oninput = () => {
 
+    this.onChange();
 
+     this.checkPassword();
 
+  }  
+  this.onOpenChange = open => console.log(open);
 
+
 
+  this.checkPassword = function () {
 
+    if(inputPassword.value === iputPassword1.value) { console.log(inputPassword.value, iputPassword1.value)
 
+    buttonCheck.removeAttribute("disabled");  
+    } else {buttonCheck.setAttribute('disabled',true)};
 
+  }
 
+  
+  iputPassword1.oninput = this.checkPassword;
 
+
 
+  this.hiddenInput2 = () => {
 
+    if (inputPassword.type === 'text') {
 
+      iputPassword1.style.visibility = 'hidden';
 
+    } else iputPassword1.style.visibility = 'visible';
 
+  }
 
+
 
+};
 
+
 
+let p = new Password(document.body, true);
 
+p.setValue('qwerty');
 
+console.log(p.getValue());
 
+p.setOpen(false);
 
+console.log(p.getOpen());
 
+p.setOpen(true);
 
+
 
+//Task LoginForm
 
+
 
+// let newP = new Password(document.body);
 
+// const buttonCheck = document.createElement('button');
 
+// document.body.append(buttonCheck);
 
+// buttonCheck.innerHTML= 'submit';
 
+
 
+// const inputList = document.getElementsByTagName('input');
 
+// const inputPassword2 = inputList[2]; 
+// const inputPassword3 = inputList[3];
 
+// buttonCheck.setAttribute('disabled',true);
 
+
 
+// const checkEnterLoginPassword = function () {
 
+//   if (!(inputPassword2.value === '') && !(inputPassword3.value === "")) {
 
+//   buttonCheck.removeAttribute("disabled");
 
+//   };
 
+// }
 
+
 
+// inputPassword2.oninput = checkEnterLoginPassword;
 
+// inputPassword3.oninput = checkEnterLoginPassword;
 
+
 
+
 
+
 
+//LoginForm Constructor
 
+
 
+function LoginForm (parent) {
 
+  const inputPassword = document.createElement('input');
 
+  const buttonSeePassword = document.createElement('button');
 
+  const iputPassword1 = document.createElement('input');
 
+  inputPassword.placeholder = 'password';
 
+  iputPassword1.placeholder = 'login';
 
+  parent.append(inputPassword);
 
+  parent.append(iputPassword1);
 
+  parent.appendChild(buttonSeePassword).innerText = 'see password';
 
+  const buttonCheck = document.createElement('button');
 
+  parent.append(buttonCheck);
 
+  buttonCheck.innerHTML= 'submit';
 
+
 
+  const inputList = document.getElementsByTagName('input');
 
+  const inputPassword2 = inputList[2]; 
+  const inputPassword3 = inputList[3];
 
+  buttonCheck.setAttribute('disabled',true);
 
+
 
+  this.checkEnterLoginPassword = function () {
 
+    if (!(inputPassword2.value === '') && !(inputPassword3.value === "")) {
 
+    buttonCheck.removeAttribute("disabled");
 
+    };
 
+  }
 
+
 
+  inputPassword2.oninput = this.checkEnterLoginPassword;
 
+  inputPassword3.oninput = this.checkEnterLoginPassword;
 
+
 
+  let password = null;
 
+ 
+}
 
+
 
+
 
+let obj = new LoginForm(document.body);
 
+
 
+
 
+//Password Verify add to task 1
 
+
 
+let obj2 = new Password(document.body);
 
+let obj3 = new Password(document.body);
 
+
 
+obj2.setOpen(true);
 
+obj3.setOpen(true);
 
+

+ 10 - 0
js8/style.css
View File 

@@ -0,0 +1,10 @@
 
+input {
 
+  display: block;
 
+  margin-bottom: 10px;
 
+  
+}
 
+
 
+button {
 
+  margin-bottom: 15px;
 
+  margin-right: 30px;
 
+}

BIN
wheel/1@3x.png
View File


+ 19 - 0
wheel/index.html
View File 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html>
 
+    <head>
 
+        <meta charset="utf-8" />
 
+        <meta name="viewport" content="width=device-width" />
 
+        <title>home work</title>
 
+        <style>
 
+            /* #container1 {
 
+                padding: 400px;
 
+            } */
 
+        </style>
 
+    </head>
 
+    <body>
 
+        <div id='container1'></div>
 
+        <div id='container2'></div>
 
+        <div id='container3'></div>
 
+        <script src='main.js'></script>
 
+    </body>
 
+</html>

+ 81 - 0
wheel/main.js
View File 

@@ -0,0 +1,81 @@
 
+function Control(el, {
 
+  value = 0, 
+  min = 0, 
+  max = 255, 
+  minAngle = 0,
 
+  maxAngle = 360, 
+  wheelSpeed = 0.1,
 
+  step = 1 
+} = {}) {
 
+
 
+  const img = document.createElement('img')
 
+    img.src = '1@3x.png';
 
+    el.append(img);
 
+
 
+  const ratio = (maxAngle - minAngle) / (max - min)
 
+  const getAngle = () => (value - min)*ratio + minAngle;
 
+  
+
 
+  this.setValue = newValue => {
 
+    if (newValue > max){
 
+      newValue = max
 
+    }
 
+    if (newValue < min){
 
+      newValue = min
 
+    }
 
+    value = newValue
 
+    img.style.transform = `rotate(${getAngle()}deg)`
 
+  }
 
+
 
+  img.onmousewheel = e => {
 
+    const {deltaY} = e
 
+
 
+    const newValue = value + deltaY*wheelSpeed
 
+    this.setValue(newValue)
 
+
 
+    e.preventDefault()
 
+    const colorNum = getAngle();
 
+    this.onchange(colorNum);
 
+  }
 
+
 
+  img.onclick = e => {
 
+    console.log(e, img.width, e.layerX)
 
+    const {layerX} = e
 
+    const {width} = img
 
+    
+    if (layerX > width/2){
 
+      this.setValue(value +step);
 
+    }
 
+    else {
 
+      this.setValue(value -step);
 
+    }
 
+    
+    const colorNum = getAngle();
 
+    this.onchange(colorNum);
 
+  }
 
+  
+  this.setValue(value);  
+}
 
+
 
+let rgb = {
 
+  red: 0,
 
+  green: 0,
 
+  blue: 0,
 
+}
 
+
 
+const volumeControl1  = new Control(container1, {value: 1})
 
+volumeControl1.onchange = function(value) {
 
+  rgb.red = value;
 
+  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`;
 
+}
 
+
 
+const volumeControl2  = new Control(container2, {value: 1})
 
+volumeControl2.onchange = function(value) {
 
+  rgb.green = value;
 
+  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green} , ${rgb.blue})`;
 
+}
 
+const volumeControl3  = new Control(container3, {value: 1})
 
+volumeControl3.onchange = function(value) {
 
+  rgb.blue = value;
 
+  document.body.style.backgroundColor = `rgb(${rgb.red}, ${rgb.green} , ${rgb.blue})`;
 
+}

+ 0 - 0
wheel/style.css
View File