//countrySelectTask

let countrySelect = document.createElement('select')
let citySelect = document.createElement('select')
citySelect.id = "citySelect"
countrySelect.id = "countrySelect"

document.body.appendChild(countrySelect)
document.body.appendChild(citySelect)


fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json')
    .then(res => res.json())
    .then(json => {
        let countrySelect = document.getElementById('countrySelect')
        let citySelect = document.getElementById('citySelect')

        function addOptions(select, arr) {
            for (let i = 0; i < arr.length; i++) {
                select.add(new Option(arr[i]))
            }
        }

        let countries = Object.keys(json)
        addOptions(countrySelect, countries)

        let defaultCities = json[countries[0]]
        addOptions(citySelect, defaultCities)

        countrySelect.addEventListener('change', function() {
            let cities = json[this.value]
            citySelect.length = 0
            addOptions(citySelect, cities)
        })
        console.log(json)
})

//tableMouseTask