JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://gender-api.com/js/jquery/gender.js"></script>
<script src="js/api.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body background="http://starecat.com/content/wp-content/uploads/my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg">
    <section id="fetch">
        <input type="text" placeholder="Please enter your name here" id="term" />
        <button type="button" id="search">ENTER</button>
    </section>
    <div id="name">
        <div id="nameBox"></div>
        <div id="nameText"></div>
    </div>
</body>

JavaScript

$(document).ready(function () {

    $('#term').focus(function () {
        var full = $("#content section").length ? true : false;

        if (full == false) {
            $('#content').hide();
        }
    });
    
    var displayContent = function () {
        $('#fetch').hide();
        $('#content').show();
        var content = $('#term').val();
        content = content.toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        console.log("Name entered: " + content);
        var googleApi = "https://sheetsu.com/apis/v1.0/f924526c";
        var googleKey = "hiK4L59sTr3rugykvsXZ";
        var googleSecret = "wgGHBTVxSjn4mLZKnnqM4PbH8w3SSqGnuKh6sfHc";
        var data = {};
        $.ajax({
            url: googleApi,
            headers: {
                "Authorization": "Basic " + btoa(googleKey + ":" + googleSecret)
            },
            data: data,
            dataType: 'json',
            type: 'GET',
            success: function (data) {
                $.each(data, function (index, value) {
                    if (value.name == content) {
                        alert(value.name);
                    }
                });
            },
            error: function (data) {
                console.log("ERROR: " + data);
            }
        });
    };
    $('#search').click(displayContent);
    $('#term').keypress(function (event) {
        if (event.which == 13) {
            displayContent();
        }
        console.log("SEARCH");
    });
    console.log("waiting for name to be entered");
});