Home Explore Help
Sign In
irina_bolbat
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

oop_form

Iryna Bolbat 3 years ago
parent
6aed146d74
commit
e7505434c9
3 changed files with 356 additions and 0 deletions
Unified View Show Diff Stats
  1. 14 0
      js_09_oop/index.html
  2. 322 0
      js_09_oop/main.js
  3. 20 0
      js_09_oop/style.css

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

+ 322 - 0
js_09_oop/main.js
View File 

@@ -0,0 +1,322 @@
 
+//Password
 
+// function Password(parent, open){
 
+//     let input = document.createElement('input');
 
+//     input.placeholder = 'your password';
 
+//     input.type = 'password';
 
+
 
+//     let btn= document.createElement('button');
 
+//     btn.type = 'checkbox';
 
+
 
+//     parent.append(input);
 
+//     parent.append(btn);
 
+
 
+//     let value = '';
 
+//     let innerTextForBtn = open;
 
+//     btn.innerText = innerTextForBtn ? 'show password' : 'hide password';
 
+
 
+//     this.setValue = newValue => {
 
+//         if (newValue != ' ' && newValue && newValue !== value){
 
+//             value = newValue;
 
+//         }
 
+//     };
 
+
 
+//     this.setOpen = newOpen => {
 
+//         if (newOpen != innerTextForBtn && newOpen != undefined){
 
+//             innerTextForBtn = newOpen; 
+//         }
 
+//     };
 
+
 
+//     input.oninput = this.onChange = (input) => {
 
+//         value = input.data;
 
+//     };
 
+
 
+//     btn.onclick = this.onOpenChange = (newOpen) => {
 
+//         innerTextForBtn = !innerTextForBtn;
 
+
 
+//         if(input.getAttribute('type') === 'password'){
 
+//             input.type = 'text';
 
+//             btn.innerHTML = 'show password';
 
+
 
+//         } else if (input.getAttribute('type') === 'text') {
 
+//             input.type = 'password';
 
+//             btn.innerHTML = 'hide password';
 
+//         }
 
+//     };
 
+
 
+//     this.getValue = () => value;
 
+//     this.getOpen = () => innerTextForBtn;  
+// }
 
+
 
+// 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());
 
+
 
+//LoginForm
 
+// function Login(parent){
 
+//     let form = document.createElement('form');
 
+
 
+//     let inputLogin = document.createElement('input');
 
+//     inputLogin.placeholder = 'login';
 
+//     inputLogin.type = 'text';
 
+
 
+//     let inputPaswd = document.createElement('input');
 
+//     inputPaswd.placeholder = 'password';
 
+//     inputPaswd.type = 'password';
 
+
 
+//     let btn= document.createElement('button');
 
+//     btn.innerHTML = 'First, write login and password';
 
+
 
+//     parent.append(form);
 
+//     form.append(inputLogin);
 
+//     form.append(inputPaswd);
 
+//     form.append(btn);
 
+
 
+//     let valueLogin = '';
 
+//     let valuePaswd = '';
 
+
 
+//     inputLogin.oninput = () =>{
 
+//         valueLogin = inputLogin.value;
 
+//     };
 
+
 
+//     inputPaswd.oninput = () =>{
 
+//         valuePaswd = inputPaswd.value;
 
+//     };
 
+
 
+//     btn.onclick = (event) =>{
 
+//         event.preventDefault();
 
+//         if(valueLogin === '' && valuePaswd === ''){
 
+//             btn.innerHTML = 'Write login and password';
 
+//             btn.style.backgroundColor = 'red';
 
+//         } else {
 
+//             btn.disabled = true;
 
+//             btn.innerHTML = 'Sent';
 
+//             btn.style.backgroundColor = 'green';
 
+//         }
 
+//     };
 
+// }
 
+
 
+// let p = new Login(document.body, true);
 
+
 
+
 
+//Password Verify
 
+// function Password (parent){
 
+//     let pswd = document.createElement('input');
 
