homework/js08/script-for-index.js

// switch: if
// Перепишите пример ниже, используя if.
switch_if: {
  let color = prompt('Введите цвет', '').toLowerCase();
  if (color == 'red' || color == 'black') {
    document.write("<div style='background-color: black; color: white;'>черный</div>");
    if (color == 'red') {
      document.write("<div style='background-color: red;'>красный</div>");
    }
  } else if (color == 'blue' || color == 'green') {
    document.write("<div style='background-color: green;'>зеленый</div>");
    if (color == 'blue') {
      document.write("<div style='background-color: blue;'>синий</div>");
    }
  } else {
    document.write("<div style='background-color: gray;'>Я не понял</div>");
  }
}


// closure calc
// Напишите внутри анонимной функции, переданной в then (data =>):
// цикл, который перебирает курсы;
// на каждой итерации создается кнопка (document.createElement)
// текст кнопки - название валюты (innerHTML или innerText)
// Назначьте обработчик события на этой кнопке (onclick = () => {.....}). Функция-обработчик должна быть
// написана прямо в теле цикла. Обработчик должен спрашивать сумму используя prompt и переводить эту суммы
// из валюты, написанной на кнопке в USD
// Найдите замыкания. Для доступа к валютам из data.rates используйте [], . тут не поможет. Кнопки добавляйте в
// специальный контейнер (div например), созданный в HTML, или, на худой конец, в body
closure_calc: {
  fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {
      for (let rate in data.rates) {
        let div = document.createElement('div');
        let button = document.createElement('button');
        button.innerHTML = rate;
        div.append(button);
        document.body.append(div);
        button.onclick = () => {
          let sum = prompt('How much do you want to exchange?');
          let result = sum / data.rates[rate];
          alert(result);
        }
      }
      //эта функция запускается когда данные скачиваются.
      //остальной код работает РАНЬШЕ.
      //только ТУТ есть переменная data со скачанными данными
      console.log(data) //изучите структуру, получаемую с сервера в консоли
    })
}

// closure calc 2
// Создайте HTML файл с :
// <select id='from'> - исходная валюта
// <select id='to'> - валюта в которую происходит обмен
// <div id='rate'> - кросскурс между валютами
// <input type='number' id='amount' /> - сумма в исходной валюте
// <div id='result'> - сумма в валюте, в которую хотим поменять
// Используя заготовку из предыдущего задания, наполните select-ы тэгами option с названиями валют, используя цикл
// document.createElement
// innerText для option
// from.append или to.append
// За пределами цикла назначьте обработчики onchange для элементов select и oninput для элемента input,
// используя их id. По этим событиям обновляйте текст в div#rate и div#result
// Для чтения текущего значения select используйте свойство value: from.value или to.value
closure_calc_2: {
  fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {
      let selectFrom = document.createElement('select');
      selectFrom.id = 'from';
      document.body.append(selectFrom);
      let selectTo = document.createElement('select');
      selectTo.id = 'to';
      document.body.append(selectTo);
      let divRate = document.createElement('div');
      divRate.id = 'rate';
      document.body.append(divRate);
      let inputAmount = document.createElement('input');
      inputAmount.id = 'amount';
      inputAmount.type = 'number';
      document.body.append(inputAmount);
      let divResult = document.createElement('div');
      divResult.id = 'result';
      document.body.append(divResult);
      for (let rate in data.rates) {
        let optionFrom = document.createElement('option');
        optionFrom.innerText = rate;
        selectFrom.append(optionFrom);
        let optionTo = document.createElement('option');
        optionTo.innerText = rate;
        selectTo.append(optionTo);
      }
      selectFrom.onchange = selectTo.onchange = () => {
        divRate.innerText = data.rates[document.getElementById('from').value] /
          data.rates[document.getElementById('to').value];
      }
      inputAmount.oninput = () => {
        divResult.innerText = (data.rates[document.getElementById('from').value] /
          data.rates[document.getElementById('to').value]) * document.getElementById('amount').value;
      }
    })
}

// countries and cities
// По аналогии с предыдущем заданием, реализуйте интерфейс выбора страны и города:
// по закрузке данных наполняйте select#countries элементами option с названиями стран;
// так же назначьте обработчик события onchange в select#countries, который:
// удаляет старый контент select#cities (достаточно занести в innerHTML или innerText пустую строку)
// добавляет в select#cities элементы option с городами из выбранной только что страны.
// Таким образом, при изменении страны будет меняться список городов в select#cities
countries_and_cities: {
  fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
    .then(data => {
      let countriesSelect = document.createElement('select');
      countriesSelect.id = 'countries';
      document.body.append(countriesSelect);
      let citiesSelect = document.createElement('select');
      citiesSelect.id = 'cities';
      document.body.append(citiesSelect);

      function setOptions(options, selectEl) {
        for (let option of options) {
          let optionEl = document.createElement('option');
          optionEl.innerText = option;
          selectEl.append(optionEl);
        }
      }
      setOptions(Object.keys(data), countriesSelect);
      const firstCountry = Object.keys(data)[0];
      setOptions(data[firstCountry], citiesSelect);
      countriesSelect.onchange = () => {
        citiesSelect.innerText = '';
        setOptions(data[countriesSelect.value], citiesSelect);
      }
    })
}