Answer to Question #329734 in HTML/JavaScript Web Application for Suresh

Question

Answer to Question #329734 in HTML/JavaScript Web Application for Suresh

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #329734

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

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

pass the above all test cases.... 5 case are not executed

Expert's answer

<!DOCTYPE html>
<html> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<head>
<title>Hello html</title>
</head>
<body>
    <h1>Capital and Country</h1>
    <select name="Country" id="country" class ="country">
        <option value="Paris">Paris</option>
        <option value="London">London</option>
        <option value="New Delhi">New Delhi</option>
        <option value="New York">New York</option>
      </select>
    <label>is the capital of?</label>


    <label class="capital"></label>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<script>
    $('#country').change(function(e) {
        let labels = document.getElementsByTagName("label");
        if(this.value ==='Paris'){
            labels[1].textContent = "France";
        }
        if(this.value ==='London'){
            labels[1].textContent = "United Kingdom";
        }
        if(this.value ==='New Delhi'){
            labels[1].textContent = "India";
        }
        if(this.value ==='New York'){
            labels[1].textContent = "USA";
        }
    });
    </script>
</html>

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

Comments

No comments. Be the first!

Answer to Question #329734 in HTML/JavaScript Web Application for Suresh

Comments

Leave a comment

Related Questions