create trello cards

creates a list of trello cards that correspond to pages that need animation

by Raj Shekhar

HTML

<script src="https://trello.com/1/client.js?key=d1aef69892d423fa7282e72c5e746a71"></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>
    
    <a id="rename" href="#">Rename</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 { 
    display: block; 
    padding: 2px;
    cursor: pointer;
}

JavaScript

/* 
NOTE: The Trello client library has been included as a Managed Resource.  To include the client library in your own code, you would include jQuery and then

<script src="https://api.trello.com/1/client.js?key=your_application_key">...

See https://trello.com/docs for a list of available API URLs

The API development board is at https://trello.com/api

The &dummy=.js part of the managed resource URL is required per http://doc.jsfiddle.net/basic/introduction.html#add-resources
*/

var onAuthorize = function() {
    updateLoggedIn();
    $("#output").empty();
    
    Trello.members.get("me", function(member){
        $("#fullName").text(member.fullName);
     
        Trello.get("boards/20WlWK9x/lists", function(lists) {
            // 55408a124431850aebaea9d2
            
            console.log(lists);       
            $.each(cards, function(ix, card) {
                $("<a>")
                .addClass("card")
                .text(card.name)
                .appendTo($cards)
                .click(function(){
                    Trello.post("cards/" + card.id + "/actions/comments", { text: "Hello from jsfiddle.net!" })
                })
            });  
        });
    });

};

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,
        scope: { write: true, read: true }
    })
});

$("#disconnect").click(logout);