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>