homework/js 09/index.js

// ДЗ: Ветвления
// задание 1 blocks
{
  let a = 10;
  {
    let b = 20;
    {
      let c = 30;
      // значения переменных: a=10, b=20, c=30, d=undefined

      b++;
      a *= 10;
    }
    {
      let c = 50;
      // значения переменных: a=100, b=21, c=50, d=undefined
      b += 500;
    }
    {
      const a = 100500;
      const d = 'value';
      // значения переменных: a=100500, b=521, c=50, d="value"
      {
        let a = -50;
        b = 1000;
        // значения переменных: a=-50, b=1000, c=50, d="value"
      }
      // значения переменных: a=100500, b=1000, c=50, d="value"
    }
    // значения переменных: a=100, b=1000, c=50, d=undefined
  }
  // значения переменных: a=10, b=undefined, c=undefined, d=undefined
}
// задание 2 comparison if
{
  var age = +prompt('Сколько вам лет?', '');

  if (age < 0) {
    alert('Отрицательный возраст? Что-то не так...');
  } else if (age < 18) {
    alert('школьник');
  } else if (age < 30) {
    alert('молодеж');
  } else if (age < 45) {
    alert('зрелость');
  } else if (age < 60) {
    alert('закат');
  } else if (age < 100) {
    alert('как пенсия?');
  } else {
    alert('то ли киборг, то ли KERNESS');
  }
}
// задание 3 switch: sizes
{
  const size = prompt('Введите размер одежды в украинской системе');

  let convertedSize;

  switch (size) {
    case 'XS':
      convertedSize = '0';
      break;
    case 'S':
      convertedSize = '2';
      break;
    case 'M':
      convertedSize = '4';
      break;
    case 'L':
      convertedSize = '6';
      break;
    case 'XL':
      convertedSize = '8';
      break;
    case 'XXL':
      convertedSize = '10';
      break;
    default:
      convertedSize = 'Неизвестный размер';
  }

  alert(`Американский размер: ${convertedSize}`);
}
// задание 4 switch: if
{
  let color = prompt('Введите цвет', '');

  if (color === 'red') {
    document.write("<div style='background-color: red;'>красный</div>");
  } else if (color === 'black') {
    document.write("<div style='background-color: black; color: white;'>черный</div>");
  } else if (color === 'blue') {
    document.write("<div style='background-color: blue;'>синий</div>");
  } else if (color === 'green') {
    document.write("<div style='background-color: green;'>зеленый</div>");
  } else {
    document.write("<div style='background-color: gray;'>Я не понял</div>");
  }
}
// задание 5 noswitch
{
  const noSwitch = (key, cases, defaultKey = 'default') => {
    if (key in cases) {
      return cases[key]();
    } else {
      return cases[defaultKey]();
    }
  };

  const drink = prompt('Что вы любите пить');
  noSwitch(drink, {
    воду: () => console.log('Самый здоровый выбор!'),
    чай() {
      console.log('Вкусная и полезная штука. Не переусердствуйте с сахаром');
    },
    пиво: () => console.log('Хорошо летом, да в меру'),
    виски: function () {
      console.log('Да вы, батенька, эстет! Не забудьте лед и сигару');
    },
    default() {
      console.log('шото я не понял');
    },
  });
}
// задание 6 closure calc
{
  fetch('https://open.er-api.com/v6/latest/USD')
    .then((res) => res.json())
    .then((data) => {
      // создаем контейнер для кнопок
      const container = document.createElement('div');
      // перебираем курсы валют
      for (const currency in data.rates) {
        // создаем кнопку
        const button = document.createElement('button');
        // устанавливаем текст кнопки
        button.innerHTML = currency;
        // назначаем обработчик события нажатия на кнопку
        button.onclick = () => {
          // запрашиваем сумму у пользователя
          const amount = prompt('Введите сумму');
          // выводим результат перевода в консоль
          console.log(`${amount} ${currency} = ${amount * data.rates[currency]} USD`);
        };
        // добавляем кнопку в контейнер
        container.appendChild(button);
      }
      // добавляем контейнер с кнопками на страницу
      document.body.appendChild(container);
    });
}
// задание 7 closure calc 2
{
  // получаем элементы страницы
  const from = document.getElementById('from');
  const to = document.getElementById('to');
  const rate = document.getElementById('rate');
  const amount = document.getElementById('amount');
  const result = document.getElementById('result');

  // функция для обновления курса и результата
  function update() {
    // вычисляем курс
    const exchangeRate = rates[to.value] / rates[from.value];
    // обновляем текст в div#rate
    rate.innerText = `1 ${from.value} = ${exchangeRate} ${to.value}`;
    // вычисляем результат
    result.innerText = `${amount.value} ${from.value} = ${amount.value * exchangeRate} ${to.value}`;
  }

  fetch('https://open.er-api.com/v6/latest/USD')
    .then((res) => res.json())
    .then((data) => {
      // сохраняем курсы валют
      const rates = data.rates;
      // перебираем курсы валют
      for (const currency in rates) {
        // создаем опцию
        const option = document.createElement('option');
        // устанавливаем текст опции
        option.innerText = currency;
        // добавляем опцию в селекты
        from.appendChild(option);
        to.appendChild(option.cloneNode(true));
      }
      // назначаем обработчики событий для элементов управления
      from.onchange = update;
      to.onchange = update;
      amount.oninput = update;
      // инициализируем первоначальный курс и результат
      update();
    });
}
// задание 8 countries and cities
{
  // получаем элементы страницы
  const countries = document.getElementById('countries');
  const cities = document.getElementById('cities');

  fetch(
    'https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json',
  )
    .then((res) => res.json())
    .then((data) => {
      // перебираем страны
      for (const country of data) {
        // создаем опцию
        const option = document.createElement('option');
        // устанавливаем текст опции
        option.innerText = country.name;
        // добавляем опцию в селект стран
        countries.appendChild(option);
      }
      // назначаем обработчик события onchange в селекте стран
      countries.onchange = function () {
        // удаляем старый контент селекта городов
        cities.innerHTML = '';
        // получаем индекс выбранной страны
        const index = countries.selectedIndex;
        // перебираем города этой страны
        for (const city of data[index].cities) {
          // создаем опцию
          const option = document.createElement('option');
          // устанавливаем текст опции
          option.innerText = city;
          // добавляем опцию в селект городов
          cities.appendChild(option);
        }
      };
    });
}