/app.css

## app.css
body {
  text-align: center;
  padding: 50px;
  font-size: 20px;
}
ul {
  list-style: none;
}
ul li {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #E6E6E6;
}
.fa {
  margin-right: 10px;
}
.fa-check {
  color: green;
}
.fa-times {
  color: red;
}

## app.js
$(document).on("ready", function(){

  var getInfos = function(boardId){
    var url = trelloApiUrl + "boards/" + boardId + "/lists?key=" + apiKey;
    $.ajax({
      type: "GET",
      url: url,
      success: function(data) {
        getCards(data[0].id);
        getCards(data[1].id);
        listenTaskForm(data[0].id);
        listenTaskClick();
      },
      error: function(data) {
        console.log('Lists not found');
      }
    });
  }

  var listenTaskClick = function(){
    $(".todo").on("click", "li", function(e){

      // récupérer l'id Trello de l'élément
      var id = $(this).data("id");
      var listId = $(this).data("list");
      var url = trelloApiUrl + "cards/" + id +  "?key=" + apiKey + "&token=" + token;

      var todoListId = "55c...46";
      var doneListId = "55cb...8c9";

      if (listId == todoListId) {
        targetListId = doneListId;
      } else {
        targetListId = todoListId;
      }

      $.ajax({
        url: url,
        type: "PUT",
        data: { idList: targetListId },
        success: function(data){
          console.log(data);
        },
        error: function(data){
          console.log("an error occurred");
        }
      });

      $(this).find("i").toggleClass("fa-times").toggleClass("fa-check");
      $(this).data("list", targetListId);

    })
  }

  var listenTaskForm = function(listId) {
    $(".todo-form").on("submit", function(e){
      e.preventDefault();
      var url = trelloApiUrl + "cards/?key=" + apiKey + "&token=" + token;
      var taskName = $(".todo-input").val();
      var data = {
        name: taskName,
        due: null,
        idList: listId,
        urlSource: null
      }
      $.post(url, data, function(data){
        appendTask(data);
      });
    });
  }

  var getCards = function(listId) {
    var getCardsUrl = trelloApiUrl + "lists/" + listId + "/cards?key=" + apiKey;
    $.ajax({
      type: "GET",
      async: false,
      url: getCardsUrl,
      success: function(data) {
        fillList(data);
      },
      error: function(data) {
        console.log('Cards not found');
      }
    });
  }

  var appendTask = function(card) {
    var todoListId = "55c...46";
    var openTag = "<li data-id='" + card.id + "' data-list='" + card.idList + "'>"
    if (card.idList == todoListId) {
      var $task = $(openTag + "<i class='fa fa-times'></i>" + card.name + "</li>");
    } else {
      var $task = $(openTag + "<i class='fa fa-check'></i>" + card.name + "</li>");
    }
    $(".todo").append($task);
  }

  var fillList = function(cards) {
    for (var i = 0; i < cards.length; i++ ){
      appendTask(cards[i]);
    }
  }

  var trelloApiUrl = "https://api.trello.com/1/";

  // Get app key
  // See https://trello.com/app-key
  var apiKey = "ab36........827";

  // Get a user token for read/write authorization
  // See https://trello.com/docs/gettingstarted/index.html#getting-a-token-from-a-user
  var token = "87f0.......ad90";

  // Write your todo board id
  var boardId = "jr...hH";

  getInfos(boardId);

});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <title>Todo list Trello</title>
    <link rel="stylesheet" href="app.css">
  </head>
  <body>

    <h1 class="board-name">Todo list</h1>

    <form action="" class="todo-form">
      <input type="text" placeholder="Enter a new task" class="form-control todo-input">
      <input type="submit" value="Add task" class="btn btn-success">
    </form>

    <ul class="todo">
    </ul>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script src="app.js"></script>
  </body>
</html>
	body {
	text-align: center;
	padding: 50px;
	font-size: 20px;
	}
	ul {
	list-style: none;
	}
	ul li {
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #E6E6E6;
	}
	.fa {
	margin-right: 10px;
	}
	.fa-check {
	color: green;
	}
	.fa-times {
	color: red;
	}
	$(document).on("ready", function(){

	var getInfos = function(boardId){
	var url = trelloApiUrl + "boards/" + boardId + "/lists?key=" + apiKey;
	$.ajax({
	type: "GET",
	url: url,
	success: function(data) {
	getCards(data[0].id);
	getCards(data[1].id);
	listenTaskForm(data[0].id);
	listenTaskClick();
	},
	error: function(data) {
	console.log('Lists not found');
	}
	});
	}

	var listenTaskClick = function(){
	$(".todo").on("click", "li", function(e){

	// récupérer l'id Trello de l'élément
	var id = $(this).data("id");
	var listId = $(this).data("list");
	var url = trelloApiUrl + "cards/" + id + "?key=" + apiKey + "&token=" + token;

	var todoListId = "55c...46";
	var doneListId = "55cb...8c9";

	if (listId == todoListId) {
	targetListId = doneListId;
	} else {
	targetListId = todoListId;
	}

	$.ajax({
	url: url,
	type: "PUT",
	data: { idList: targetListId },
	success: function(data){
	console.log(data);
	},
	error: function(data){
	console.log("an error occurred");
	}
	});

	$(this).find("i").toggleClass("fa-times").toggleClass("fa-check");
	$(this).data("list", targetListId);

	})
	}

	var listenTaskForm = function(listId) {
	$(".todo-form").on("submit", function(e){
	e.preventDefault();
	var url = trelloApiUrl + "cards/?key=" + apiKey + "&token=" + token;
	var taskName = $(".todo-input").val();
	var data = {
	name: taskName,
	due: null,
	idList: listId,
	urlSource: null
	}
	$.post(url, data, function(data){
	appendTask(data);
	});
	});
	}

	var getCards = function(listId) {
	var getCardsUrl = trelloApiUrl + "lists/" + listId + "/cards?key=" + apiKey;
	$.ajax({
	type: "GET",
	async: false,
	url: getCardsUrl,
	success: function(data) {
	fillList(data);
	},
	error: function(data) {
	console.log('Cards not found');
	}
	});
	}

	var appendTask = function(card) {
	var todoListId = "55c...46";
	var openTag = "<li data-id='" + card.id + "' data-list='" + card.idList + "'>"
	if (card.idList == todoListId) {
	var $task = $(openTag + "<i class='fa fa-times'></i>" + card.name + "</li>");
	} else {
	var $task = $(openTag + "<i class='fa fa-check'></i>" + card.name + "</li>");
	}
	$(".todo").append($task);
	}

	var fillList = function(cards) {
	for (var i = 0; i < cards.length; i++ ){
	appendTask(cards[i]);
	}
	}

	var trelloApiUrl = "https://api.trello.com/1/";

	// Get app key
	// See https://trello.com/app-key
	var apiKey = "ab36........827";

	// Get a user token for read/write authorization
	// See https://trello.com/docs/gettingstarted/index.html#getting-a-token-from-a-user
	var token = "87f0.......ad90";

	// Write your todo board id
	var boardId = "jr...hH";

	getInfos(boardId);

	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
	<title>Todo list Trello</title>
	<link rel="stylesheet" href="app.css">
	</head>
	<body>

	<h1 class="board-name">Todo list</h1>

	<form action="" class="todo-form">
	<input type="text" placeholder="Enter a new task" class="form-control todo-input">
	<input type="submit" value="Add task" class="btn btn-success">
	</form>

	<ul class="todo">
	</ul>

	<!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<script src="app.js"></script>
	</body>
	</html>