HW pre-final

js/11/hw11_06_personForm.html

@@ -4,24 +4,83 @@
 
 
     <script>
-        const setName = document.createElement('input')  ;
-        const setSurName = document.createElement('input') ;
-        const setFatherName = document.createElement('input') ;
-        const setAge = document.createElement('input') ;
-        const setFullName = document.createElement('input') ;
-        document.body.append(setName);
-        setName.innerText = "Name";
-        document.body.append(setSurName);
-        setSurName.innerText = "Surname";
-        document.body.append(setFatherName);
-        setFatherName.innerText = "Fathername";
-        document.body.append(setFullName);
-        setFullName.innerText = "Fullname";
-        document.body.append(setAge);
-        setAge.innerText = "Age";
-
-        nameInput.oninput = () => { };
+        /*const addElement = (domEl, value, onInputFunc) => {
+            const input = document.createElement('input');
+            input.value = value;
+            input.oninput = onInputFunc;
+            domEl.append(input);
+        }*/
+        const personForm = (domEl, obj) => {
+            /*addElement(
+                domEl,
+                obj.getName(),
+                () => {
+                    obj.setName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getSurName(),
+                () => {
+                    obj.setSurName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getFatherName(),
+                () => {
+                    obj.setFatherName(nameInput.value);
+                    fullNameInput.value = obj.getFullName();
+                });
+            addElement(
+                domEl,
+                obj.getAge(),
+                () => obj.setAge(ageInput.value));
+            addElement(
+                domEl,
+                obj.getFullName(),
+                () => {
+                    obj.setFullName(fullNameInput.value);
+                    nameInput.value = obj.getName();
+                    surNameInput.value = obj.getSurName();
+                    fatherNameInput.value = obj.getFatherName();
+                });*/
 
+            const nameInput = document.createElement('input');
+            const surNameInput = document.createElement('input');
+            const fatherNameInput = document.createElement('input');
+            const ageInput = document.createElement('input');
+            const fullNameInput = document.createElement('input');
+            domEl.append(nameInput);
+            nameInput.value = obj.getName();
+            domEl.append(surNameInput);
+            surNameInput.value = obj.getSurName();
+            domEl.append(fatherNameInput);
+            fatherNameInput.value = obj.getFatherName();
+            domEl.append(fullNameInput);
+            fullNameInput.value = obj.getFullName();
+            domEl.append(ageInput);
+            ageInput.value = obj.getAge();
+            nameInput.oninput = () => {
+                obj.setName(nameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            surNameInput.oninput = () => {
+                obj.setSurName(surNameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            fatherNameInput.oninput = () => {
+                obj.setFatherName(fatherNameInput.value);
+                fullNameInput.value = obj.getFullName();
+            }
+            ageInput.oninput = () => obj.setAge(ageInput.value);
+            fullNameInput.oninput = () => {
+                obj.setFullName(fullNameInput.value);
+                nameInput.value = obj.getName();
+                surNameInput.value = obj.getSurName();
+                fatherNameInput.value = obj.getFatherName();
+            }
+        }
         const isUpperCase = (str) => str.toUpperCase() == str;
         let createPersonClosure = function (name, surName) {
             let result = {};
@@ -30,13 +89,13 @@
             result.getName = () => name;
             result.getSurName = () => surName;
             result.getFullName = function () {
-                return `${result.getName()} ${result.getSurName()}`;
+                return `${result.getName()} ${result.getFatherName()} ${result.getSurName()} `;
             }
             result.setFullName = (newFullName) => {
                 const arrFullName = newFullName.split(' ');
-                result.setFatherName(arrFullName[2]);
-                result.setSurName(arrFullName[0]);
-                result.setName(arrFullName[1]);
+                result.setFatherName(arrFullName[1]);
+                result.setSurName(arrFullName[2]);
+                result.setName(arrFullName[0]);
 
             }
             result.setName = (newName) => {
@@ -60,7 +119,6 @@
                 else
                     alert("wrong Fathername format");
             }
-
             result.getAge = () => age;
             result.setAge = (newAge) => {
                 if (newAge >= 0 && newAge <= 100)
@@ -70,20 +128,8 @@
             }
             result.getFatherName = () => fatherName;
             return result;
-
-        }
-
-
-        const b = createPersonClosure("Анна", "Иванова")
-        b.setAge(15)
-        b.setFullName("Петрова Анна Николаевна")
-
-        function personForm(parent, person) {
-            //насоздавать инпутов (5 штук)
-            //надобавлять их в parent
-            //навесить каждому из них обработчик события типа nameInput.oninput = () => {
-            //тут пытаемся менять person используя person.setName. Текст в инпуте должен стать таким, который вернет setName
-            //}
         }
+        const person = createPersonClosure("Анна", "Иванова");
+        personForm(document.body, person);
     </script>
 </body>

js/11/hw11_07_ .html

@@ -1,6 +1,106 @@
 <head>_____</head>
+
 <body>
     <script>
+        function getSetForm(parent, getSet) {
+            const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
+            const inputs = {} //реестр
+
+            const updateInputs = () => {
+                for (key in inputs) {
+                    getName = "get" + key;
+                    getFunc = getSet[getName];
+                    if (getFunc) {
+                        inputs[key].value = getFunc();
+                    }
+                }//функция обновления полей ввода согласно всяким get....
+                //тут должен быть перебор
+            }
+
+            for (const getSetName in getSet) {
+                const isGet = getSetName.startsWith("get");//первые три буквы переменной getSetName. Так же можно использовать флаг isGet, который будет равен true или false
+                const fieldName = getSetName.substring(3);//остальные буквы getSetName - типа "Name" или "FullName"
+                //const setKey = `set` + fieldName
+                //const getKey = `get` + fieldName
+                input = inputs[fieldName];
+                if (!input) {
+                    input = document.createElement("input");
+                    inputs[fieldName] = input;
+                    input.placeholder = fieldName;
+                    input.disabled = true;
+                    parent.append(input);
+                }
+                if (isGet) {
+                    value = getSet[getSetName]();
+                    type = typeof value;
+                    htmlType = typesMap[type];
+                    input.type = htmlType;
+                    input.value = value;
+                }
+                else {
+                    input.disabled = false;
+                    input.oninput = () => {
+                        getSet[getSetName](input.value);
+                        updateInputs();
+                    }
+
+                }
+                console.log(input);
+                /*   const typesMap = { 'boolean': 'checkbox', 'number': 'number', 'string': 'text' };
+               let str = "<form>\n";
+               for (var name in obj) {
+                   value = obj[name];
+                   type = typeof value;
+                   htmlType = typesMap[type];
+                   str += ` <label>${name}: <input type="${htmlType}" value="${value}" /></label>\n`;
+               }*/
+                //допишите тут все шо надо, и не только тут
+            }
+            updateInputs()
+        }
+
+        let car;
+        {
+            let brand = 'BMW', model = 'X5', volume = 2.4
+            car = {
+                getBrand() {
+                    return brand
+                },
+                setBrand(newBrand) {
+                    if (newBrand && typeof newBrand === 'string') {
+                        brand = newBrand
+                    }
+                    return brand
+                },
+
+                getModel() {
+                    return model
+                },
+                setModel(newModel) {
+                    if (newModel && typeof newModel === 'string') {
+                        model = newModel
+                    }
+                    return model
+                },
+
+                getVolume() {
+                    return volume
+                },
+                setVolume(newVolume) {
+                    if (newVolume && typeof newVolume === 'number' && newVolume > 0 && newVolume < 20) {
+                        volume = newVolume
+                    }
+                    return volume
+                },
+
+                getTax() {
+                    return volume * 100
+                }
+            }
+        }
+        getSetForm(document.body, car);
         
+
+
     </script>
 </body>

js/11/hw11_08_ .html

@@ -1,6 +0,0 @@
-<head>_____</head>
-<body>
-    <script>
-        
-    </script>
-</body>

js/11/hw11_09_ .html

@@ -1,6 +0,0 @@
-<head>_____</head>
-<body>
-    <script>
-        
-    </script>
-</body>

js/11/hw11_10_ .html

@@ -1,6 +0,0 @@
-<head>_____</head>
-<body>
-    <script>
-        
-    </script>
-</body>