This Project asks you to make a PHP web service that uses AJAX to retrieve data from it. When the page loads, or the home element is clicked, you will see all book covers, one for each of the 14 folders under books.

Expected Behavior Screencast

Whenever the user clicks a book cover of any book the book covers should be removed from the page and replaced with the information for one book. Send an AJAX request to the server to get the html to display the book cover image, title, author, rating, description, and review that begins with 1..5 stars:

php page:

// Project Best Reads

//

// 1) Use a query parameter from AJAX to echo back an array of image urls.

// To return an array to a JavaScript you need json_encode. Do not hard

// code the array. This service should work if more folders are added.

$urls = ["./books/2001spaceodessy", "./books/wizardofoz"];

echo json_encode($urls);

// Output would be this (json_encode adds an escape character: \ before /

// [".\/books\/2001spaceodessy",".\/books\/wizardofoz"]

// 2) Use a different query parameter to echo back the html for one information

// page containing the book cover, title, author, ...

?>

html page:

"stylesheet" type="text/css" href="bestreads.css" />

"header">

bestreads

"back">home

"allImages">

function showAll() {

alert("Under Construction")

// Use AJAX to get an array of image urls.

//

// To convert JSON array to a Javascript array, use code like this:

// $arr = JSON.parse(ajax.responseText);

}

css page:

/*

Project Best Reads. This file contains many details

about styling, so you should not have to modify this file.

This assumes you can figure out what each rule is used for.

*/

body {

background-color: #fefcf4;

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

}

.onebook {

background-color: #f4f1eb;

border-radius: 5px;

box-shadow: 0 0 15px gray;

float: left;

margin: 2.5%;

padding: 10px;

width: 150px;

height: 220px;

}

img {

height: 220px;

width: 150px;

float: left;

}

.thedetails {

padding: 10px;

margin: 10px;

float: left;

width: 900px;

height: 220px;

}

.onereview {

background-color: #f4f1eb;

border-radius: 5px;

box-shadow: 0 0 15px gray;

float: left;

margin: 5%;

padding: 10px;

width: 1100px;

height: 270px;

}

#back {

border: #974455 solid 2px;

bottom: 5px;

color: #974455;

font-size: 18pt;

right: 10%;

padding: 3px;

position: absolute;

}

#header {

background-image: url("./images/books.jpeg");

box-shadow: 0 5px 5px lightgray;

height: 104px;

position: relative;

}

#header > div {

bottom: 0px;

color: #939384;

font-family: Tahoma, sans-serif;

font-size: 36pt;

position: absolute;

left: 10%;

}

bestreads 2964 CALL WILD HoBBIT STEPHEN Terry bestreads 2964 CALL WILD HoBBIT STEPHEN Terry