Untitled

dabblet.css

.container{
	width: 500px;
	height: 500px;
	background: blue;
	float: right;
	margin-right: 20px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container div{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 50px);
	height: calc(100% - 50px);	
}

dabblet.html

<div class="container">	
  <div style="background: navy">
    <div style="background: blue">
	<div style=" background: navy;">
	  <div style=" background: blue;">
	     <div style=" background: navy;">
	       <div style="background: blue">
	         <div style="background: navy">
	           <div style="background: blue">
	             <div style="background: navy">
	             </div>
	           </div>
	         </div>
	       </div>
	     </div>
	  </div>
	</div>			
    </div>
  </div>
</div>

dabblet.js

//https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/200px-Flag_of_France.svg.png

const countries = [ 'Abhazya', 'Afganistan', 'Almanya', 'Amerika Birleşik Devletleri', 'Andora', 'Angola', 

'Antigua ve Barbuda', 'Arjantin', 'Arnavutluk', 'Avustralya', 'Avusturya', 'Azerbaycan', 'Bahamalar',

'Bahreyn', 'Bangdaleş', 'Barbados', 'Batı Sahra', 'Belçika', 'Benin', 'Beyaz Rusya', 'Bhutan', 

'Birleşik Arap Emirlikleri', 'Bolivya', 'Bosna-Hersek', 'Botsnava', 'Brezilya', 'Brunei', 'Bulgaristan', 

'Burkina Faso', 'Burundi', 'Cezayir', 'Cibuti', 'Çad', 'Çek Cumhuriyeti', 'Çin Halk Cumhuriyeti', 

'Dağlık Karabağ Cumhuriyeti', 'Danimarka', 'Doğu Timor', 'Dominik Cumhuriyeti', 'Dominika', 'Ekvador',

'Ekvador Ginesi', 'El Salvador', 'Endolezya', 'Eritre', 'Ermenistan', 'Estonya', 'Etiyopya', 'Fas', 

'Fiji', 'Fildişi Sahili', 'Filipinler', 'Filistin', 'Finlandiya', 'Fransa', 'Gabon', 'Gambiya', 'Gana', 

'Gine', 'Gine Bissau', 'Grenada', 'Guyana', 'Guatemala', 'Güney Afrika Cumhuriyeti', 'Güney Kore', 

'Güney Osetya', 'Güney Sudan', 'Gürcistan', 'Haiti', 'Hırvatistan', 'Hindistan', 'Hollanda', 'Honduras',

'Irak', 'İngiltere', 'İran', 'İrlanda', 'İspanya', 'İsrail', 'İsveç', 'İsviçre', 'İtalya', 'İzlanda', 

'Jamaika', 'Japonya', 'Kamboçya', 'Kamerun', 'Kanada', 'Karadağ', 'Katar', 'Kazakistan', 'Kenya', 

'Kırgızistan', 'Kıbrıs Cumhuriyeti', 'Kiribati', 'Kolombiya', 'Komorlar', 'Kongo', 

'Kongo Demokratik Cumhriyeti', 'Kosova', 'Kostarika', 'Kuveyt', 'Kuzey Kıbrıs Türk Cumhuriyeti', ,

'Kuzey Kore',

'Küba',

'Laos', 

'Lesotho', 

'Letonya', 

'Liberya',

'Libya',

'Lihtenşayn',

'Litanya',

'Lübnan', 

'Lüksemburg', 

'Macaristan', 

'Madagaskar',  

'Makedonya Cumhuriyeti',

'Malavi', 

'Maldiv Adaları', 

'Malezya',

'Mali', 

'Malta', 

'Marshall Adaları',

'Meksika',

'Mısır',

'Mikronezya',

'Moğolistan',

'Moldova',

'Monako',

'Moritanya',

'Moritius', 

'Mozambik',

'Myanmar',

'Nambiya',

'Nauru', 

'Nepal', 

'Nikaragua', 

'Nijer', 

'Nijerya', 

'Norveç', 

'Orta Afrika Cumhuriyeti', 

'Özbekistan', 

'Pakistan', 

'Palau', 

'Panama', 

'Papua Yeni Gine',

'Paraguay',

'Peru',

'Polonya', 

'Portekiz',

'Romanya',

'Ruanda',

'Rusya Federasyonu',

'Saint Kitts ve Nevis',

'Saint Lucia',

'Saint Vincent ve Grenadinler',

'Samoa',

'San Marino',

'Sao Tome ve Principe',

'Sealand',

'Senegal',

'Seyşeller',

'Sırbistan',

'Siearra Leone',

'Singapur',

'Slovakya',

'Slovenya', 

'Solomon',

'Somali',

'Somaliland',

'Sri Lanka',

'Sudan',

'Surinam',

'Suriye',

'Suudi Arabistan',

'Svaziland',

'Şili',

'Tacikistan',

'Tanzanya',

'Tayland',

'Tayvan',

'Togo',

'Tonga',

'Transdinyester',

'Trinidad ve Tobango',

'Tunus', 

'Tuvalu',

'Türkiye',

'Türkmenistan',

'Uganda',

'Ukrayna',

'Umman',

'Urugay',

'Ürdün', 

'Vanuatu', 

'Vatikan', 

'Venezuela',

'Vietnam',

'Yemen', 

'Yeni Zelanda',

'Yeşil Burun',

'Yunanistan',

'Zambiya', 

'Zimbabwe' ];


const countryList = document.querySelector('.container ul');

function handleSelection(){
	alert();
}

document.querySelector('#search-field').addEventListener('keyup', function(){
	countryList.innerHTML = '';
	if(this.value.length > 0){
		for(var i = 0; i < countries.length; i++){
			if(countries[i].indexOf(this.value) !== -1){
				countryList.innerHTML += '<li onclick="handleSelection()">' + 
					'<img src="https://www.kitap.nl/u/kitap/img/b/3/0/30-x-45-cm-bayrak-1429452737.png">' +
					'<span onclick="handleItemClick();">' + countries[i] + '</span>' +
					' </li>'; 
			}
		}
	}
});

function handleSelection(){
	alert();
}

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"html"}