Answer to Question #318627 in HTML/JavaScript Web Application for jhon

Question

Answer to Question #318627 in HTML/JavaScript Web Application for jhon

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #318627 in HTML/JavaScript Web Application for jhon

Comments

Leave a comment

Related Questions