HW<07>done

js/07/DZ_Objects.txt

@@ -0,0 +1,198 @@
+Literals
+const cat = 
+{
+    "head": 
+    {
+		"name": "cat's head",
+		"ears": [{"name":"ear", "attrs":{"position":"left"}}, {"name":"ear", "attrs":{"position":"right"}}],
+		"eyes": [{"name":"eye", "attrs":{"position":"left"}}, {"name":"eye", "attrs":{"position":"right"}}],
+		"mouth": "cat's"
+	},
+	"body": 
+    {
+        "name": "body",
+		"paws": 
+            [
+                {"name":"paw", "attrs":{"position":"left", "placement": "front"}}, 
+                {"name":"paw", "attrs":{"position":"right", "placement": "front"}},
+                {"name":"paw", "attrs":{"position":"left", "placement": "rear"}},
+                {"name":"paw", "attrs":{"position":"right", "placement": "rear"}},
+            ],
+		"tail": "cat's tail"
+	}
+}
+Literals expand
+cat[prompt("Enter property name")]=prompt("Enter property value");
+cat[prompt("Enter property name")]=prompt("Enter property value");
+Literals copy
+не понял задания
+
+html = 
+	{
+	  "tagName": "body",
+	  "children": [
+		{
+		  "tagname": "div",
+		  "children": [
+			{
+			  "tagName": "span",
+			  "children": [
+				"Enter a data please:"
+			  ],
+			  
+			},
+			{
+			  "tagName": "br"
+			},
+			{
+			  "tagName": "input",
+			  "attrs": {
+				"type": "text",
+				"id": "name"
+			  }
+			},
+			{
+			  "tagName": "input",
+			  "attrs": {
+				"type": "text",
+				"id": "surname"
+			  }
+			}
+		  ]
+		},
+		{
+		  "tagName": "div",
+		  "children": [
+			{
+			  "tagName": "button",
+			  "attrs": {
+				"id": "ok"
+			  },
+			  "children": [
+				"OK"
+			  ]
+			},
+			{
+			  "tagName": "button",
+			  "attrs": {
+				"id": "cancel"
+			  },
+			  "children": [
+				"Cancel"
+			  ]
+			}
+		  ]
+		}
+	  ]
+	}
+
+
+Html tree
+html.children[1].children[1].children[0]
+'Cancel'
+html.children[0].children[3].attrs.id
+'surname'
+
+Parent
+html.children[0].parent=html
+html.children[1].parent=html
+html.children[0].children[0].parent=html.children[0]
+html.children[0].children[1].parent=html.children[0]
+html.children[0].children[2].parent=html.children[0]
+html.children[0].children[3].parent=html.children[0]
+html.children[0].children[2].attrs.parent=html.children[0].children[2]
+html.children[0].children[3].attrs.parent=html.children[0].children[3]
+html.children[1].children[0].parent=html.children[1]
+html.children[1].children[1].parent=html.children[1]
+html.children[1].children[0].attrs.parent=html.children[1].children[0]
+html.children[1].children[1].attrs.parent=html.children[1].children[1]
+destruct array
+[odd1, even1, odd2, even2, odd3, ...letters] = arr
+destruct string
+[number, [s1, s2, s3]] = arr
+destruct 2
+let {children: [{name: name1}, {name: name2}]} = obj
+destruct 3
+let {0: a, 1: b, length}=arr
+Change OK
+html.children[1].children[0].attrs.test = prompt("enter attribute value")
+html.children[1].children[0].attrs[prompt("enter attribute name")] = prompt("enter attribute value")
+Destructure
+const {children: [{children: [{children}]}]}=html
+Destruct array
+let {0: odd1, 2: odd2, 4: odd3, 1: even1, 3: even2, ...letters} = arr
+Destruct string
+let {0: number, 1: {0: s1, 1: s2, 2: s3}} = arr
+destruct 2
+let {children: [{name: name1}, {name: name2}]} = obj //не вижу разницы в определении по сравнению с аналогичным выше
+Destruct 3
+let {0: a, 1: b, length}=arr //не вижу разницы в определении по сравнению с аналогичным выше
+Form
+obj = {
+      "Name":"chevrolet chevelle malibu",
+      "Cylinders":8,
+      "Displacement":307,
+      "Horsepower":130,
+      "Weight_in_lbs":3504,
+      "Origin":"USA",
+      "in_production": false
+}
+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];
+    if(htmlType=='text' && !isNaN(+value))
+        htmlType = typesMap['number']
+    str += `   <label>${name}: <input type="${htmlType}" value="${obj[name]}" /></label>\n`;
+}
+ str+="<form>"
+document.write(str)
+alert(str)
+Table //Эту уже не успеваю писать for-ы - решил в 4 строчки. попробуй посмотреть, завтра объясню
+var arr = [
+   {
+      "Name":"chevrolet chevelle malibu",
+      "Cylinders":8,
+      "Displacement":307,
+      "Horsepower":130,
+      "Weight_in_lbs":3504,
+      "Origin":"USA"
+   },
+   {
+      "Name":"buick skylark 320",
+      "Miles_per_Gallon":15,
+      "Cylinders":8,
+      "Displacement":350,
+      "Horsepower":165,
+      "Weight_in_lbs":3693,
+      "Acceleration":11.5,
+      "Year":"1970-01-01",
+   },
+   {
+      "Miles_per_Gallon":18,
+      "Cylinders":8,
+      "Displacement":318,
+      "Horsepower":150,
+      "Weight_in_lbs":3436,
+      "Year":"1970-01-01",
+      "Origin":"USA"
+   },
+   {
+      "Name":"amc rebel sst",
+      "Miles_per_Gallon":16,
+      "Cylinders":8,
+      "Displacement":304,
+      "Horsepower":150,
+      "Year":"1970-01-01",
+      "Origin":"USA"
+   },
+]
+names = Object.entries(arr.reduce((prev, next) => {return {...prev, ...next};} )).map(entry => entry[0]);
+str = "<tr>"+names.map(name => `<td>${name}<td>`).join('')+"</tr>";
+str += `<table>${arr.map(obj => `<tr>${names.map(name => `<td>${obj[name]||"-"}</td>`).join('')}</tr>`).join('')}</table>`
+document.write(str)
+
+
+

