Fibonnaci using Ajax and Jsfiddle ajax echo

More info on ajax http://doc.jsfiddle.net/use/echo.html Fibonacci_numbers in javascript doco here http://en.literateprograms.org/Fibonacci_numbers_(JavaScript) - actually its just adding last two numbers together to get the next one!!

by Andy Bulka

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<button id="next-fib">Next Fibonnaci</button>
<ul id="fibs">
<li/>1
<li/>1
</ul>

CSS

#fibs {
  list-style-type: none; 
}
#fibs li {
  float: left;
  padding-left: 10px;
}

JavaScript

function make_next_fib() {
  var all_lis = $('#fibs > li');
  var last_two_lis = all_lis.slice(all_lis.length - 2);
  var last_two_fibs = last_two_lis.map(function() {
    return parseInt($(this).text());
  }); 

  var sum = last_two_fibs[0] + last_two_fibs[1];
  var json = $.toJSON({ next_fib: sum });
    
  $.ajax({
    url: '/echo/json/',
    dataType: 'json',
    type: 'POST',
    data: {
      json: json,
    },
    success: function(data) {
      var li = $('<li>').text(data.next_fib);
      $('#fibs').append(li);
    },
  });
}

$('#next-fib').click(function() {
  make_next_fib();
});