_roll.erb

  <div id="die">
    <% if @roll %>
      <img src="/<%= @roll.value %>.png" title="<%= @roll.value %>" alt="the roll">
    <% end %>
  </div>

application.js

// $(document).ready(function () {
//   $(".container").on("submit", function(event) {
//     event.preventDefault();

//     var number = 1 + Math.floor(Math.random() * 6);
//     var form = $(this);

//     $.post("/rolls", {value: number}, function(response){
//       var oldSrc = $("#die img").attr("src");
//       var newSrc = "/" + response + '.png';
//       $("#die img").attr("src", newSrc);
//       debugger;
//     });
//   });
// });

$(document).ready(function () {
  $(".container").on("submit", function(event) {
    event.preventDefault();

    var number = 1 + Math.floor(Math.random() * 6);
    var form = $(this);

    $.post("/rolls", number, function(response){
      $("#die").html(response);
    });
  });
});

index.rb

get '/' do
  erb :index
end


# TODO: convert this route to use AJAX
post '/rolls' do
  # If the user passes-in a "value", let's use it. Otherwise, we'll generate a random one.
  # See: roll_if_value_is_nil method in the Roll model.
  value = params[:value] ? params[:value].to_i : nil

  @roll = value ? Roll.create({ value: value }) : Roll.create

  erb :_roll  # HINT: what does this do? what should we do instead?
end

lucky_ajax.md

Instructions:

1. Download this application skeleton.
2. Convert the app to use AJAX.
3. Add any files you changed to your gist and submit your code.