Answer to Question #329489 in HTML/JavaScript Web Application for Bylapati suresh kumar

Question #329489

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:


1.page should consist only one HTML span element with a non-empty text content

2.page should consist only one HTML paragraph element

3.page should consist of selected as HTML attribute for the HTML option element

4.JS code implementation should use addEventListenter with event as change

5.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

6.page should consist only one main heading element

7.page should consist of HTML select element

8.page should consist of four HTML option elements with attribute as value.



pass the above all test cases....


5 case is not executed please help me


1
Expert's answer
2022-04-17T02:50:25-0400

--------------------------------------------------------- HTML --------------------------------------------------------------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<header>Capital and Country</header>

<select name="country" id="country">

  <option value="France">Paris</option>

  <option value="United Kingdom">London</option>

  <option value="USA">New York</option>

  <option value="India" selected="select">New Delhi</option>

</select>

<span> is the capital of ?</span>

<p class="result">India</p>

<script src="main.js"></script>

</body>

</html>


----------------------------------------------- JAVASCRIPT -----------------------------------------------------------------

document.querySelector('#country').addEventListener('change', (event) => {

 const result = document.querySelector('.result');

 result.textContent = `${event.target.value}`;

});



Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
APPROVED BY CLIENTS