matgargano/index.html

## index.html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello, world!</title>
</head>

<body>


    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6" id="books"></div>
            <div class="col-12 col-md-6" id="current-book"></div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="js/script.js"></script>
</body>

</html>

## script.js
jQuery(document).ready(function($){
    axios.get('http://statenweb.mockable.io/books/').then(function(result){
        var books = result.data;
        var booksHTML = books.map(function(book){
            return $('<p>').addClass('book').data('id', book.id).html(book.title + ' (' + book.id + ')');
        });
        $('#books').html(booksHTML);
    });

    $('#books').on('click', '.book', function(){
        var bookId = $(this).data('id');
        var url = "http://statenweb.mockable.io/books/" + bookId;

        $("#current-book").html('Loading');

        axios.get(url).then(function(book){

            var title = $('<h2>').html(book.data.title);
            var author = $('<h3>').html(book.data.author);
            var genre = $('<p>').html('Genre: ' + book.data.genre);
            var publisher = $('<p>').html('Publisher: ' + book.data.publisher);
            $("#current-book").html([
              title,
              author,
              genre,
              publisher
            ]);
        });
    });


});

## style.css
.book {
    cursor: pointer;
    transition: 200ms;
}

.book:hover {
    color: tomato;
    text-decoration:underline;
}
	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
	crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
	<title>Hello, world!</title>
	</head>

	<body>


	<div class="container">
	<div class="row">
	<div class="col-12 col-md-6" id="books"></div>
	<div class="col-12 col-md-6" id="current-book"></div>
	</div>
	</div>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
	crossorigin="anonymous"></script>
	<script src="js/script.js"></script>
	</body>

	</html>
	jQuery(document).ready(function($){
	axios.get('http://statenweb.mockable.io/books/').then(function(result){
	var books = result.data;
	var booksHTML = books.map(function(book){
	return $('<p>').addClass('book').data('id', book.id).html(book.title + ' (' + book.id + ')');
	});
	$('#books').html(booksHTML);
	});

	$('#books').on('click', '.book', function(){
	var bookId = $(this).data('id');
	var url = "http://statenweb.mockable.io/books/" + bookId;

	$("#current-book").html('Loading');

	axios.get(url).then(function(book){

	var title = $('<h2>').html(book.data.title);
	var author = $('<h3>').html(book.data.author);
	var genre = $('<p>').html('Genre: ' + book.data.genre);
	var publisher = $('<p>').html('Publisher: ' + book.data.publisher);
	$("#current-book").html([
	title,
	author,
	genre,
	publisher
	]);
	});
	});




	});
	.book {
	cursor: pointer;
	transition: 200ms;
	}

	.book:hover {
	color: tomato;
	text-decoration:underline;
	}