|
|
@@ -0,0 +1,96 @@
|
|
|
+// ДЗ: Functional OOP
|
|
|
+// Password
|
|
|
+function Password(parent, open) {
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.placeholder = 'enter password'
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.type = 'checkbox'
|
|
|
+ parent.append(pass, check)
|
|
|
+ check.onchange = () => {
|
|
|
+ this.setOpen(check.checked)
|
|
|
+ }
|
|
|
+ pass.oninput = () => {
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(pass.value);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.setValue = (value) => (pass.value = value);
|
|
|
+ this.getValue = () => pass.value;
|
|
|
+ this.setOpen = function (open1) {
|
|
|
+ open = open1
|
|
|
+ check.checked = open
|
|
|
+ pass.type = open ? 'text' : 'password'
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(open)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return open
|
|
|
+ }
|
|
|
+}
|
|
|
+let p = new Password(document.body, false)
|
|
|
+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())
|
|
|
+
|
|
|
+// LoginForm
|
|
|
+
|
|
|
+function LoginForm(parent) {
|
|
|
+ let login = document.createElement('input')
|
|
|
+ login.placeholder = 'enter login'
|
|
|
+ let button = document.createElement('button')
|
|
|
+ button.innerText = 'push'
|
|
|
+ button.disabled = true
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.placeholder = 'enter password'
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.type = 'checkbox'
|
|
|
+ parent.append(login, pass, check, button)
|
|
|
+
|
|
|
+ check.onchange = () => {
|
|
|
+ this.setOpen(check.checked)
|
|
|
+ }
|
|
|
+ pass.oninput = () => {
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(pass.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setValue = (value) => (pass.value = value);
|
|
|
+ this.getValue = () => pass.value;
|
|
|
+ this.setOpen = function (newOpen) {
|
|
|
+ open = newOpen
|
|
|
+ check.checked = open
|
|
|
+ pass.type = open ? 'text' : 'password'
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(open)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return open
|
|
|
+ }
|
|
|
+ parent.oninput = function () {
|
|
|
+ if ((!login.value || !pass.value)) {
|
|
|
+ button.disabled = true
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ button.disabled = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+let Form = new LoginForm(login)
|
|
|
+Form.onChange = data => console.log(data)
|
|
|
+Form.onOpenChange = open => console.log(open)
|
|
|
+Form.setValue('qwerty')
|
|
|
+console.log(Form.getValue())
|
|
|
+Form.setOpen(false)
|
|
|
+console.log(Form.getOpen())
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
