nastanford · October 7, 2017 16:47
diff --git a/StarWars_Characters.html b/StarWars_Characters.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
 </head>
 <body>
 <style>
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
 </style>
 <h3>Star Wars People:</h3>
 <div id="main"></div>
 <script>
  // This code is to help me get the url
  var url = window.location.pathname;

  // now I get the current file name in case you named it something I did not.
  var filename = url.substring(url.lastIndexOf('/')+1);

  // This function is being used to help me get the page number
  var getUrlParameter = function getUrlParameter(sParam) {
      var sPageURL = decodeURIComponent(window.location.search.substring(1)),
          sURLVariables = sPageURL.split('&'),
          sParameterName,
          i;
      for (i = 0; i < sURLVariables.length; i++) {
          sParameterName = sURLVariables[i].split('=');
          if (sParameterName[0] === sParam) {
              return sParameterName[1] === undefined ? true : sParameterName[1];
          }
      }
  };

  // I check to get the current page number
  var pageNumber = getUrlParameter('page');

  // If there is no current page number then we want to set it to the first page.
  if (pageNumber === undefined) {
    pageNumber = 1;
  }

  // This is setting the Previous Page Number
  var prev = parseInt(pageNumber)-1;

  // This is setting the Next Page Number
  var next = parseInt(pageNumber)+1;

  $.ajax({
    // This is the URL to the Star Wars API
    url: "https://swapi.co/api/people?page="+pageNumber,
    dataType: "json",
    success: function(data) {
      // This is the get the total number of pages.
      var pageTotal = Math.ceil(data.count/10);
      // This checks to see if this is the first page then we don't need a previous
      if(pageNumber != 1){
        $('#main').append("<a  href='/" + filename + "?page=1'>|< Start</a> ");   
        $('#main').append("<a  href='/" + filename + "?page=" + prev + "'> < Prev</a> ");   
      } else {
        $('#main').append("|< Start < Prev ");   
      }

      // This displays the Page Number and Page Total
      $('#main').append("  Page " + pageNumber + " of " + pageTotal + "  ");   

      // If the Page Total and the Current Page are the same we don't need a next
      if(pageTotal != pageNumber)
      {
        $('#main').append("<a  href='/" + filename + "?page=" + next + "'> Next ></a> ");   
        $('#main').append("<a  href='/" + filename + "?page=" + pageTotal + "'> End >|</a>");   
      } else {
        $('#main').append("Next > End >|");   
      }

      // A line break before displaying  the current results
      $('#main').append("<br />");   
      
      var arr = data.results;

      // Start the Un-ordered List.
      $('#main').append("<ul>");   

      // Looping  through the results we get back.
      for ( var i = 0, l = arr.length; i < l; i++ ) {
        var character = arr[i];        
        var name = character.name;
        // Display the name of the character
        $('#main').append("<li>" + name.trim() + "</li>");             
      }

      // End the Un-ordered List.
      $('#main').append("</ul>");   
      }
  });
 </script> 
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
	</head>
	<body>
	<style>
	body {
	font-family: Arial, Helvetica, sans-serif;
	}
	</style>
	<h3>Star Wars People:</h3>
	<div id="main"></div>
	<script>
	// This code is to help me get the url
	var url = window.location.pathname;

	// now I get the current file name in case you named it something I did not.
	var filename = url.substring(url.lastIndexOf('/')+1);

	// This function is being used to help me get the page number
	var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = decodeURIComponent(window.location.search.substring(1)),
	sURLVariables = sPageURL.split('&'),
	sParameterName,
	i;
	for (i = 0; i < sURLVariables.length; i++) {
	sParameterName = sURLVariables[i].split('=');
	if (sParameterName[0] === sParam) {
	return sParameterName[1] === undefined ? true : sParameterName[1];
	}
	}
	};

	// I check to get the current page number
	var pageNumber = getUrlParameter('page');

	// If there is no current page number then we want to set it to the first page.
	if (pageNumber === undefined) {
	pageNumber = 1;
	}

	// This is setting the Previous Page Number
	var prev = parseInt(pageNumber)-1;

	// This is setting the Next Page Number
	var next = parseInt(pageNumber)+1;

	$.ajax({
	// This is the URL to the Star Wars API
	url: "https://swapi.co/api/people?page="+pageNumber,
	dataType: "json",
	success: function(data) {
	// This is the get the total number of pages.
	var pageTotal = Math.ceil(data.count/10);
	// This checks to see if this is the first page then we don't need a previous
	if(pageNumber != 1){
	$('#main').append("<a href='/" + filename + "?page=1'>\|< Start</a> ");
	$('#main').append("<a href='/" + filename + "?page=" + prev + "'> < Prev</a> ");
	} else {
	$('#main').append("\|< Start < Prev ");
	}

	// This displays the Page Number and Page Total
	$('#main').append(" Page " + pageNumber + " of " + pageTotal + " ");

	// If the Page Total and the Current Page are the same we don't need a next
	if(pageTotal != pageNumber)
	{
	$('#main').append("<a href='/" + filename + "?page=" + next + "'> Next ></a> ");
	$('#main').append("<a href='/" + filename + "?page=" + pageTotal + "'> End >\|</a>");
	} else {
	$('#main').append("Next > End >\|");
	}

	// A line break before displaying the current results
	$('#main').append("<br />");

	var arr = data.results;

	// Start the Un-ordered List.
	$('#main').append("<ul>");

	// Looping through the results we get back.
	for ( var i = 0, l = arr.length; i < l; i++ ) {
	var character = arr[i];
	var name = character.name;
	// Display the name of the character
	$('#main').append("<li>" + name.trim() + "</li>");
	}

	// End the Un-ordered List.
	$('#main').append("</ul>");
	}
	});
	</script>
	</body>
	</html>