DiyahM/search.html

## search.html
<!DOCTYPE html>
<html>
  <head>
    <title>Books</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(function() {
        var i = 0;
        var searchTerm = '';
        function getBooks(subject, startIndex){
          $.get('https://www.googleapis.com/books/v1/volumes', {
            q: subject,
            startIndex: startIndex,
            maxResults: 20
          }, function(data) {
              //display all 20 results on page
            });

          });
        }
        function search(){
          searchTerm = $('.searchBox').val();
          getBooks(searchTerm, i);
        }
        $('.searchBtn').click(search);


      });
    </script>
  </head>
  <body>
    <input type='text' class='searchBox'/>
    <button class='searchBtn'>Search</button>
    <div id='image-div'>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Books</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$(function() {
	var i = 0;
	var searchTerm = '';
	function getBooks(subject, startIndex){
	$.get('https://www.googleapis.com/books/v1/volumes', {
	q: subject,
	startIndex: startIndex,
	maxResults: 20
	}, function(data) {
	//display all 20 results on page
	});

	});
	}
	function search(){
	searchTerm = $('.searchBox').val();
	getBooks(searchTerm, i);
	}
	$('.searchBtn').click(search);


	});
	</script>
	</head>
	<body>
	<input type='text' class='searchBox'/>
	<button class='searchBtn'>Search</button>
	<div id='image-div'>
	</div>
	</body>
	</html>