js/07/hw07_01.html

@@ -1,17 +1,50 @@
-<head>Currency rate</head>
+<header>
+    <h1>Literals</h1>
+</header>
 
 <body>
     <script>
-        let toCurrency = prompt("Введите приобретаемую валюту").trim().toUpperCase();
-        let fromCurrency = prompt("Введите валюту платежа").trim().toUpperCase();
-        let currencyAmount = +prompt("Введите сумму платежа").trim().toUpperCase();
-        fetch(`https://open.er-api.com/v6/latest/${fromCurrency}`)
-            .then(response => response.json())
-            .then(data => {
-                totalCurrency = currencyAmount * data.rates[toCurrency];
-                alert("Total amount: " + totalCurrency + " " + toCurrency);
+        const cat =
+        {
+            "head":
+            {
+                "name": "cat's head",
+                "ears":
+                    [
+                        {
+                            "name": "ear",
+                            "attrs":
+                            {
+                                "position": "left"
+                            }
+                        },
+                        {
+                            "name": "ear",
+                            "attrs":
+                            {
+                                "position": "right"
+                            }
+                        }
+                    ],
+                "eyes": [{ "name": "eye", "attrs": { "position": "left" } }, { "name": "eye", "attrs": { "position": "right" } }],
+                "mouth": "cat's"
+            },
+            "body":
+            {
+                "name": "cat's body",
+                "paws":
+                    [
+                        { "name": "paw", "attrs": { "position": "left", "placement": "front" } },
+                        { "name": "paw", "attrs": { "position": "right", "placement": "front" } },
+                        { "name": "paw", "attrs": { "position": "left", "placement": "rear" } },
+                        { "name": "paw", "attrs": { "position": "right", "placement": "rear" } },
+                    ],
+                "tail": "cat's tail"
+            }
+        }
+
 
 
-            });
     </script>
