Volddemar4ik
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="table">
        <!-- 
Создайте 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 name="" id="from"></select>
        <select name="" id="to"></select>
        <div id="rate"></div>
        <input type="number" id="amount" />
        <div id="result"></div>

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

                    for (const [currency, value] of Object.entries(data.rates)) {

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

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

                        optionFrom.innerText = optionTo.innerText = `${currency}`
                        optionFrom.value = optionTo.value = `${value}`
                    }


                    from.onchange = to.onchange = amount.oninput = () => {
                        rate.innerText = `кросскурс: ${(to.value / from.value).toFixed(2)}`
                        result.innerText = `Вы получите: ${(to.value / from.value * +amount.value).toFixed(2)}`
                    }

                })
        </script>
    </div>

    <div class="countries" style="margin-top: 50px;">
        <!-- 
    По аналогии с предыдущем заданием, реализуйте интерфейс выбора страны и города:
        по закрузке данных наполняйте select#countries элементами option с названиями стран;
        так же назначьте обработчик события onchange в select#countries, который:
            удаляет старый контент select#cities (достаточно занести в innerHTML или innerText пустую строку)
            добавляет в select#cities элементы option с городами из выбранной только что страны.
    Таким образом, при изменении страны будет меняться список городов в select#cities
 -->

        <select name="" id="countries"></select>
        <select name="" id="cities"></select>

        <script>
            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 Object.entries(data)) {

                        const optionCountries = document.createElement('option')
                        countries.append(optionCountries)
                        optionCountries.innerText = `${country}`

                        countries.onchange = () => {

                            cities.innerText = ''

                            for (const city of data[countries.value]) {

                                const optionCities = document.createElement('option')
                                cities.append(optionCities)
                                optionCities.innerText = `${city}`

                            }

                        }
                    }
                })
        </script>
    </div>
</body>

</html>