Trello API testing

by Tobi Obeck

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>
</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;
  color: red;
}

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);

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

    // Output a list of all of the cards that the member 
    // is assigned to
    Trello.get("members/me/boards", function(cards) {
      $cards.empty();
      $("<div>").text("Click a card to add a comment to it").appendTo($cards);

      $.each(cards, function(ix, card) {
        $("<a>")
          .addClass("card")
          .text(card.name)
          .appendTo($cards)
          .click(function() {
            var plop = Math.random();
            var color = (plop > 0.7) ? "red" : "green";
            console.log(color);
            Trello.put("boards/" + card.id + "/prefs/background", {
              value: "grey"
            });
            setTimeout(function() {
              Trello.put("boards/" + card.id + "/prefs/background", {
                value: color
              });
            }, 3000);

            var newCard = {
              name: 'CARD_TITLE',
              desc: 'CARD_DESC',
              pos: 'top',
              idList: '59a9cb219fb3953bb7f61b97'
            };
            var success = function(successMsg) { /* your actions on success case */ }
            var error = function(errorMsg) { /* your actions on error case */ }

            Trello.post('/cards', newCard, success, error);
          })
     ...