+
 </body>

js/07/hw07_02.html

@@ -1,18 +1,33 @@
-<head>Currency drop down</head>
+<header>
+    <h1>Literals expand</h1>
+</header>
 
 <body>
     <script>
-
-        fetch(`https://open.er-api.com/v6/latest/USD`)
-            .then(response => response.json())
-            .then(data => {
-                const currencies = Object.keys(data.rates);
-                let str = "<select>";
-                for (let currency of currencies) {
-                    str += `<option>${currency}</option>`;
-                }
-                str += "</select>";
-                document.write(str);
-            });
+        const cat =
+        {
+            "head":
+            {
+                "name": "cat's head",
+                "ears": [{ "name": "ear", "attrs": { "position": "left" } }, { "name": "ear", "attrs": { "position": "right" } }],
+                "eyes": [{ "name": "eye", "attrs": { "position": "left" } }, { "name": "eye", "attrs": { "position": "right" } }],
+                "mouth": "cat's"
+            },
+            "body":
+            {
+                "name": "cat's body",
+                "paws":
+                    [
+                        { "name": "paw", "attrs": { "position": "left", "placement": "front" } },
+                        { "name": "paw", "attrs": { "position": "right", "placement": "front" } },
+                        { "name": "paw", "attrs": { "position": "left", "placement": "rear" } },
+                        { "name": "paw", "attrs": { "position": "right", "placement": "rear" } },
+                    ],
+                "tail": "cat's tail"
+            }
+        }
+        cat[prompt("Enter property name")] = prompt("Enter property value");
+        cat[prompt("Enter property name")] = prompt("Enter property value");
     </script>
+
 </body>

js/07/hw07_04.html

