HW<10> done

HW010/index.js

@@ -1,4 +1,4 @@
-/*  */
+/* Password */
 
 function Password(parent, open) {
     let value = ''
@@ -40,3 +40,184 @@ console.log(p.getValue())
 
 p.setOpen(false)
 console.log(p.getOpen())
+
+/* LoginForm */
+
+function LoginForm(parent, open) {
+    let value = ''
+    let login = document.createElement('input')
+    let submit = document.createElement('input')
+    submit.type = 'submit'
+    submit.disabled = true;
+    login.placeholder = 'Введите логин'
+    
+    let pass = document.createElement('input')
+    pass.placeholder = 'Введите пароль'
+
+    let check = document.createElement('input')
+    check.type = 'checkbox'
+    
+    parent.append(login, pass, check, submit)
+
+    let passAndLogNotEmpty = function () {
+        return login && login.value && pass && pass.value ? true : false;
+    };
+
+    let setSubmit = function () {
+        if (passAndLogNotEmpty()) {
+            submit.disabled = false;
+        } else {
+            submit.disabled = true;
+        }
+    }
+
+    setSubmit();
+
+    pass.onkeyup = () => {
+        setSubmit();
+    }
+
+    login.onkeyup = () => {
+        setSubmit();
+    }
+
+    check.onchange = () => {
+        this.setOpen(check.checked)
+    }
+    //добавить pass oninput, который из pass забирает value, запускает setValue
+    this.getValue = function () {
+        return value
+    }
+    this.setValue = function (value) {
+        // передает value в onchange если он есть
+    }
+    this.getOpen = function () {
+        return open
+    }
+    this.setOpen = function (newOpen) {
+        open = newOpen
+        pass.type = open ? 'text' : 'password'
+        check.checked = open
+        if (typeof this.onOpenChange === 'function') {
+            this.onOpenChange(open)
+        }
+    }
+    this.setOpen(open)
+}
+
+let p = new LoginForm(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())
+
+/* LoginForm Constructor */
+
+function LoginFormConstructor(parent, open) {
+    let login = document.createElement('input')
+    let submit = document.createElement('input')
+    submit.type = 'submit'
+    submit.disabled = true;
+    login.placeholder = 'Введите логин'
+    
+    let pass = document.createElement('input')
+    pass.placeholder = 'Введите пароль'
+
+    let checkbox = document.createElement('input')
+    checkbox.type = 'checkbox'
+
+    parent.append(login, pass, checkbox, submit)
+
+    let form = {
+        login: login.value,
+        password: pass.value,
+        checkbox: checkbox.checked,
+        submitDisabled: submit.disabled
+    }
+
+    let passAndLoginNotEmpty = function () {
+        return login && login.value && pass && pass.value ? true : false;
+    };
+
+    let setSubmit = function () {
+        if (passAndLoginNotEmpty()) {
+            submit.disabled = false;
+        } else {
+            submit.disabled = true;
+        }
+        form.submitDisabled = submit.disabled;
+        if (typeof this.onChange === 'function') {
+            this.onChange(form);
+        }
+    }
+
+    setSubmit();
+
+    pass.onkeyup = () => {
+        setSubmit();
+        form.password = pass.value;
+        if (typeof this.onChange === 'function') {
+            this.onChange(pass.value);
+        }
+        if (typeof this.onChange === 'function') {
+            this.onChange(form);
+        }
+    }
+
+    login.onkeyup = () => {
+        setSubmit();
+        form.login = login.value;
+        if (typeof this.onChange === 'function') {
+            this.onChange(login.value);
+        }
+        if (typeof this.onChange === 'function') {
+            this.onChange(form);
+        }
+    } 
+
+        checkbox.onchange = () => {
+        form.checkbox = checkbox.checked;
+        if (checkbox.checked) {
+            pass.type = 'text';
+        } else {
+            pass.type = 'password';
+        };
+
+        if (typeof this.onChange === 'function') {
+            this.onChange(checkbox.checked);
+        }
+        if (typeof this.onChange === 'function') {
+            this.onChange(form);
+        }
+    } 
+ 
+    this.getValue = function () {
+        return form;
+    }
+    this.setValue = function (newLoginValue, newPasswordValue, newCheckboxValue) {
+        
+        if (typeof newLoginValue === 'string') {
+            login.value = newLoginValue;
+            login.onkeyup();
+        };
+        if (typeof newPasswordValue === 'string') {
+            pass.value = newPasswordValue;
+            pass.onkeyup();
+        };
+        if (typeof newCheckboxValue === 'boolean') {
+            checkbox.disabled = newCheckboxValue;
+            checkbox.onchange();
+        };
+
+    }
+}
+
+let loginForm = new LoginFormConstructor(document.body, true)
+
+
+loginForm.setValue('AntonLevshin', 'qwerty', false);

HW010/Крутилка/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Другой тайтл ПРИВЕТ 17й</title>
+        <style>
+            #container1 {
+                padding: 400px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id='container1'></div>
+        <script src='index.js'></script>
+    </body>
+</html>

HW010/Крутилка/index.js

@@ -0,0 +1,105 @@
+function Control(el, {value=50, 
+    min=0,
+    max=100,
+    minAngle=-90,
+    maxAngle=90, 
+    wheelSpeed=0.1,
+    step=1}={}){
+
+const img = document.createElement('img')
+img.src   = 'img/1@3x.png'
+el.append(img)
+
+const ratio    = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
+const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу
+
+
+this.setValue = (newValue) => {
+if (newValue < min){
+newValue = min
+}
+
+if (newValue > max){
+newValue = max
+}
+
+value = newValue
+
+if (typeof this.onchange === 'function'){
+this.onchange(value)
+}
+
+img.style.transform = `rotate(${getAngle()}deg)`
+}
+
+this.getValue = () => value
+
+img.onmousewheel = (e) => {
+const {deltaY} = e
+//console.log(deltaY)
+e.preventDefault()
+
+this.setValue(value + deltaY*wheelSpeed)
+}
+
+img.onclick = (e) => {
+const {layerX} = e
+console.log(e, layerX)
+if (layerX > img.width/2)
+this.setValue(value +step)
+else 
+this.setValue(value -step)
+}
+
+this.setValue(value)
+}
+
+
+
+const volumeControl  = new Control(container1, {value: 75, minAngle: -180})
+volumeControl.onchange = value => {
+    audio.volume = value / 100;
+     console.log('ON CHANGE', value)
+    } //на каждый setValue
+//console.log(volumeControl.getValue())
+//пришейте к нему тэг audio для громкости
+
+const audio = document.createElement("audio")
+audio.src = "music/Мюслі UA - Вова, їбаш їх блять.mp3"
+document.body.append(audio)
+audio.setAttribute("controls", "")
+audio.style.display = "block"
+audio.style.marginLeft = "auto"
+audio.style.marginRight = "auto"
+
+function setRGB(){
+console.log('setRGB')
+    let redRGB = red.getValue()
+    let greenRGB = green.getValue()
+    let blueRGB = blue.getValue()
+    let autoRGB = (colorDiv.style.background = `rgb(${redRGB}, ${greenRGB}, ${blueRGB})`)
+    return console.log(setRGB)
+//какой то блок, которому меняем цвет через rgba и значения крутилок
+}
+
+const colorDiv = document.createElement("div")
+colorDiv.style.width = "500px"
+colorDiv.style.height = "500px"
+/* colorDiv.style.backgroundColor = "red" */
+colorDiv.style.display = "block"
+colorDiv.style.marginLeft = "auto"
+colorDiv.style.marginRight = "auto"
+document.body.append(colorDiv)
+
+const red  = new Control(container1, {min: 0, max: 255})
+red.onchange = setRGB
+const green  = new Control(container1, {min: 0, max: 255})
+green.onchange = setRGB
+const blue  = new Control(container1, {min: 0, max: 255})
+blue.onchange = setRGB
+
+////сделать три крутилки для RGB
+////и обновлять цвет блока/фона блока при вращении любой из трех
+
+//setTimeout(() => volumeControl.setValue(80), 2000)
+