Write an HTML page that contains a selection box with a list of 5 countries. When the user selects a country, its capital should be printed next in the list. Add CSS to customize the properties of the font of the capital (colour,bold and font size).

Aug 29, 2024

—

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #city {
            font-size: 32px;
            font-weight: bold;
            color: blue;
        }
    </style>
</head>

<body>
    <h2><u>List of country</u></h2>
    <select onchange="f1()" id="clist">
        <option>---Select country---</option>
        <option value="New Delhi">India</option>
        <option value="Canberra">Australia</option>
        <option value="Wasigton DC">USA</option>
        <option value="Ottawa">Canda</option>
        <option value="London">UK</option>
    </select>
    <br /><br />
    <p id="city"></p>
    <script>
        function f1() {
            var cap_city = document.getElementById("clist").value;
            var city = document.getElementById("city");
            city.innerHTML = "Capital city is " + cap_city;
            //document.getElementById("city").style.fontsize = "32px";

        }
    </script>
</body>

</html>

Java script

Write an HTML page that contains a selection box with a list of 5 countries. When the user selects a country, its capital should be printed next in the list. Add CSS to customize the properties of the font of the capital (colour,bold and font size).

Comments

Leave a Reply Cancel reply