Home Explore Help
Register Sign In
eugeniy.ho
/
javascript_practice
Watch 1
Star 0
Fork 0
Files Issues 12 Pull Requests 0 Wiki
Browse Source

homework10 done

holevchuk.evgeny 1 year ago
parent
0a1ed0759f
commit
efd7cdd19d
11 changed files with 428 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      hw10/1@3x.png
  2. 10 0
      hw10/loginForm.html
  3. 73 0
      hw10/loginForm.js
  4. 10 0
      hw10/loginFormConstructor.html
  5. 84 0
      hw10/loginFormConstructor.js
  6. 10 0
      hw10/password.html
  7. 47 0
      hw10/password.js
  8. 10 0
      hw10/passwordVerify.html
  9. 78 0
      hw10/passwordVerify.js
  10. 32 0
      hw10/rgb.html
  11. 74 0
      hw10/rgb.js

BIN
hw10/1@3x.png
View File


+ 10 - 0
hw10/loginForm.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="loginForm.js"></script>

+</body>

+</html>

+ 73 - 0
hw10/loginForm.js
View File 

@@ -0,0 +1,73 @@
 
+function Password(parent, open) {

+

+	const input = document.createElement('input');

+	input.type = 'password';

+	parent.appendChild(input);

+

+	const button = document.createElement('button');

+	button.type = 'button';

+	button.textContent = 'показать';

+	parent.appendChild(button);

+

+	button.addEventListener('click', () => {

+		this.setOpen(open !== true);

+	});

+

+	this.setValue = newValue => input.value = newValue;

+

+	this.getValue = () => input.value;

+

+	this.setOpen = openUpdate => {

+		open = openUpdate;

+		this.onOpenChange(openUpdate);

+		button.textContent = (openUpdate) ? 'показать' : 'скрыть';

+		input.type = (openUpdate) ? 'password' : 'text';

+	}

+

+	this.getOpen = () => open;

+

+	input.addEventListener('input', event => {

+		if (typeof this.onChange === 'function'){

+			this.onChange(event.target.value);

+		}

+	});

+

+	this.onOpenChange = isOpen => isOpen;

+}

+

+function LoginForm () {

+

+	const createDivider = () => document.body.appendChild(document.createElement('br'));

+

+	const input = document.createElement('input');

+	input.type = 'text';

+	input.classList.add('form-text');

+	document.body.appendChild(input);

+

+	createDivider();

+

+	const password = new Password(document.body, true);

+

+	createDivider();

+

+	const button = document.createElement('button');

+	button.type = 'button';

+	button.classList.add('login-button');

+	button.textContent = 'Логин';

+	button.disabled = true;

+	document.body.appendChild(button);

+

+	const isDisabled = () => {

+		button.disabled = (password.getValue() !== '' && input.value !== '') ? false : true;

+	}

+

+	password.onChange = () => {

+		isDisabled();

+	}

+

+	input.addEventListener('input', () => {

+		isDisabled();

+	});

+}

+

+LoginForm();

+ 10 - 0
hw10/loginFormConstructor.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+  <script src="loginFormConstructor.js"></script>

+</body>

+</html>

+ 84 - 0
hw10/loginFormConstructor.js
View File 

@@ -0,0 +1,84 @@
 
+function Password(parent, open) {

+

+	const input = document.createElement('input');

+	input.type = 'password';

+	parent.appendChild(input);

+

+	const button = document.createElement('button');

+	button.type = 'button';

+	button.textContent = 'показать';

+	parent.appendChild(button);

+

+	button.addEventListener('click', () => {

+		this.setOpen(open !== true);

+	});

+

+	this.setValue = newValue => input.value = newValue;

+

+	this.getValue = () => input.value;

+

+	this.setOpen = openUpdate => {

+		open = openUpdate;

+		this.onOpenChange(openUpdate);

+		button.textContent = (openUpdate) ? 'показать' : 'скрыть';

+		input.type = (openUpdate) ? 'password' : 'text';

+	}

+

+	this.getOpen = () => open;

+

+	input.addEventListener('input', event => {

+		if (typeof this.onChange === 'function'){

+			this.onChange(event.target.value);

+		}

+	});

+

+	this.onOpenChange = isOpen => isOpen;

+}