@@ -0,0 +1,72 @@
+<header>
+    <h1>Html tree</h1>
+</header>
+
+<body>
+    <script>
+        html =
+        {
+            "tagName": "body",
+            "children": [
+                {
+                    "tagname": "div",
+                    "children": [
+                        {
+                            "tagName": "span",
+                            "children": [
+                                "Enter a data please:"
+                            ],
+                        },
+                        {
+                            "tagName": "br"
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "name"
+                            }
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "surname"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "tagName": "div",
+                    "children": [
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "ok"
+                            },
+                            "children": [
+                                "OK"
+                            ]
+                        },
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "cancel"
+                            },
+                            "children": [
+                                "Cancel"
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+
+
+        alert(html.children[1].children[1].children[0]);
+        //'Cancel'
+        alert(html.children[0].children[3].attrs.id);
+        //'surname'
+    </script>
+
+</body>

js/07/hw07_05.html

@@ -0,0 +1,74 @@
+<header>
+    <h1>Parent</h1>
+</header>
+
+<body>
+    <script>
+        html =
+        {
+            "tagName": "body",
+            "children": [
+                {
+                    "tagname": "div",
+                    "children": [
+                        {
+                            "tagName": "span",
+                            "children": [
+                                "Enter a data please:"
+                            ],
+                        },
+                        {
+                            "tagName": "br"
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "name"
+                            }
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "surname"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "tagName": "div",
+                    "children": [
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "ok"
+                            },
+                            "children": [
+                                "OK"
+                            ]
+                        },
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "cancel"
+                            },
+                            "children": [
+                                "Cancel"
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        html.children[0].parent = html;
+        html.children[1].parent = html;
+        html.children[0].children[0].parent = html.children[0];
+        html.children[0].children[1].parent = html.children[0];
+        html.children[0].children[2].parent = html.children[0];
+        html.children[0].children[3].parent = html.children[0];
+        html.children[1].children[0].parent = html.children[1];
+        html.children[1].children[1].parent = html.children[1];
+    </script>
+
+</body>

js/07/hw07_06.html

@@ -0,0 +1,11 @@
+<header>
+    <h1>destruct array</h1>
+</header>
+
+<body>
+    <script>
+        let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
+        [odd1, even1, odd2, even2, odd3, ...letters] = arr;
+    </script>
+
+</body>

js/07/hw07_07.html

@@ -0,0 +1,12 @@
+<header>
+    <h1>destruct string</h1>
+</header>
+
+<body>
+    <script>
+        let arr = [1, "abc"];
+        [number, [s1, s2, s3]] = arr;
+
+    </script>
+
+</body>

js/07/hw07_08.html

@@ -0,0 +1,13 @@
+<header>
+    <h1>destruct 2</h1>
+</header>
+<body>
+    <script>
+        let obj = {
+            name: 'Ivan',
+            surname: 'Petrov',
+            children: [{ name: 'Maria' }, { name: 'Nikolay' }]
+        };
+        let { children: [{ name: name1 }, { name: name2 }] } = obj
+    </script>
+</body>

js/07/hw07_09.html

@@ -0,0 +1,10 @@
+<header>
+    <h1>destruct 3</h1>
+</header>
+
+<body>
+    <script>
+        let arr = [1, 2, 3, 4, 5, 6, 7, 10];
+        let { 0: a, 1: b, length } = arr;
+    </script>
+</body>

js/07/hw07_10.html

@@ -0,0 +1,68 @@
+<header>
+    <h1>Change OK</h1>
+</header>
+
+<body>
+    <script>
+        html =
+        {
+            "tagName": "body",
+            "children": [
+                {
+                    "tagname": "div",
+                    "children": [
+                        {
+                            "tagName": "span",
+                            "children": [
+                                "Enter a data please:"
+                            ],
+                        },
+                        {
+                            "tagName": "br"
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "name"
+                            }
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "surname"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "tagName": "div",
+                    "children": [
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "ok"
+                            },
+                            "children": [
+                                "OK"
+                            ]
+                        },
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "cancel"
+                            },
+                            "children": [
+                                "Cancel"
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+       // html.children[1].children[0].attrs.test = prompt("enter attribute value");
+        html.children[1].children[0].attrs[prompt("enter attribute name")] = prompt("enter attribute value");
+    </script>
+
+</body>

js/07/hw07_11.html

@@ -0,0 +1,72 @@
+<header>
+    <h1>Destructure</h1>
+</header>
+
+<body>
+    <script>
+        html =
+        {
+            "tagName": "body",
+            "children": [
+                {
+                    "tagname": "div",
+                    "children": [
+                        {
+                            "tagName": "span",
+                            "children": [
+                                "Enter a data please:"
+                            ],
+                        },
+                        {
+                            "tagName": "br"
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "name"
+                            }
+                        },
+                        {
+                            "tagName": "input",
+                            "attrs": {
+                                "type": "text",
+                                "id": "surname"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "tagName": "div",
+                    "children": [
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "ok"
+                            },
+                            "children": [
+                                "OK"
+                            ]
+                        },
+                        {
+                            "tagName": "button",
+                            "attrs": {
+                                "id": "cancel"
+                            },
+                            "children": [
+                                "Cancel"
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+
+        const { children: [{ children: [{ children: [spanValue] }] }] } = html;
+        children[1].children[1].children[0];
+        const { children: [, { children: [, { children: [btnValue] }] }] } = html;
+        const { children: [{ children: [, , , { attrs: { id } }] }] } = html;
+
+    </script>
+
+</body>

js/07/hw07_12.html

@@ -0,0 +1,11 @@
+<header>
+    <h1>Destruct array</h1>
+</header>
+
+<body>
+    <script>
+        let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
+        let { 0: odd1, 2: odd2, 4: odd3, 1: even1, 3: even2, ...letters } = arr;
+    </script>
+
+</body>

js/07/hw07_13.html

@@ -0,0 +1,11 @@
+<header>
+    <h1>Destruct string</h1>
+</header>
+
+<body>
+    <script>
+        let arr = [1, "abc"];
+        let { 0: number, 1: { 0: s1, 1: s2, 2: s3 } } = arr;
+    </script>
+
+</body>

js/07/hw07_14.html

@@ -0,0 +1,17 @@
+<head>Currency rate</head>
+
+<body>
+    <script>
+        let toCurrency = prompt("Введите приобретаемую валюту").trim().toUpperCase();
+        let fromCurrency = prompt("Введите валюту платежа").trim().toUpperCase();
+        let currencyAmount = +prompt("Введите сумму платежа").trim().toUpperCase();
+        fetch(`https://open.er-api.com/v6/latest/${fromCurrency}`)
+            .then(response => response.json())
+            .then(data => {
+                totalCurrency = currencyAmount * data.rates[toCurrency];
+                alert("Total amount: " + totalCurrency + " " + toCurrency);
+
+
+            });
+    </script>
+</body>

js/07/hw07_15.html

@@ -0,0 +1,18 @@
+<head>Currency drop down</head>
+
+<body>
+    <script>
+
+        fetch(`https://open.er-api.com/v6/latest/USD`)
+            .then(response => response.json())
+            .then(data => {
+                const currencies = Object.keys(data.rates);
+                let str = "<select>";
+                for (let currency of currencies) {
+                    str += `<option>${currency}</option>`;
+                }
+                str += "</select>";
+                document.write(str);
+            });
+    </script>
+</body>

js/07/hw07_17.html

@@ -0,0 +1,36 @@
+<header>
+    <h1>Form</h1>
+</header>
+
+<body>
+    <script>
+        obj = {
+            "Name": "chevrolet chevelle malibu",
+            "Cylinders": 8,
+            "Displacement": 307,
+            "Horsepower": 130,
+            "Weight_in_lbs": 3504,
+            "Origin": "USA",
+            "in_production": false
+        }
+
+        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`;
+        }
+        str += "<form>"
+        document.write(str)
+        alert(str)
+
+
+
+
+
+
+    </script>
+
+</body>

js/07/hw07_18.html

@@ -0,0 +1,76 @@
+<header>
+    <h1>Table</h1>
+</header>
+
+<body>
+    <script>
+        var arr = [
+            {
+                "Name": "chevrolet chevelle malibu",
+                "Cylinders": 8,
+                "Displacement": 307,
+                "Horsepower": 130,
+                "Weight_in_lbs": 3504,
+                "Origin": "USA"
+            },
+            {
+                "Name": "buick skylark 320",
+                "Miles_per_Gallon": 15,
+                "Cylinders": 8,
+                "Displacement": 350,
+                "Horsepower": 165,
+                "Weight_in_lbs": 3693,
+                "Acceleration": 11.5,
+                "Year": "1970-01-01",
+            },
+            {
+                "Miles_per_Gallon": 18,
+                "Cylinders": 8,
+                "Displacement": 318,
+                "Horsepower": 150,
+                "Weight_in_lbs": 3436,
+                "Year": "1970-01-01",
+                "Origin": "USA"
+            },
+            {
+                "Name": "amc rebel sst",
+                "Miles_per_Gallon": 16,
+                "Cylinders": 8,
+                "Displacement": 304,
+                "Horsepower": 150,
+                "Year": "1970-01-01",
+                "Origin": "USA"
+            },
+        ]
+        names = Object
+            .entries(
+                arr.reduce(
+                    (prev, next) => {
+                        return { ...prev, ...next };
+                    }
+                ))
+            .map(entry => entry[0]);
+        str = "<table>";
+        str += "<tr>" +
+            names
+                .map(name => `<td>${name}</td>`)
+                .join('') +
+            "</tr>";
+        str +=
+                arr
+                    .map(obj => 
+                        `<tr>${
+                            names
+                                .map(name => `<td>${obj[name] || "-"}</td>`)
+                                .join('')
+                        }</tr>`)
+                    .join('');
+        str += "</table>";
+
+        document.write(str)
+
+
+
+    </script>
+
+</body>