+//     let pswdVerify = document.createElement('input');
 
+//     let btn = document.createElement('button');
 
+
 
+//     pswd.type = 'password';
 
+//     pswdVerify.type = 'password';
 
+
 
+//     btn.innerHTML = 'Check';
 
+
 
+//     parent.append(pswd);
 
+//     parent.append(pswdVerify);
 
+//     parent.append(btn);
 
+
 
+//     let valuePswd = '';
 
+//     let valuePswdVerify = '';
 
+
 
+//     pswdVerify.style.display = 'none';
 
+
 
+
 
+//     pswd.oninput = () =>{
 
+//         valuePswd = pswd.value;
 
+//     };
 
+        
+//     pswdVerify.oninput = () =>{
 
+//         valuePswdVerify = pswdVerify.value;
 
+//     };
 
+
 
+//     let p = document.createElement('p');
 
+//     parent.append(p);
 
+
 
+//     btn.onclick = () => {
 
+//         if(valuePswd === ''){
 
+//             p.innerHTML = 'Write password';
 
+//             p.style.color = 'red';
 
+//         } else if (pswdVerify.style.display === 'block') {
 
+//             if(valuePswd === valuePswdVerify){
 
+//                 p.innerHTML = 'Right password';
 
+//                 p.style.color = 'green';
 
+//             } else{
 
+//                 p.innerHTML = 'You made mistake';
 
+//                 p.style.color = 'red';
 
+//             }
 
+//         } else {
 
+//             pswdVerify.style.display = 'block';
 
+//             p.innerHTML = '';
 
+//         }
 
+//     };
 
+// }
 
+
 
+// let p = new Password(document.body);
 
+
 
+//Form
 
+const dateToDataTimeLocal = date => (new Date(date.getTime() - date.getTimezoneOffset() * 60000)).toISOString().slice(0, -1);
 
+dateToDataTimeLocal(new Date());
 
+
 
