<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 101 - Modern JS</title>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>
  <body>
    <h4>
      <button class="continue" id="button-action">Blank</button>
    </h4>
    <div id="banner-message">Jquery 101!</div>
    <h4>
      <button id="ajax-call">Click to update message via AJAX</button>
    </h4>
    <script>
      $(document).ready(function() {
         console.log("ready!");
         var bannerMessage = $("#banner-message");
         // DOM Traversal and manipulation
         $("button.continue").text("Click to hide " + bannerMessage.html());
         // Event handling
         $("#button-action").on( "click", function(event) {
            bannerMessage.toggle(function() {
                if ($(this).is(":hidden")) { 
                  $("#button-action").text("Click to show " + bannerMessage.html());
                } else { 
                  $("#button-action").text("Click to hide " + bannerMessage.html()); 
                }
            });
         });
         // AJAX 
         $("#ajax-call").on("click", function(event) { 
            $.ajax({
             url: "https://jsonplaceholder.herokuapp.com/posts/1",
             success: function(data) {
              console.log(data)
                bannerMessage.html(data.title);
             }
            });
         });
      });
    </script>
  </body>

</html>