yankevich0210
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
							<!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" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // ДЗ Объекты (ассоциативные массивы)
      // задание 1 Literals
      {
        const chair = {
          material: 'wood',
          color: 'brown',
          numLegs: 4,
        };
      }

      {
        const lamp = {
          type: 'desk lamp',
          color: 'white',
          power: 60,
        };
      }

      {
        const garden = {
          size: 1000, //в квадратных метрах
          plants: ['roses', 'tulips', 'daisies'],
        };
      }
      // задание 2 Literals expand
      {
        // Добавление свойств к объекту 'chair'
        const chair = {
          material: 'wood',
          color: 'brown',
          numLegs: 4,
        };

        const chairProp1 = prompt('Введите название первого свойства для стула');
        const chairProp1Value = prompt('Введите значение первого свойства для стула');

        chair[chairProp1] = chairProp1Value;

        const chairProp2 = prompt('Введите название второго свойства для стула');
        const chairProp2Value = prompt('Введите значение второго свойства для стула');

        chair[chairProp2] = chairProp2Value;

        console.log(chair); // выведет объект с добавленными свойствами
        {
          // Добавление свойств к объекту 'lamp'
          const lamp = {
            type: 'desk lamp',
            color: 'white',
            power: 60,
          };

          const lampProp1 = prompt('Введите название первого свойства для лампы');
          const lampProp1Value = prompt('Введите значение первого свойства для лампы');

          lamp[lampProp1] = lampProp1Value;

          const lampProp2 = prompt('Введите название второго свойства для лампы');
          const lampProp2Value = prompt('Введите значение второго свойства для лампы');

          lamp[lampProp2] = lampProp2Value;

          console.log(lamp); // выведет объект с добавленными свойствами
        }
        {
          // Добавление свойств к объекту 'garden'
          const garden = {
            size: 1000,
            plants: ['roses', 'tulips', 'daisies'],
          };

          const gardenProp1 = prompt('Введите название первого свойства для сада');
          const gardenProp1Value = prompt('Введите значение первого свойства для сада');

          garden[gardenProp1] = gardenProp1Value;

          const gardenProp2 = prompt('Введите название второго свойства для сада');
          const gardenProp2Value = prompt('Введите значение второго свойства для сада');

          garden[gardenProp2] = gardenProp2Value;

          console.log(garden); // выведет объект с добавленными свойствами
        }
      }
      // задание 3 Literals copy
      {
        // Получение от пользователя названия ключа и значения
        const newProp = prompt('Введите название нового свойства');
        const newPropValue = prompt('Введите значение нового свойства');

        // Создание нового объекта и добавление в него нового свойства
        const newObj = {
          [newProp]: newPropValue,
        };

        console.log(newObj); // выведет объект с новым свойством

        // Копирование объекта 'chair' в новый объект
        const chairCopy = Object.assign({}, chair);

        console.log(chairCopy); // выведет копию объекта 'chair'
      }
      // задание 4 Html tree
      {
        const 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'],
                },
              ],
            },
          ],
        };
      }

      {
        console.log(html.children[1].children[1].children[0]); // выведет "Cancel"
      }

      {
        console.log(html.children[0].children[2].attrs.id); // выведет "surname"
      }
      // задание 5 Parent
      {
        const htmlTree = {
          tagName: 'body',
          children: [
            {
              tagName: 'div',
              parent: this,
              children: [
                {
                  tagName: 'span',
                  parent: this,
                  children: ['Enter a data please:'],
                },
                {
                  tagName: 'br',
                  parent: this,
                },
                {
                  tagName: 'input',
                  attrs: {
                    type: 'text',
                    id: 'name',
                  },
                  parent: this,
                },
                {
                  tagName: 'input',
                  attrs: {
                    type: 'text',
                    id: 'surname',
                  },
                  parent: this,
                },
              ],
            },
            {
              tagName: 'div',
              parent: this,
              children: [
                {
                  tagName: 'button',
                  attrs: {
                    id: 'ok',
                  },
                  parent: this,
                  children: ['OK'],
                },
                {
                  tagName: 'button',
                  attrs: {
                    id: 'cancel',
                  },
                  parent: this,
                  children: ['Cancel'],
                },
              ],
            },
          ],
        };
      }
      // задание 6 Change OK
      {
        const json = [
          {
            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 attributeName = prompt('Введите название атрибута:');
        const attributeValue = prompt('Введите значение атрибута:');

        json[0].children[1].children[0].attrs[attributeName] = attributeValue;

        console.log(json[0].children[1].children[0].attrs); // выведет объект с новым атрибутом
      }

      {
        // получаем ссылку на объект тега button с id='ok'
        const buttonOk = html.children[1].children[0];

        // запрашиваем у пользователя имя и значение атрибута
        const attrName = prompt('Введите имя атрибута:');
        const attrValue = prompt('Введите значение атрибута:');

        // добавляем или изменяем атрибут в объекте тега
        buttonOk.attrs[attrName] = attrValue;
      }
      // задание 7 Destructure
      {
        const structure = [
          {
            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: [spanText],
                    },
                  ],
                },
                {
                  children: [
                    ,
                    {
                      children: [buttonText],
                    },
                  ],
                },
                {
                  children: [
                    {
                      attrs: { id: inputId },
                    },
                  ],
                },
              ],
            },
          ] = structure;

          console.log(spanText);
          console.log(buttonText);
          console.log(inputId);
        }
      }
      // задание 8 Destruct array
      {
        let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];

        let [even1, even2, odd1, odd2, odd3, ...letters] = arr;

        console.log(even1); // 2
        console.log(even2); // 4
        console.log(odd1); // 1
        console.log(odd2); // 3
        console.log(odd3); // 5
        console.log(letters); // ["a", "b", "c"]
      }
      // задание 9 Destruct string
      {
        let arr = [1, 'abc'];

        let [number, s1, s2, s3] = arr;

        console.log(number); // 1
        console.log(s1); // "a"
        console.log(s2); // "b"
        console.log(s3); // "c"
      }
      // задание 10 Destruct 2
      {
        let obj = {
          name: 'Ivan',
          surname: 'Petrov',
          children: [{ name: 'Maria' }, { name: 'Nikolay' }],
        };

        let {
          children: [{ name: name1 }, { name: name2 }],
        } = obj;

        console.log(name1); // "Maria"
        console.log(name2); // "Nikolay"
      }
      // задание 11 Destruct 3
      {
        let arr = [1, 2, 3, 4, 5, 6, 7, 10];

        let [a, b, ...rest] = arr;

        console.log(a); // 1
        console.log(b); // 2
        console.log(rest); // [3, 4, 5, 6, 7, 10]
        console.log(arr.length); // 8
      }
      // задание 12 Copy delete
      {
        const chair = {
          material: 'wood',
          color: 'brown',
          numLegs: 4,
        };

        const keyToDelete = prompt('Enter the key to delete');

        // Создаем копию объекта с помощью оператора расширения
        const chairCopy = { ...chair };

        // Удаляем ключ, который ввел пользователь
        delete chairCopy[keyToDelete];

        console.log(chairCopy);
      }
      // задание 13 Currency real rate
      {
        // Запрашиваем текущие курсы валют с сервера
        fetch('https://open.er-api.com/v6/latest/USD')
          .then((res) => res.json())
          .then((data) => {
            // Получаем объект с курсами валют
            const rates = data.rates;

            // Получаем исходную валюту от пользователя
            const sourceCurrency = prompt('Введите исходную валюту:');
            // Получаем валюту, в которую происходит конвертация, от пользователя
            const targetCurrency = prompt('Введите валюту, в которую происходит конвертация:');
            // Получаем сумму в исходной валюте от пользователя
            const amount = parseFloat(prompt('Введите сумму в исходной валюте:'));

            // Конвертируем валюту
            const result = (amount * rates[targetCurrency]) / rates[sourceCurrency];
            // Выводим результат конвертации
            console.log(`${amount} ${sourceCurrency} = ${result} ${targetCurrency}`);
          });
      }
      // задание 14 Currency drop down
      {
        let currencyList = '<select id="currencySelect">';

        // Запрашиваем текущие курсы валют с сервера
        fetch('https://open.er-api.com/v6/latest/USD')
          .then((res) => res.json())
          .then((data) => {
            // Получаем объект с курсами валют
            const rates = data.rates;

            // Перебираем курсы валют и формируем HTML-код выпадающего списка
            for (const currency in rates) {
              currencyList += `<option value="${currency}">${currency}</option>`;
            }
            currencyList += '</select>';
            // Вставляем HTML-код выпадающего списка в документ
            document.getElementById('currencyDropdown').innerHTML = currencyList;
          });
      }
      // задание 15 Currency table
      {
        // Запрашиваем текущие курсы валют с сервера
        fetch('https://open.er-api.com/v6/latest/USD')
          .then((res) => res.json())
          .then((data) => {
            // Получаем объект с курсами валют
            const rates = data.rates;

            // Формируем HTML-код таблицы
            let table = '<table><tr><th></th>';
            for (const currency in rates) {
              table += `<th>${currency}</th>`;
            }
            table += '</tr>';
            for (const currency1 in rates) {
              table += `<tr><th>${currency1}</th>`;
              for (const currency2 in rates) {
                // Рассчитываем кросскурс между валютами
                const crossRate = rates[currency1] / rates[currency2];
                table += `<td>${crossRate}</td>`;
              }
              table += '</tr>';
            }
            table += '</table>';
            // Вставляем HTML-код таблицы в документ
            document.getElementById('currencyTable').innerHTML = table;
          });
      }
      // задание 16 Form
      {
        const createFormFromObject = (obj) => {
          let form = document.createElement('form');

          for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
              const value = obj[key];
              let inputType;

              switch (typeof value) {
                case 'string':
                  inputType = 'text';
                  break;
                case 'number':
                  inputType = 'number';
                  break;
                case 'boolean':
                  inputType = 'checkbox';
                  break;
                default:
                  inputType = 'text';
              }

              let label = document.createElement('label');
              let input = document.createElement('input');
              input.type = inputType;
              input.value = value;
              label.appendChild(document.createTextNode(`${key}: `));
              label.appendChild(input);
              form.appendChild(label);
            }
          }

          return form;
        };

        const car = {
          Name: 'chevrolet chevelle malibu',
          Cylinders: 8,
          Displacement: 307,
          Horsepower: 130,
          Weight_in_lbs: 3504,
          Origin: 'USA',
          in_production: false,
        };

        document.body.appendChild(createFormFromObject(car));
      }
      // задание 17 Table
      {
        const persons = [
          {
            name: 'Мария',
            fatherName: 'Ивановна',
            surname: 'Иванова',
            sex: 'female',
          },
          {
            name: 'Николай',
            fatherName: 'Иванович',
            surname: 'Иванов',
            age: 15,
          },
          {
            name: 'Петр',
            fatherName: 'Иванович',
            surname: 'Иванов',
            married: true,
          },
        ];

        // Первый проход - поиск колонок
        const columns = [];
        persons.forEach((person) => {
          for (const key in person) {
            if (!columns.includes(key)) {
              columns.push(key);
            }
          }
        });

        // Начинаем создание таблицы
        let tableHTML = '<table><tr>';

        // Формируем строку с заголовками
        columns.forEach((column) => {
          tableHTML += `<th>${column}</th>`;
        });
        tableHTML += '</tr>';

        // Второй проход - отображение таблицы
        persons.forEach((person) => {
          tableHTML += '<tr>';
          columns.forEach((column) => {
            tableHTML += `<td>${person[column]}</td>`;
          });
          tableHTML += '</tr>';
        });

        tableHTML += '</table>';

        console.log(tableHTML);
      }
    </script>
  </body>
</html>