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>
<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 section").length ? true : false;

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

    var getID = function () {

        var content = $('#term').val();
        console.log("Name entered: " + content);

        var apiUrl = "https://sheetsu.com/apis/f924526c";

        $.getJSON(apiUrl, function (json) {

            console.log(json);
            console.log(JSON.stringify(json));

            var getName = $.each(getName, function (content, json) {
                console.log(json.name);
                console.log(getName[content].id);
            });

            var identifiedId = $.each(getName, function () {
                console.log(this.name);
                console.log(this.id);
            })

            var name = json.result[id].name;

            var $nameText = $("#nameText"),
                str = name;
            html = $.parseHTML(str),
            nodeNames = [];
            $nameText.append(html);
            console.log(name);

            var message = json.result[identifiedId].message;
            var $messageText = $("#messageText"),
                str = message;
            html = $.parseHTML(str),
            nodeNames = [];
            $messageText.append(html);
            console.log(message);

            var type = json.result[identifiedId].type;
            console.log(type);

            var getFigures = function () {

                if (type == "mf") {

                    $('#figures').prepend('<img src = "http://placebear.com/500/500" />');
                    console.log("mf found");

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

                    $('#figures').prepend('<img src = "http://placebear.com/500/500" />');
                    console.log("mm found");

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

                    $('#figures').prepend('<img src = "http://placebear.com/500/500"...