Flag Information

Info

Created On: September 1, 2023

Created By: @CalculatorTools

AI

Model: gpt-3.5-turbo-16k-0613

Time: 33 seconds

Prompt Tokens: 827

Completion Tokens: 1134

Total Token Cost: 1961

Get This App On Your Website

<iframe src="https://calculators.tools/prompt/d350b1c8867d39eafe44f61f439e9e6a/iframe/" width="100%" height="100%" frameborder="0" scrolling="yes" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-downloads allow-presentation allow-pointer-lock allow-orientation-lock" allowfullscreen="true" allowpaymentrequest="true" frameborder="0"></iframe><br><a href="https://calculator.tools/prompt/5448/" target="_blank" style="font-size: 12px; text-decoration: none;" alt="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools" title="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools">Powered by Calculator Tools</a>

1. Copy the code above with the iframe and link.
2. Paste the code into your website.
3. Resize the iframe to fit your website.

Javascript, HTML, CSS Code

                    javascript

<html>

<head>

		<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>



    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <title>Flag Information</title>

    <meta name="description" content="Flag Information">

    <meta name="keywords" content="flag, information, country">



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">



    <style>

        body {

            font-family: 'Roboto', sans-serif;

            background-color: #f8f9fa;

        }



        .container {

            max-width: 600px;

            margin-top: 50px;

            text-align: center;

        }



        h1 {

            font-size: 24px;

            margin-bottom: 20px;

            color: #333;

        }



        .form-group {

            margin-bottom: 30px;

        }



        select {

            width: 100%;

            padding: 10px;

            font-size: 16px;

            border-radius: 5px;

            border: 1px solid #ccc;

        }



        .flag-container {

            margin-top: 30px;

        }



        .flag {

            width: 100%;

            max-height: 200px;

            object-fit: cover;

            border-radius: 5px;

        }



        .info-container {

            margin-top: 20px;

            text-align: left;

        }



        .info-item {

            margin-bottom: 10px;

            font-size: 16px;

            color: #555;

        }



        .info-label {

            font-weight: 600;

            margin-right: 10px;

        }

    </style>



	<link rel="canonical" href="https://calculator.tools/prompt/5448/">

	<meta charset="utf-8">

</head>



<body>

    <div id="main-container" class="container">

        <h1>Flag Information</h1>

        <div class="form-group">

            <select id="country-select">

                <option value="">Select a country</option>

                <option value="Albania">Albania</option>

                <!-- Add more countries here -->

            </select>

        </div>

        <div class="flag-container">

            <img id="flag-image" class="flag" src="" alt="Flag">

        </div>

        <div id="info-container" class="info-container">

            <div class="info-item">

                <span class="info-label">Established:</span>

                <span id="established"></span>

            </div>

            <div class="info-item">

                <span class="info-label">Capital:</span>

                <span id="capital"></span>

            </div>

            <div class="info-item">

                <span class="info-label">Population:</span>

                <span id="population"></span>

            </div>

            <div class="info-item">

                <span class="info-label">Area:</span>

                <span id="area"></span>

            </div>

        </div>

    </div>



    <script type="text/javascript">

        // Country data

        var countries = {

            "Albania": {

                "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Flag_of_Albania.svg/1920px-Flag_of_Albania.svg.png",

                "established": "November 28, 1912",

                "capital": "Tirana",

                "population": "2,862,427",

                "area": "28,748 km²"

            },

            // Add more countries here

        };



        // Update flag and information when country is selected

        $("#country-select").change(function () {

            var selectedCountry = $(this).val();

            if (selectedCountry) {

                var countryData = countries[selectedCountry];

                $("#flag-image").attr("src", countryData.flag);

                $("#established").text(countryData.established);

                $("#capital").text(countryData.capital);

                $("#population").text(countryData.population);

                $("#area").text(countryData.area);

            } else {

                $("#flag-image").attr("src", "");

                $("#established").text("");

                $("#capital").text("");

                $("#population").text("");

                $("#area").text("");

            }

        });

    </script>

        <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>



        <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>

</body>

</html>

Flag Information

Info

Tags

AI

Get This App On Your Website

Javascript, HTML, CSS Code

IMAGE TO APP (New!)

SCREENSHOT TO APP (New!)

FAQ

What is Calculator Tools?

What Do You Mean Make An App?

Does This Use ChatGPT?

Calculator Tools

Want Better Apps?