Menu

Aim: 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 to the list. Add CSS to customize the properties of the font of the capital (color, bold and font size).

Program:

<!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">
    <title>Select Here</title>

    <style>
        body {
            background-image: url('https://img.freepik.com/premium-photo/illustrate-beauty-diversity-with-dynamic-stock-photo-showcasing-world-map-vector-formed-b_997534-28603.jpg'); /* Direct Image URL */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            text-align: center;
            font-family: Arial, sans-serif;
            color: white;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        select {
            color: green;
            font-size: 18px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Select a Country</h2>
    <select id="country" onchange="displayCapital(this)">
        <option value="Washington DC">USA</option>
        <option value="New Delhi">India</option>
        <option value="Beijing">China</option>
        <option value="Tokyo">Japan</option>
        <option value="Berlin">Germany</option>
    </select>

    <script>
        function displayCapital(change) {
            var value = change.value;
            alert('Capital is: ' + value);
        }
    </script>

</body>
</html>
Output:

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 to the list. Add CSS to customize the properties of the font of the capital (color, bold and font size).

Click here to explore it

;