+function Form(el, data, okCallback, cancelCallback){
 
+    let formBody = document.createElement('div');
 
+    let okButton = document.createElement('button');
 
+    okButton.innerHTML = 'OK';
 
+
 
+    let cancelButton = document.createElement('button');
 
+    cancelButton.innerHTML = 'Cancel';
 
+
 
+    let inputCreators = {
 
+        String(key, value, oninput){
 
+            let div = document.createElement('div');
 
+            let label = document.createElement('label');
 
+            let input = document.createElement('input');
 
+            label.innerHTML = key;
 
+            input.required = true;
 
+            input.placeholder = key;
 
+            input.value = value;
 
+
 
+            if(key === 'password'){
 
+                input.type = 'password';
 
+            }
 
+
 
+            let p = document.createElement('p');
 
+            p.innerHTML = '';
 
+
 
+            input.oninput = () => {
 
+                (function() {
 
+                    if (input.placeholder in this.validators) {
 
+                        let x = this.validators[input.placeholder](input.value, input.placeholder, this.data, input);
 
+                        if(x !== true){
 
+                            p.style.color = 'red';
 
+                            p.innerHTML = 'Error!';
 
+                            input.style.backgroundColor = 'red';
 
+                            label.appendChild(p);
 
+                        } else {
 
+                            p.innerHTML = '';
 
+                            input.style.backgroundColor = '';
 
+                            console.log(x);
 
+                        }
 
+                        
+                    } else {
 
+                        oninput(input.value);
 
+                    }
 
+                }).call(this);
 
+            }
 
+            formBody.appendChild(div);
 
+            div.appendChild(label,input);
 
+
 
+            let abbr = document.createElement('abbr');
 
+            abbr.title = 'Обязательно';
 
+            abbr.className = 'importantInput';
 
+            abbr.innerHTML = '*';
 
+            label.appendChild(abbr);
 
+            
+            return input;
 
+        },
 
+    
+        Boolean(key, value, oninput){
 
+            let div = document.createElement('div');
 
+            let label = document.createElement('label');
 
+            let input = document.createElement('input');
 
+            label.innerHTML = key;
 
+            input.required = true;
 
+            input.type = 'checkbox';
 
+            input.checked = value;
 
+            input.appendChild(label);
 
+            input.oninput = () => oninput(input.checked);
 
+
 
+            formBody.appendChild(div);
 
+            div.appendChild(label,input);
 
+
 
+            let abbr = document.createElement('abbr');
 
+            abbr.title = 'Обязательно';
 
+            abbr.className = 'importantInput';
 
+            abbr.innerHTML = '*';
 
+            label.appendChild(abbr);
 
+
 
+            return input;
 
+        },
 
+        
+        Date(key, value, oninput){
 
+            let div = document.createElement('div');
 
+            let label = document.createElement('label');
 
+            let input = document.createElement('input');
 
+            label.innerHTML = key;
 
+            input.required = true; 
+            input.type = 'datetime-local';
 
+            input.value = dateToDataTimeLocal(value);
 
+            input.onchange = () =>{
 
+                oninput(new Date(input.value));
 
+            };
 
+
 
+            formBody.appendChild(div);
 
+            div.appendChild(label,input);
 
+
 
+            let abbr = document.createElement('abbr');
 
+            abbr.title = 'Обязательно';
 
+            abbr.className = 'importantInput';
 
+            abbr.innerHTML = '*';
 
+            label.appendChild(abbr);
 
+
 
+            return input;
 
+        }
 
+    }
 
+
 
+    for(const [key, value] of Object.entries(data)){
 
+        let input = inputCreators[value.constructor.name].call(this, key, value, newValue => {
 
+            data[key] = newValue;
 
+        });
 
+
 
+
 
+        formBody.appendChild(input);
 
+    }
 
+    
+    if (typeof okCallback === 'function'){
 
+        formBody.appendChild(okButton);
 
+        okButton.onclick = (e) => {
 
+            this.okCallback(e)
 
+            // console.log(this)
 
+        }
 
+    }
 
+
 
+
 
+    if (typeof cancelCallback === 'function'){
 
+        formBody.appendChild(cancelButton);
 
+        cancelButton.onclick = () => window.location.reload();
 
+    }
 
+
 
+
 
+    el.appendChild(formBody);
 
+
 
+    this.okCallback = okCallback;
 
+    this.cancelCallback = cancelCallback;
 
+    this.data = data;
 
+    this.validators = {};
 
+};
 
+
 
+let form = new Form(formContainer, {
 
+    name: 'Anakin',
 
+    surname: 'Skywalker',
 
+    password: 'qwerty',
 
+    married: true,
 
+    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
 
+}, () => console.log('ok'),() => console.log('cancel') );
 
+form.okCallback = () => console.log('ok')
 
+
 
+form.validators.name = (value, key, data, input) => value.length > 2 && 
+    value[0].toUpperCase() == value[0] &&
 
+    !value.includes(' ') ? true : 'Wrong name';
 
+
 
+form.validators.surname = (value, key, data, input) => value.length > 2 && 
+    value[0].toUpperCase() == value[0] &&
 
+    !value.includes(' ') ? true : 'Wrong name';
 
+
 
+form.validators.password = (value, key, data, input) => value.length > 5 && 
+    !value.includes(' ') ? true : 'Wrong name';
 
+
 
+console.log(form);

+ 20 - 0
js_09_oop/style.css
View File 

@@ -0,0 +1,20 @@
 
+#formContainer div{
 
+    display: flex;
 
+    flex-flow: column wrap;
 
+    width: 30%;
 
+}
 
+
 
+#formContainer div div{
 
+    padding-top: 5%;
 
+}
 
+
 
+label{
 
+    color: blueviolet;
 
+    font-weight: bold;
 
+}
 
+
 
+.importantInput{
 
+    color: red;
 
+    font-size: 15px;
 
+    text-decoration: none;
 
+}