JSFiddle - React, Tailwind, and code Playground

by amirshim

HTML

<script src="https://api.trello.com/1/client.js?key=00f1dd1e00000f1dd1e00000f1dd1e00&amp;dummy=.js"></script>
<div id="loggedout"> <a id="connectLink" href="#">Connect To Trello</a>

</div>
<div id="loggedin">
    <div id="header">Logged in to as <span id="fullName"></span>  <a id="disconnect" href="#">Log Out</a>

    </div>
    <div id="output"></div>
    <input placeholder="Model ID to add" id="model_id" type="text" size=60 />
    <br/>
    <input placeholder="callback url" id="urlcb_id" type="text" size=60 />
    <br/>
    <input placeholder="description" id="desc_id" type="text" size=60 />
    <br/> <a href="#" id="addModel">Add webhook</a>

</div>

CSS

body {
    font-family: arial;
    font-size: 12px;
}
#loggedout {
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
}
#loggedin {
    display: none;
}
#header {
    padding: 4px;
    border-bottom: 1px solid #000;
    background: #eee;
}
#output {
    padding: 4px;
}
.card {
    padding: .3em;
}

JavaScript

var refreshSubs = function () {

    $("#output").empty();
    var $cards = $("<div>")
        .text("Loading Cards...")
        .appendTo("#output");

    Trello.get("token/" + Trello.token() + "/webhooks", function (cards) {
        $cards.empty();
        console.log(cards);
        $.each(cards, function (ix, card) {

            $("<a>")
                .attr({
                href: "#"
            })
                .addClass("card")
                .text("show")
                .click(function () {
                $("#urlcb_id").val(card.callbackURL);
                $("#model_id").val(card.idModel);
                $("#desc_id").val(card.description);
            })
                .appendTo($cards);


            $("<a>")
                .attr({
                href: "#"
            })
                .addClass("card")
                .text("delete")
                .click(function () {
                $("#urlcb_id").val(card.callbackURL);
                $("#model_id").val(card.idModel);
                $("#desc_id").val(card.description);

                Trello.del("webhooks/" + card.id, refreshSubs);
            })
                .appendTo($cards);

            $('<span>').text(card.id).appendTo($cards);


            $("<br>").appendTo($cards);

        });

        $("<div/>")
            .addClass("card")
            .text("End of list")
            .appendTo($cards);
    });
};

var onAuthorize = function () {
    updateLoggedIn();
    refreshSubs();
};

var updateLoggedIn = function () {
    var isLoggedIn = Trello.authorized();
    $("#loggedout").toggle(!isLoggedIn);
    $("#loggedin").toggle(isLoggedIn);
};

var logout = function () {
    Trello.deauthorize();
    updateLoggedIn();
};

Trello.authorize({
    interactive: false,
    success: onAuthorize
});

$("#connectLink")
    .click(function () {
    Trello.authorize({
        type: "popup",
        success: onAuthorize
   ...