+

+function LoginForm (parent) {

+

+	this.createDivider = () => document.body.appendChild(document.createElement('br'));

+

+	const input = document.createElement('input');

+	input.type = 'text';

+	input.classList.add('form-text');

+	parent.appendChild(input);

+

+	const button = document.createElement('button');

+	button.type = 'button';

+	button.classList.add('login-button');

+	button.textContent = 'Логин';

+	button.disabled = true;

+

+	input.addEventListener('input', event => {

+		if (typeof this.onChange === 'function'){

+			this.onChange(event.target.value);

+		}

+	});

+

+	this.getValue = () => input.value;

+

+	this.addButton = () => parent.appendChild(button);

+}

+

+const loginForm = new LoginForm(document.body);

+

+loginForm.createDivider();

+

+const password = new Password(document.body, true);

+

+loginForm.createDivider();

+

+loginForm.addButton();

+

+const isDisabled = () => {

+	document.querySelector('.login-button').disabled = (password.getValue() !== '' && loginForm.getValue() !== '') ? false : true;

+}

+

+password.onChange = () => {

+	isDisabled();

+}

+

+loginForm.onChange = () => {

+	isDisabled();

+}

+ 10 - 0
hw10/password.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="password.js"></script>

+</body>

+</html>

+ 47 - 0
hw10/password.js
View File 

@@ -0,0 +1,47 @@
 
+function Password(parent, open) {

+

+	const input = document.createElement('input');

+	input.type = 'password';

+	parent.appendChild(input);

+

+	const button = document.createElement('button');

+	button.type = 'button';

+	button.textContent = 'показать';

+	parent.appendChild(button);

+

+	button.addEventListener('click', () => {

+		this.setOpen(open !== true);

+	});

+

+	this.setValue = newValue => input.value = newValue;

+

+	this.getValue = () => input.value;

+

+	this.setOpen = openUpdate => {

+		open = openUpdate;

+		this.onOpenChange(openUpdate);

+		button.textContent = (openUpdate) ? 'показать' : 'скрыть';

+		input.type = (openUpdate) ? 'password' : 'text';

+	}

+

+	this.getOpen = () => open;

+

+	input.addEventListener('input', event => {

+		if (typeof this.onChange === 'function'){

+			this.onChange(event.target.value);

+		}

+	});

+

+	this.onOpenChange = isOpen => isOpen;

+}

+

+let p = new Password(document.body, true);

+

+p.onChange = data => console.log(data);

+p.onOpenChange = open => console.log(open);

+

+p.setValue('qwerty');

+console.log(p.getValue());

+

+p.setOpen(false);

+console.log(p.getOpen());

+ 10 - 0
hw10/passwordVerify.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="passwordVerify.js"></script>

+</body>

+</html>

+ 78 - 0
hw10/passwordVerify.js
View File 

@@ -0,0 +1,78 @@
 
+function Password(

+	parent,

+	open,

+	withButton,

+	id

+) {

+

+	const inputPassword = document.createElement('input');

+	inputPassword.type = 'password';

+	inputPassword.id = id;

+	parent.appendChild(inputPassword);

+

+	const buttonPassword = document.createElement('button');

+	buttonPassword.type = 'button';

+	buttonPassword.textContent = 'показать';

+	if(withButton) {

+		parent.appendChild(buttonPassword);

+	}

+

+	const buttonLogin = document.createElement('button');

+	buttonLogin.type = 'button';

+	buttonLogin.classList.add('login-button');

+	buttonLogin.textContent = 'Логин';

+	buttonLogin.disabled = true;

+

+	const divider = document.createElement('br');

+

+	buttonPassword.addEventListener('click', () => {

+		this.setOpen(open !== true);

+	});

+

+	this.setValue = newValue => inputPassword.value = newValue;

+

+	this.getValue = () => inputPassword.value;

+

+	this.setOpen = openUpdate => {

+		open = openUpdate;

+		this.onOpenChange(openUpdate);

+		buttonPassword.textContent = (openUpdate) ? 'показать' : 'скрыть';

+		inputPassword.type = (openUpdate) ? 'password' : 'text';

+	}

+

+	this.getOpen = () => open;

+

+	inputPassword.addEventListener('input', event => {

+		if (typeof this.onChange === 'function'){

+			this.onChange(event.target.value);

+		}

+	});

+

+	this.onOpenChange = isOpen => isOpen;

+

+	this.addButton = () => parent.appendChild(buttonLogin);

+

+	this.addDivider = () => parent.appendChild(divider);

+}

