Answer to Question #318198 in HTML/JavaScript Web Application for vicky

Question #318198

Capital and Country

The goal of this coding exam is to quickly get you off the ground with HTML select element

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/capital-and-country-op.gif

Achieve the design with HTML, CSS, and functionality with JS

  • When the capital name is changed in the HTML select element then the text content in the HTML paragraph element should be the country name of the selected capital.

Warning

Do not delete the prefilled code in JS.


Note

HTML option element should consist of selected as an attribute for the value newDelhi by default.

Javascript:

let countries = {

  paris: "France",

  london: "United Kingdom",

  newYork: "USA",

  newDelhi: "India"

};





1
Expert's answer
2022-03-25T16:23:16-0400
<!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>
    <div class="wrapper">
        <div class="container">
            <h1 class="title">Capital and Country</h1>
            <div class="content">
                <select name="capital" id="capital" class="capital" onchange="changeCapital(this)">
                    <option value="France">Paris</option>
                    <option value="United Kingdom">London</option>
                    <option value="USA">New York</option>
                    <option selected value="India">New Delhi</option>
                </select>
                <p class="text">is the capital of?</p>
            </div>
            <div class="country">
                <p id="country">India</p>
            </div>
        </div>
    </div>





    <style>
        .wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #000;
        }
        .container {
            width: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 30px;
        }
        .container p {
            margin: 0;
            padding: 0;
        }
        .title {
            font-size: 48px;
            font-weight: bold;
            color: #454545;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 20px;
            padding: 30px 18px;
        }
        .capital {
            height: 40px;
            margin-right: 24px;
            padding: 10px 10px;
            font-size: 16px;
            font-weight: 500;
        }
        .country {
            padding: 0 18px;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
    <script>
        function changeCapital(select) {
            let country = document.getElementById('country');


            country.innerText = select.value;
        }
    </script>
</body>
</html>

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
New on Blog
APPROVED BY CLIENTS