<![CDATA[
8. Write an HTML page that contains a selection box with a list of 5 countries. When the user selects
a country, its capital should be printed next in the list. Add CSS to customize the properties of the
font of the capital (color, bold and font size).
<!DOCTYPE html>
<html>
<head>
<style>
#capital {
color: blue;
font-weight: bold;
font-size: 20px;
}
*{
text-align:center;
font-size:30px;
}
</style>
</head>
<body id="bd" topmargin="200px">
<h2>Select a Country:</h2>
<select id="countrySelect" onchange="displayCapital()">
<option value="">Select a country</option>
<option value="ind">India</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="france">France</option>
<option value="germany">Germany</option>
</select>
<h3>Capital:</h3>
<p id="capital"></p>
<script>
function displayCapital() {
var selectBox = document.getElementById("countrySelect");
var capitalDisplay = document.getElementById("capital");
var selectedCountry = selectBox.options[selectBox.selectedIndex].value;
switch (selectedCountry) {
case "ind":
capitalDisplay.innerHTML = "New Delhi";
document.getElementById('bd').style.backgroundColor = '#fcbe12';
break;
case "canada":
capitalDisplay.innerHTML = "Ottawa";
document.getElementById('bd').style.backgroundColor= '#9ffc12';
break;
case "uk":
capitalDisplay.innerHTML = "London";
document.getElementById('bd').style.backgroundColor = '#12fcd1';
break;
case "france":
capitalDisplay.innerHTML = "Paris";
document.getElementById('bd').style.backgroundColor= '#fc8b12';
break;
case "germany":
capitalDisplay.innerHTML = "Berlin";
document.getElementById('bd').style.backgroundColor= '#befc12';
break;
default:
capitalDisplay.innerHTML = "";
}
}
</script>
</body>
</html>
]]>
<![CDATA[
]]>