+

+const password1 = new Password(document.body, true, true, 'first_password');

+password1.addDivider();

+const password2 = new Password(document.body, true, false, 'second_password');

+password2.addDivider();

+password1.addButton();

+

+const isEqual = () => {

+	document.querySelector('.login-button').disabled = (password1.getValue() !== password2.getValue());

+}

+

+password1.onOpenChange = (open) => {

+	second_password.style.display = !open ? 'none' : 'inline-block';

+}

+

+password1.onChange = () => {

+	isEqual();

+}

+

+password2.onChange = () => {

+	isEqual();

+}

+ 32 - 0
hw10/rgb.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>

+<html lang="ru">

+	<head>

+		<meta charset="utf-8" />

+		<meta name="viewport" content="width=device-width" />

+		<title>Другой тайтл ПРИВЕТ 17й</title>

+		<style>

+	        #container1 {

+	            padding: 100px;

+	        }

+

+            #container2 img {

+	            margin: 20px;

+	            transition: transform .225s ease;

+	            will-change: transform;

+            }

+

+            #rgb_box {

+                width: 200px;

+	            height: 200px;

+	            margin: 40px;

+	            background-color: #000000;

+            }

+		</style>

+	</head>

+	<body>

+		<div id='container1'></div>

+		<div id='container2'></div>

+		<div id="rgb_box"></div>

+		<script src='index.js'></script>

+	</body>

+</html>

+ 74 - 0
hw10/rgb.js
View File 

@@ -0,0 +1,74 @@
 
+function Control(el, {value=50,

+	min=0,

+	max=100,

+	minAngle=-90, //9 часов

+	maxAngle=90,  //3 часа

+	wheelSpeed=0.1,

+	imgUrl='1@3x.png',

+	step=3}={}){

+

+	const img = document.createElement('img');

+	img.src   = imgUrl;

+	el.append(img)

+

+	//из value с учетом min max и minAngle maxAngle посчиитать угол

+	const ratio = (maxAngle - minAngle) / (max - min)

+	const getAngle = () => minAngle + ratio * value

+

+	this.setValue = newValue => {

+		if (newValue < min){

+			newValue = min

+		}

+		if (newValue > max){

+			newValue = max

+		}

+		if (typeof this.onchange === 'function' && newValue !== value){

+			this.onchange(newValue)

+		}

+		value = newValue

+		img.style.transform = `rotate(${getAngle()}deg)`

+	}

+

+	img.onmousewheel = (event) => {

+		const {deltaY} = event

+		this.setValue(value + deltaY*wheelSpeed)

+		event.preventDefault()

+	}

+

+	img.onclick = (event) => {

+		const {layerX} = event

+		this.setValue(value + (layerX < img.width/2 ? -step: step ))

+	}

+

+	this.getValue = () => value

+	this.setValue(value)

+}

+

+

+

+const volumeControl  = new Control(container1, {value: 0})

+volumeControl.onchange = value => console.log('ON CHANGE', value) //на каждый setValue

+//volumeControl.setValue(75)

+// console.log(volumeControl.getValue())

+// console.log(volumeControl2.getValue())

+//пришейте к нему тэг audio для громкости

+//

+

+

+function setRGB(){

+	rgb_box.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`;

+}

+

+const red  = new Control(container2, {min: 0, max: 255});

+red.onchange = setRGB;

+

+const green  = new Control(container2, {min: 0, max: 255});

+green.onchange = setRGB;

+

+const blue  = new Control(container2, {min: 0, max: 255});

+blue.onchange = setRGB;

+

+//сделать три крутилки для RGB

+//и обновлять цвет блока/фона блока при вращении любой из трех

+

+//setTimeout(() => volumeControl.setValue(80), 2000)