jQuery 101 - Modern JS

<!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://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=JavaScript&format=json",
             success: function(data) {
              console.log(data)
                bannerMessage.html("There are " + data.query.searchinfo.totalhits + " JavaScript related articles on Wikipedia.");
             }
            });
         });
      });
    </script>
  </body>

</html>