application.js

$(document).ready(function(){

  $('form').on('submit',function(e){
    e.preventDefault();

    $.ajax({
      type:'post',
      url:'/rolls'
      }).done(function(data){
      $('#die').html('<img src=' + data + ".png>");
    });
  });
});

index.erb

<div class="container">
  <h1>Simplest Possible AJAX</h1>
  <p>This contrived app will simulate a roll of a 6-sided die.</p>

  <form method="post" action="/rolls">
    <input type="submit" value="Roll the Die">
  </form>

  <div id="die"></div>

</div>

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
  @roll.value.to_s
 # erb :index  # HINT: what does this do? what should we do instead?
end