JSFiddle - React, Tailwind, and code Playground

by Balkanlii

HTML

<select id = "locationList" onchange="locationListChanged()" style="width:115px;">
        <option value = "Toronto,CA">Toronto, CA</option>
        <option value = "Montreal,CA">Montreal, CA</option>
		<option value = "Laval,CA">Laval, CA</option>
		<option value = "Halifax,CA">Halifax, CA</option>
		<option value = "Berlin,DE">Berlin, DE</option>
        <option value = "Melbourne,AU">Melbourne, AU</option>
		<option value = "Auckland,NZ">Auckland, NZ</option>
	    <option value = "São Paulo,NZ">São Paulo, NZ</option>
		<option value = "Amsterdam,NL">Amsterdam, NL</option>
</select>
<label id="lblTime"></label>

JavaScript

function setTimeValue() {
  var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	document.getElementById("lblTime").innerHTML = timezone;  
}
setTimeValue();	

function locationListChanged()
{
   var e = document.getElementById("locationList");
	 var val = e.options[e.selectedIndex].value;
	 var city =val.split(',')[0];
   var country = val.split(',')[1];
  
   var updatedTimeZone = -----how to find based on city and country???------
   
   document.getElementById("lblTime").innerHTML = updatedTimeZone; 
}