Question #318627
Capital and Country
The goal of this coding exam is to quickly get you off the ground with HTML select element
Reference image:(final output)
https://assets.ccbp.in/frontend/content/dynamic-webapps/capital-and-country-op.gif
Test cases:
- page should consist only one HTML span element with a non-empty text content
- page should consist only one HTML paragraph element
- page should consist of selected as HTML attribute for the HTML option element
- JS code implementation should use addEventListenter with event as change
- when the value of the HTML select element is changed ,then the text content in the HTML paragraph element should be the selected country name
- page should consist only one main heading element
- page should consist of HTML select element
- page should consist of four HTML option elements with attribute as value.
pass the above all test cases....
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capital and Country</title>
</head>
<body>
<style>
.block__text{
display: inline-block;
margin-left: 10px;
}
.county-name{
font-weight: 600;
font-size: 22px;
}
</style>
<h1>Capital and Country</h1>
<div class="block">
<select name="capital" id="capital-select">
<option value="paris">Paris</option>
<option value="london">London</option>
<option value="newYour">New Your</option>
<option value="newDalhi" selected>New Dalhi</option>
</select>
<p class="block__text">is the capital of?</p>
</div>
<span class="county-name" id="county-name">India</span>
<script>
const selectCountry = document.getElementById('capital-select');
const countyName = document.getElementById('county-name');
const countries = {
paris: 'Franse',
london: 'United Kindom',
newYour: 'USA',
newDalhi: 'India',
}
function selectedCounry(event) {
countyName.textContent = countries[event.target.value]
}
selectCountry.addEventListener('change', selectedCounry)
</script>
</body>
</html>
