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>
    <pre id="jsonout"></pre>
</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 { 
    display: block; 
    padding: 2px;
}

CoffeeScript

clearShowBack = ->
    bb = $('<a href="#">Back</a>').click(testSomeThing)
    $("#output").empty().append(bb).append('<br/>')
    $("#jsonout").empty()

addTest = (name, func) ->
    out = $("#output")
    $('<a href="#"></a>').appendTo(out).text(name).click ->
        clearShowBack()
        $("#jsonout").empty().text("Executing: " + name)
        func()
        false
    out.append('<br/>')

        
prettyJson = (data, color = null) ->
    clearShowBack()
    out = $("#jsonout")
    if color
        out.attr("style", "color:" + color + ";")
    out.empty().text JSON.stringify(data, undefined, 2)

errorJson = (data) -> prettyJson data, "red"

selectedBoardID = null
selectedCardID = null

testSomeThing = ->
    out = $("#output").empty()
    $("#jsonout").empty()
    
    addTest "Get Member Info", ->
        Trello.get "member/me", {}, prettyJson, errorJson
        
    addTest "Get Board Info", ->
        Trello.get "boards/" + selectedBoardID, {}, prettyJson, errorJson

    addTest "List board's cards", ->
        Trello.get "boards/" + selectedBoardID + "/cards", {}, prettyJson, errorJson

    addTest "List member's cards", ->
        Trello.get "member/me/cards", {}, prettyJson, errorJson

    addTest "List member's boards", ->
        Trello.get "member/me/boards", {}, prettyJson, errorJson

    addTest "Select board", ->
        Trello.get "member/me/boards", {}, (data) ->
            clearShowBack()
            $.each data, (_,b) ->
                c = $('<a href="#" />').text(b.name).click ->
                    selectedBoardID = b.id
                    testSomeThing()
                out.append(c).append('</br>')

    addTest "Select card", ->
        Trello.get "boards/" + selectedBoardID + "/cards", {}, (data) ->
            clearShowBack()
            $.each data, (_,b) ->
                c = $('<a href="#" />').text(b.name).click ->
                    selectedCardID = b.id
                    testSomeThing()
               ...