Help us understand the problem. What is going on with this article?

米国グーグルサイトでググるちょっとしたモノ。

米国グーグルサイトでググるちょっとしたモノです。

ソースコードはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ENググる</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

</head>

<body class="text-center">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <main role="main" class="inner cover">
            <h1 class="cover-heading">ENググる</h1>
            <div class="input-group mb-3">
                <div>
                    <select class="custom-select" name="gl">
                        <option value="gl=us&hl=en&gws_rd=cr&pws=0&">米国</option>
                    </select>
                </div>
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-default">キーワードを入力ください</span>
                </div>
                <input type="text" name="gnkey" class="form-control" aria-label="Sizing example input"
                    aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="mb-3" id="view">
            </div>
        </main>
    </div>
    <script>
        $(function () {
            $("[name=\"gnkey\"],[name=\"gl\"]").on("input change", function () {
                var urls = "https://www.google.com/search?" + $("[name='gl']").val() + "q=" + encodeURIComponent($("[name=\"gnkey\"]").val());
                $("#view").html($("[name=\"gnkey\"]").val()?"<a href='" + urls + "' target='_blank'>" + urls + "</a>":"");
            });
        });
    </script>
</body>
</html>
question909
アイディアや個人用として使用しています。
https://taoka-toshiaki.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away