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

let table = document.createElement('table');
document.body.appendChild(table)
table.style.marginTop = '100px'

for (let i = 0; i <= 9; i++){
		let tr = document.createElement('tr');
	
	  for (let j = 0; j <= 9; j++){
		let td = document.createElement('td');
		td.style.padding = "5px";
		td.style.border = "2px solid black";
		if(i === 0) td.innerText = j;
		else if(j === 0) td.innerText = i; 
		else td.innerHTML = i*j;
        tr.appendChild(td);

        td.onmouseover = function (event) {
            for (let i = 0; i < table.children.length; i++) {    
                table.children[i].children[j].style.background = "lightgreen";
            }
            tr.style.background = "lightgreen"  
            td.style.background = "lightgreen"
            td.style.boxShadow = "0px 5px 10px 2px rgba(34, 60, 80, 1)" 
            tr.style.boxShadow = "0px 5px 10px 2px rgba(34, 60, 80, 1)"
        }

        td.onmouseout = function (event) {
            for (let i = 0; i < table.children.length; i++) {
                table.children[i].children[j].style.background = "";
            }
            tr.style.background = ""
            td.style.background = ""
            td.style.boxShadow = ""
            tr.style.boxShadow = ""
        }
    }
    table.appendChild(tr);
}
document.body.appendChild(table);