homework/js06/script.js

// Literals
// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:
literals: {
  const dog = {
    fur: 'golden',
    eyes: 'brown',
    purebred: true,
  }
  const pillow = {
    width: '70 sm',
    height: '50 sm',
    color: 'white',
    pillowcase: 'yes',
  }

  // Literals expand
  // Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте
  // ввод названия ключа и значения через prompt прямо в литерале объекта {}
  dog[prompt('What do you want to specify?')] = prompt('Enter the value');
  dog[prompt('What do you want to specify?')] = prompt('Enter the value');
  console.log(dog);

  // Literals copy
  // Пусть пользователь введет еще одно свойство в переменную. Вставьте в новый объект эту переменную. Скопируйте
  // объект из предыдущего задания в новый объект.
  const property = {
    [prompt('What do you want to specify?')]: prompt('Enter the value'),
  }
  let newObj = {
    ...property,
    ...dog,
  }

  console.log(newObj);

  // Copy delete
  // Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
  let copy = JSON.parse(JSON.stringify(dog));
  console.log(copy);
}

// Html tree
// Сделайте декларативную JSON-структуру для тэгов выше, в которой:
// каждый тэг будет объектом
// имя тэга будет полем tagName
// вложенные тэги будут в поле children
// набор аттрибутов тэга будет в поле attrs.
// Выведите значения текста во второй кнопке, используя . и [].
// Выведите значение атрибута id во втором input, используя . и [].
html_tree: {
  let body = {
    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(body.children[1].children[1].children);
  console.log(body.children[0].children[3].attrs.id);

  // Parent
  // Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
  body.children[0].parent = body;
  body.children[1].parent = body;
  body.children[0].children[0].parent = body.children[0];
  body.children[0].children[1].parent = body.children[0];
  body.children[0].children[2].parent = body.children[0];
  body.children[0].children[2].attrs.parent = body.children[0].children[2];
  body.children[0].children[3].parent = body.children[0];
  body.children[0].children[3].attrs.parent = body.children[0].children[3];
  body.children[1].children[0].parent = body.children[1];
  body.children[1].children[0].attrs.parent = body.children[1].children[0];
  body.children[1].children[1].parent = body.children[1];
  body.children[1].children[1].attrs.parent = body.children[1].children[1];

  // Change OK
  // Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree.
  // Пользователь также вводит значение этого атрибута.
  body.children[1].children[0].attrs.id = prompt('Enter a new value for button ID');

  // Destructure
  // Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span, Выведите
  // значения текста во второй кнопке и Выведите значение атрибута id во втором input.
  const {
    children: [
      {
        children: [
          {
            children: [
              spanValue
            ]
          }, , ,
          {
            attrs: {
              id: secondInputId
            }
          }
        ]
      },
      {
        children: [,
          {
            children: [
              buttonText
            ]
          }
        ]
      }
    ]
  } = body;
  console.log(spanValue, buttonText, secondInputId);
}

// Destruct array
// напишите код, который используя деструктуризацию положит:
// четные числа в переменные even1, even2,
// нечетные в odd1, odd2, odd3,
// буквы в отдельный массив
destruct_array: {
  let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
  const [ood1, even1, odd2, even2, odd3, ...letters] = arr;
  console.log(ood1, even1, odd2, even2, odd3, letters);
}

// Destruct string
// напишите код, который используя деструктуризацию положит:
// число в переменную number
// букву a в переменную s1
// букву b в переменную s2
// букву c в переменную s3
destruct_string: {
  let arr = [1, "abc"];
  const [number, [s1, s2, s3]] = arr;
  console.log(number, [s1, s2, s3]);
}

// Destruct 2
// извлеките используя деструктуризацию имена детей в переменные name1 и name2
destruct_2: {
  let obj = {
    name: 'Ivan',
    surname: 'Petrov',
    children: [{ name: 'Maria' }, { name: 'Nikolay' }]
  }
  const {
    children: [
      {
        name: name1
      },
      {
        name: name2
      }
    ]
  } = obj;
  console.log(name1, name2);
}

// Destruct 3
// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
destruct_3: {
  let arr = [1, 2, 3, 4, 5, 6, 7, 10];
  const { 0: a, 1: b, length } = arr;
  console.log(a, b, length);
}

// Currency real rate
// Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него
// вставьте в браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
// Пользователь вводит исходную валюту
// Пользователь вводит валюту, в которую происходит конвертация
// Пользователь вводит сумму в исходной валюте
// Пользовател видит результат конвертации
// Учтите, что пользователь может ввести какую-то дичь или название валют в неверном регистре
currency_real_rate: {
  let startCurrency = prompt('What currency do you have?').toUpperCase();
  let endCurrency = prompt('What currency do you want to get?').toUpperCase();
  let startAmount = +prompt('What amount do you want to exchange?');
  fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
  .then(data => {
    if (!startAmount) {
      alert('You entered wrong value');
      return;
    }
    let startCurrencyRate = data.rates[startCurrency];
    let endCurrencyRate = data.rates[endCurrency];
    if (!startCurrencyRate || !endCurrencyRate) {
      alert('Rate is not found');
      return;
    }
    let amountInUsd = startAmount / startCurrencyRate;
    let endAmount = (amountInUsd * endCurrencyRate).toFixed(2);
    alert('You will get ' + endAmount + endCurrency);
         //эта функция запускается когда данные скачиваются.
         //остальной код работает РАНЬШЕ.
         //только ТУТ есть переменная data со скачанными данными
         console.log(data) //изучите структуру, получаемую с сервера в консоли
     })
}