// JSON. 

// -------------УСЛОВИЕ-------------
// Загрузить используя XMLHttpRequest и распарсить как ассоциативный массив.
// Организовать выбор страны и города, используя два select и ассоциативный массив из примера выше.
// При выборе страны в списке городов должны быть только города из выбранной страны.

// -------------РЕШЕНИЕ-------------

  //Начальная разметка
    const task01block = document.createElement('div');
   task01block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
    const task01title = document.createElement('h2');
    task01title.innerText = 'Task-01  Countries choice';
    const countrySelect = document.createElement('select');
    const citySelect = document.createElement('select');
    countrySelect.innerHTML = "<option value='hide'> -- Country loading--</option>";
    countrySelect.style = "margin-left:10px; margin-right:10px";
    citySelect.style = "margin-left:10px";
    citySelect.innerHTML = "<option value='hide'> -- City loading--</option>";
  root.appendChild(task01block); 
    task01block.appendChild(task01title); 
    task01block.appendChild(countrySelect);
    task01block.appendChild(citySelect);
    
 //Подставляет страну из запроса
function chooseCountry(responseObj) {
  const countryList = Object.keys(responseObj);
 const countryStr = countryList.sort().map(item =>(!(item===''))&&("<option value=" + item + ">" + item + "</option>"));
  countrySelect.innerHTML = "<option value='hide'> -- Select country --</option>" + countryStr;
  countrySelect.onchange = () => { chooseCity(countrySelect.value, responseObj) }
}
//Подставляет города в зависимости от выбранной страны
function chooseCity(countrySelected, responseObj) {
   const cityStr = responseObj[countrySelected].sort().map(item => "<option value=" + item + ">" + item + "</option>");
    citySelect.innerHTML = "<option value='hide'> -- Select city --</option>" + cityStr;
 }


var request = new XMLHttpRequest() 
const url = 'https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json';
request.open('GET', url, true) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос асинхронный



request.onreadystatechange = function(){ //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
    if (request.readyState != 4){
        return;
    }

    if (request.status == 200){
        const responseObj = JSON.parse(request.responseText);
        chooseCountry(responseObj );
                  
    }
    else {
        alert('shit happens: ' +  request.status + ', ' + request.statusText );
    }
}

request.send() // инициируем запрос.