done smal fix

javascript/hw.js

@@ -130,7 +130,7 @@ passwordFistInstance.onOpenChange = (open) => console.log(open, 'onOpenChange');
 passwordFistInstance.setValue({ login: 'qwerty' });
 passwordFistInstance.setValue({ password: 'qwerty1231' });
 console.log(passwordFistInstance.getValue());
-passwordFistInstance.setOpen(false);
+passwordFistInstance.setOpen(true);
 console.log(passwordFistInstance.getOpen());
 
 // class Password {
@@ -175,14 +175,84 @@ function Form(el, data, okCallback, cancelCallback) {
 	this.data = data;
 
 	if (!this.defaultData) this.defaultData = { ...this.data };
+
+	this.validators = {
+		validate(adjust, value, key, input, placeholder, err) {
+			const title = placeholder.children[0];
+			const span = placeholder.children[2];
+			if (!input.required) {
+				title.classList.add('title');
+				input.setAttribute('required', '');
+			}
+			if (adjust(value)) {
+				span.classList.remove('warningSpan--hidden');
+				span.textContent = err;
+				placeholder.classList.add('placeholderWrong');
+				placeholder.classList.remove('placeholderRight');
+				input.classList.add('wrongField');
+				input.classList.remove('rightInput');
+				data[key] = value;
+				return false;
+			} else {
+				span.classList.add('warningSpan--hidden');
+				placeholder.classList.add('placeholderRight');
+				placeholder.classList.remove('placeholderWrong');
+				input.classList.add('rightInput');
+				input.classList.remove('wrongField');
+				data[key] = value;
+				return true;
+			}
+		},
+
+		married(value, key, input, placeholder) {
+			return this.validate(
+				(isTrue) => (isTrue === true || isTrue === false ? true : false),
+				value,
+				key,
+				input,
+				placeholder,
+				'Married has to checked!'
+			);
+		},
+		birthday(value, key, input, placeholder) {
+			return this.validate(
+				() => (value.length === 16 ? false : true),
+				value,
+				key,
+				input,
+				placeholder,
+				'Birthday is required!'
+			);
+		},
+		password(value, key, input, placeholder) {
+			return this.validate(
+				() => (value.length >= 8 ? false : true),
+				value,
+				key,
+				input,
+				placeholder,
+				'Password length min 8!'
+			);
+		},
+		confirmPassword(value, key, input, placeholder) {
+			return this.validate(
+				() => (value === data['password'] ? false : true),
+				value,
+				key,
+				input,
+				placeholder,
+				'Password have to be the same *PASSWORD field'
+			);
+		},
+	};
+
 	const inputCreators = {
-		placeholder(key, value, handelInput, type, event) {
+		placeholder(key, value, handelInput, type, event, validators) {
 			const placeholder = document.createElement('placeholder');
 			placeholder.classList.add('placeholderForm');
 			const input = document.createElement('input');
 			const title = document.createElement('span');
 			title.textContent = key;
-
 			if (validators[key]) {
 				title.classList.add('title');
 				input.setAttribute('required', '');
@@ -206,10 +276,10 @@ function Form(el, data, okCallback, cancelCallback) {
 
 			return placeholder;
 		},
-		string(key, value, handelInput) {
+		string(key, value, handelInput, validators) {
 			const dataTime = new Date(value);
 			if (dataTime.getDate())
-				return inputCreators.object(key, value, handelInput);
+				return inputCreators.object(key, value, handelInput, validators);
 
 			if (value === '*') {
 				return inputCreators.placeholder(
@@ -217,7 +287,8 @@ function Form(el, data, okCallback, cancelCallback) {
 					'',
 					handelInput,
 					'password',
-					'input'
+					'input',
+					validators
 				);
 			} else {
 				return inputCreators.placeholder(
@@ -225,112 +296,29 @@ function Form(el, data, okCallback, cancelCallback) {
 					value,
 					handelInput,
 					'text',
-					'input'
+					'input',
+					validators
 				);
 			}
 		},
-		boolean(key, value, handelInput) {
+		boolean(key, value, handelInput, validators) {
 			return inputCreators.placeholder(
 				key,
 				value,
 				handelInput,
 				'checkbox',
-				'input'
+				'input',
+				validators
 			);
 		},
-		object(key, value, handelInput) {
+		object(key, value, handelInput, validators) {
 			return inputCreators.placeholder(
 				key,
 				value,
 				handelInput,
 				'datetime-local',
-				'input'
-			);
-		},
-	};
-
-	const validators = {
-		validate(adjust, value, key, input, placeholder, err) {
-			const span = placeholder.children[2];
-
-			if (adjust(value)) {
-				span.classList.remove('warningSpan--hidden');
-				span.textContent = err;
-				placeholder.classList.add('placeholderWrong');
-				placeholder.classList.remove('placeholderRight');
-				input.classList.add('wrongField');
-				input.classList.remove('rightInput');
-				data[key] = value;
-				return false;
-			} else {
-				span.classList.add('warningSpan--hidden');
-				placeholder.classList.add('placeholderRight');
-				placeholder.classList.remove('placeholderWrong');
-				input.classList.add('rightInput');
-				input.classList.remove('wrongField');
-				data[key] = value;
-				return true;
-			}
-		},
-
-		name(value, key, input, placeholder) {
-			return validators.validate(
-				(isTrue) => isTrue.length < 6,
-				value,
-				key,
-				input,
-				placeholder,
-				'Name has to be at least 6 characters!'
-			);
-		},
-		surname(value, key, input, placeholder) {
-			return validators.validate(
-				() => false,
-				value,
-				key,
-				input,
-				placeholder,
-				'Name has to be at least 6 characters!'
-			);
-		},
-		married(value, key, input, placeholder) {
-			return validators.validate(
-				(isTrue) => (isTrue === true || isTrue === false ? true : false),
-				value,
-				key,
-				input,
-				placeholder,
-				'Married has to checked!'
-			);
-		},
-		birthday(value, key, input, placeholder) {
-			return validators.validate(
-				() => (value.length === 16 ? false : true),
-				value,
-				key,
-				input,
-				placeholder,
-				'Birthday is required!'
-			);
-		},
-		password(value, key, input, placeholder) {
-			return validators.validate(
-				() => (value.length >= 8 ? false : true),
-				value,
-				key,
-				input,
-				placeholder,
-				'Password length min 8!'
-			);
-		},
-		confirmPassword(value, key, input, placeholder) {
-			return validators.validate(
-				() => (value === data['password'] ? false : true),
-				value,
-				key,
-				input,
-				placeholder,
-				'Password have to be the same *PASSWORD field'
+				'input',
+				validators
 			);
 		},
 	};
@@ -338,18 +326,18 @@ function Form(el, data, okCallback, cancelCallback) {
 	const form = document.createElement('form');
 	form.classList.add('formWrapper');
 
-	const isCheckedLength = Object.keys(this.data).reduce((acc, key, i) => {
-		if (validators[key]) return acc + 1;
-		return acc;
-	}, 0);
-
 	let isChecked = [];
 
 	Object.entries(this.data).forEach(([key, value], i) => {
 		const handelInput = function () {
 			const input = placeholder.children[1];
-			if (validators[key]) {
-				isChecked[i] = validators[key](input.value, key, input, placeholder);
+			if (this.validators[key]) {
+				isChecked[i] = this.validators[key](
+					input.value,
+					key,
+					input,
+					placeholder
+				);
 			} else {
 				data[key] = input.value;
 			}
@@ -358,7 +346,8 @@ function Form(el, data, okCallback, cancelCallback) {
 		const placeholder = inputCreators[typeof value](
 			key,
 			value,
-			handelInput.bind(this)
+			handelInput.bind(this),
+			this.validators
 		);
 
 		form.append(placeholder);
@@ -378,11 +367,15 @@ function Form(el, data, okCallback, cancelCallback) {
 	el.append(form, btnWrapper);
 
 	okButton.onclick = () => {
+		const isCheckedLength = Object.keys(this.data).reduce((acc, key, i) => {
+			if (this.validators[key]) return acc + 1;
+			return acc;
+		}, 0);
+
 		if (isChecked.includes(false) || isCheckedLength !== isChecked.length) {
 			console.log('Not filed some inputs or do not passed validation');
 		} else {
-			localStorage.setItem('data', JSON.stringify(this.data));
-			okCallback(this.data);
+			this.okCallback(this.data);
 		}
 	};
 
@@ -408,7 +401,7 @@ function Form(el, data, okCallback, cancelCallback) {
 				input.value = this.data[input.name];
 			}
 		}
-		cancelCallback(this.data);
+		this.cancelCallback(this.data);
 	};
 }
 
@@ -449,6 +442,36 @@ const formOne = new Form(
 		)
 );
 
+formOne.okCallback = function (data) {
+	localStorage.setItem('data', JSON.stringify(data));
+};
+
+formOne.cancelCallback = function (data) {
+	localStorage.setItem('data', JSON.stringify(data));
+};
+
+formOne.validators.name = function (value, key, input, placeholder) {
+	return this.validate(
+		(isTrue) => isTrue.length < 6,
+		value,
+		key,
+		input,
+		placeholder,
+		'Name has to be at least 6 characters!'
+	);
+};
+
+formOne.validators.surname = function (value, key, input, placeholder) {
+	return this.validate(
+		(isTrue) => isTrue.length < 8,
+		value,
+		key,
+		input,
+		placeholder,
+		'Name has to be at least 8 characters!'
+	);
+};
+
 const formTwo = new Form(
 	document.body,
 	{
@@ -463,6 +486,36 @@ const formTwo = new Form(
 	'formTwo'
 );
 
+formTwo.okCallback = function (data) {
+	localStorage.setItem('data', JSON.stringify(data));
+};
+
+formTwo.cancelCallback = function (data) {
+	localStorage.setItem('data', JSON.stringify(data));
+};
+
+formTwo.validators.name = function (value, key, input, placeholder) {
+	return this.validate(
+		(isTrue) => isTrue.length < 8,
+		value,
+		key,
+		input,
+		placeholder,
+		'Name has to be at least 8 characters!'
+	);
+};
+
+formTwo.validators.height = function (value, key, input, placeholder) {
+	return this.validate(
+		(isTrue) => isTrue.length < 10,
+		value,
+		key,
+		input,
+		placeholder,
+		'Name has to be at least 10 characters!'
+	);
+};
+
 // localStorage.userName
 // 	? alert(`Your name is ${localStorage.userName}`)
 // 	: (localStorage.userName = prompt('What is your name?'));