HomeWork_JS/Js_08/js.js

//1. blocks
/*let a = 10
{
    let b = 20
    {
        let c = 30
        //какие тут будут значения переменных a,b,c,d

        b++
        a *= 10
    }
    {
        let c = 50
        //какие тут будут значения переменных a,b,c,d
        b += 500
    }
    {
        const a = 100500
        const d = "value"
        //какие тут будут значения переменных a,b,c,d
        {
            let a = -50
            b     = 1000
            //какие тут будут значения переменных a,b,c,d
        }
    }
}
*/

//2. comparison if +
//Разберите пример
//Добавьте условие отрицательного возраста в пример выше. Расставьте недостающие (но синтаксически необязательные)
//  фигурные скобки. Выкиньте лишнее из текущего кода
/*
let age = +prompt("Сколько вам лет?","");
if (age > 6 && age <= 18){
    alert("школьник");
}
else if (age < 0) {
    alert("ты еще не родился?")
}
else if (age > 18 && age < 30){
    alert("молодеж");
}
else if (age > 30 && age < 45){
    alert("зрелость");
}
else if (age > 45 && age < 60){
    alert("закат");
}
else if (age > 60){
    alert("как пенсия?");
}
else {
    alert("то ли киборг, то ли KERNESS");
}
*/
//3. switch: sizes +
// Сделайте задание Comparison: sizes используя switch
/*{
    let size = +prompt("Введите ваш украинский размер одежды (верхняя одежда, платья, брюки)");
        switch (size) {
            case 36:
            case 38:
                alert("Ваш размер по размерной сетке США XS");
                break;
            case 40:
                alert("Ваш размер по размерной сетке США S");
                break;
            case 42:
            case 44:
                alert("Ваш размер по размерной сетке США M");
                break;
            case 46:
            case 48:
                alert("Ваш размер по размерной сетке США L");
                break;
            case 50:
            case 52:
                alert("Ваш размер по размерной сетке США XL");
                break;
        }
}*/

//4. switch: if +
//  Перепишите пример ниже, используя if.
/*    let color = prompt("Введите цвет","");

    switch (color){
        case "red":
            document.write("<div style='background-color: red;'>красный</div>");
        case "black":
            document.write("<div style='background-color: black; color: white;'>черный</div>");
            break;
        case "blue":
            document.write("<div style='background-color: blue;'>синий</div>");
        case "green":
            document.write("<div style='background-color: green;'>зеленый</div>");
            break;
        default: document.write("<div style='background-color: gray;'>Я не понял</div>");
    }
{   let color = prompt("Введите цвет","");

    if (color === 'red') {
        document.write("<div style='background-color: red;'>красный</div>");
        document.write("<div style='background-color: black; color: white;'>черный</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>");
        document.write("<div style='background-color: green;'>зеленый</div>");
    } else if (color === 'green') {
        document.write("<div style='background-color: green;'>зеленый</div>");
    } else {
        document.write("<div style='background-color: gray;'>Я не понял</div>");
    }
} */

//5. noswitch +
//Напишите функцию noSwitch, которая принимает объект со значениями-функциями, ключ для объекта и запускает одну
// из функций из объекта если ключ найден, иначе - запускает default:
/*
{
    const noSwitch = (key, cases, defaultKey = 'default') => {
        if (drink in cases) {
            cases[drink]()
        } else {
            cases.default()
        }
    }

    const drink = prompt("Что вы любите пить");

//запуск функции
    noSwitch (drink, {
        воду: () => console.log('Самый здоровый выбор!'),
        чай() {
            console.log('Вкусная и полезная штука. Не переусердствуйте с сахаром')
        },
        "пиво": () => console.log('Хорошо летом, да в меру'),
        виски: function () {
            console.log('Да вы, батенька, эстет! Не забудьте лед и сигару')
        },
        default() {
            console.log('шото я не понял')
        }
    })
}  */

//6. closure calc
// Напишите внутри анонимной функции, переданной в then (data =>):
// цикл, который перебирает курсы;
// на каждой итерации создается кнопка (document.createElement)
// текст кнопки - название валюты (innerHTML или innerText)
// Назначьте обработчик события на этой кнопке (onclick = () => {.....}). Функция-обработчик должна быть написана
// прямо в теле цикла
// Обработчик должен спрашивать сумму используя prompt и переводить эту суммы из валюты, написанной на кнопке в USD
//
// Найдите замыкания. Для доступа к валютам из data.rates используйте [], . тут не поможет. Кнопки добавляйте в
// специальный контейнер (div например), созданный в HTML, или, на худой конец, в body

/*
fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {
        for (const [key,value] of Object.entries(data.rates)) {
            let button = document.createElement( "button" ) // создаем новый элемент <button>
            button.innerText = key;
            document.body.append(button);  // добавляем наш элемент в элемент <body>

            button.onclick = () => {
                let sum = prompt("Введите сумму в выбраной валюте");
                let result = (sum / value).toFixed(2);
                alert(`Результат операции ${result} $`)
            }
        }
        console.log(data) //изучите структуру, получаемую с сервера в консоли
    })
*/

//7. closure calc 2 +
//Используя заготовку из предыдущего задания, наполните 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
//Создайте HTML файл с :

fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {

        for (let [key,value] of Object.entries(data.rates)) {
            let currencyFromOption = document.createElement('option');
            let currencyFromSelect = document.getElementById('from');

            currencyFromOption.innerHTML= key;
            currencyFromSelect.appendChild(currencyFromOption);

            let currencyToOption = document.createElement('option');
            let currencyToSelect = document.getElementById('to');

            currencyToOption.innerHTML= key;
            currencyToSelect.appendChild(currencyToOption);

            document.getElementById('from').addEventListener('change', function (){
                let rateCurrencyFrom = document.getElementById('rateFrom');
                rateCurrencyFrom.innerHTML = value;
            })

            document.getElementById('to').addEventListener('change', function (){
                let rateCurrencyTo = document.getElementById('rateTo');
                rateCurrencyTo.innerHTML = value;
            })

        }
        const amountInput = document.getElementById('amount')
        amountInput.type  = 'number'
        amountInput.value = '100'

    })


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

            for  (let key in data) {
                let countryOption = document.createElement('option');
                let countrySelect = document.getElementById('countrySelect');

                countryOption.innerHTML = key;
                countrySelect.append(countryOption);
        }

         document.getElementById('countrySelect').addEventListener('change', function () {
             let cities = data[this.value];
             //citySelect.length = 0;
             console.log(cities);

             for (const iterator of cities) {
                 let cityOption = document.createElement('option');
                 let citySelect = document.getElementById('citySelect');

                 cityOption.innerHTML = iterator;
                 citySelect.append(cityOption)

             }
         })
     })
} */