JSFiddle - React, Tailwind, and code Playground

by cklkaren

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>
<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 id="search">ENTER</button>
    </section>
    <section id="content">
        <div id="figures">
            <script>
                
            </script>
        </div>
        <div id="name">
            <div id="nameBox"></div>
            <div id="nameText"></div>
        </div>
        <div id="message">
            <div id="messageBox"></div>
            <div id="messageText"></div>
        </div>
    </section>
</body>

CSS

body {
    background-repeat: no-repeat;
}
#figures {
    position:absolute;
    bottom: 0px;
}
#name {
    position: fixed;
    width: 200px;
    height: 200px;
    background: white;
    opacity: 0.8;
    margin: 100px 0px 0px 150px;
}
#nameText {
    margin: 80px 0px 0px 80px;
}
#message {
    position: fixed;
    width: 500px;
    height: 500px;
    background: white;
    opacity: 0.8;
    margin: 100px 0px 0px 600px;
}
#messageText {
    margin: 100px 0px 0px 200px;
}

JavaScript

$(document).ready(function () {

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

        if (full == false) {
            $('#content').empty();
        }
    });

    var getFigures = function (type) {

        if (type == "mf") {

            $('#figures').prepend('<img src = "images/mf.png" height = "500px" width = "500px" />');
            console.log("mf found");

        } else if (type == "mm") {

            $('#figures').prepend('<img src = "images/mm.png" height = "500px" width = "500px" />');
            console.log("mm found");

        } else if (type == "ff") {

            $('#figures').prepend('<img src = "images/ff.png" height = "500px" width = "500px" />');
            console.log("ff found");

        } else if (type == "male") {

            $('#figures').prepend('<img src = "images/male.png" height = "500px" width = "500px" />');
            console.log("male found");

        } else if (type == "female") {

            $('#figures').prepend('<img src = "images/female.png" height = "500px" width = "500px" />');
            console.log("female found");


        }

    };


    var displayMessage = function (message) {

        console.log("box clicked, hide box");
        $('#clickBox').hide();
        $('#message').show();

    }

    var displayContent = function () {

        $('#fetch').hide();
        $('#message').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/f924526c";

        $.getJSON(googleApi, function (json) {

            $('#message').hide();
            console.log(json.result);
            console.log(JSON.stringify(json));

            var item = json.result.find(function (e) {

                return...