HomeWork_JS/Js_08/js.js

//1. blocks +
/*{
    let a = 10
    {
        let b = 20
        {
            let c = 30
            //a === 10, b === 20, c === 30

            b++
            a *= 10
        }
        {
            let c = 50
            //a === 100, b === 21, c === 50
            b += 500
        }
        {
            const a = 100500
            const d = "value"
            //a === 100500, b === 521, c === нет переменной, d === value
            {
                let a = -50
                b     = 1000
                debugger;//a === -50, b === 1000, c === нет переменной, d === value
            }
            debugger;//a === 100500, b === 1000, c === нет переменной, d === value
        }
        debugger;//a === 100, b === 1000
    }
    debugger;//a === 100
}
*/

//2. comparison if +
//Разберите пример
//Добавьте условие отрицательного возраста в пример выше. Расставьте недостающие (но синтаксически необязательные)
//  фигурные скобки. Выкиньте лишнее из текущего кода
/*
let 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 >= 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 => {
                let button = document.createElement( "button" ) // создаем новый элемент <button>
                button.innerText = key;
                document.body.appendChild(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 => {
        const from = document.getElementById('from');
        const to = document.getElementById('to');
        const exchangeRate = document.getElementById('rate')
        const amount = document.getElementById('amount');
        const result = document.getElementById('result');

        for (let [rate, course] of Object.entries(data.rates)) {

            const optionFrom = document.createElement('option')
            const optionTo = document.createElement('option')

            optionFrom.innerHTML = optionTo.innerHTML = rate
            optionTo.value = optionFrom.value = rate

            from.append(optionFrom);
            to.append(optionTo);
        }

        from.onchange = to.onchange = amount.oninput = () => {
            exchangeRate.innerHTML = (data.rates[to.value] / data.rates[from.value]).toFixed(3)
            result.innerHTML = (data.rates[to.value] / data.rates[from.value] * amount.value).toFixed(2)
        }
    })

//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 => {

            const countries = document.getElementById('countrySelect');
            const cities = document.getElementById('citySelect')

            for (country in data){
                const optionCounty = document.createElement('option')
                optionCounty.innerText = optionCounty.value = country
                countries.append(optionCounty)
            }

            countries.onchange = () => {
                cities.innerText = ''
                for (city of data[countries.value]){
                    const optionCity = document.createElement('option')
                    optionCity.innerText = optionCity.value = city
                    cities.append(optionCity)

                }
            }
        })
}