joyjding/the_book_list.html

## the_book_list.html
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8"/>
		<title>My Book List</title>
	</head>
	<body>
		<h1>My Book List</h1>

	</body>
</html>

<script>

// var book = {
//     "title":"Imaginary Girls",
//     "author": "N. Ay",
//     "alreadyRead": false
// };

// var book2 = {
//     "title": "Eating Animals",
//     "author": "Jonathan Safron Foer",
//     "alreadyRead": true
// };

var bookList = [{
    "title": "Eating Animals",
    "alreadyRead": true,
    "data": {
      "author": "Jonathan Safron Foer", "pages" : "457", "category" : "self-help"
    },
    "url": "http://bks4.books.google.com/books?id=Dm4P5Eja-QoC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70mwEKD5x2BoqZjxB5Defb7XPSGlIGaC3aHu1ITjRaZoSeqyjx5wFrCQ6qq1WJ2YWkTUU9qzxMFhlEhBqCyO5zbJWk6gPbxsZSOCHzqcjH9lMG5tvTNTbZjnqxbS0vh-RIxWQR0"
},
{
    "title":"Imaginary Girls",
    "alreadyRead": false,
    "data": { //stuff to output, that way could avoid the other stuff
      "author": "N. Ay"
    },
    "url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_Gk_dUb_7gnxeWoxfkjTsvQ0EPM-Ms3FcHN_RFMDZ_SZPZ230"
}];

var pageNode = document.getElementsByTagName('body')[0]; //find me the first object on the page with tagname:body. Pointer to it.

//Putting text on the page
// var newParagraph = document.createElement('p'); //Created a new object newParagraph of the type 'p'. Not linked to anything, or inserted into the body.
// var paragraphText = document.createTextNode('Words!'); //Created a text object. Only DOM element that doesn't have a tag. Not placed.
// newParagraph.appendChild(paragraphText); //append text node child to paragraph node, newParagraph
// pageNode.appendChild(newParagraph); //appending paragraph node, newParagraph, to the body node

//Iterating through bookList, creating a paragraph node for each book
// for (i=0; i<bookList.length; i++) {
//     var b = bookList[i]; //saved to a variable to reduce stuff
//     var newParagraph = document.createElement('p');
//     var paragraphText = document.createTextNode(b.title + ": " + b.author);
//     newParagraph.appendChild(paragraphText);
//     pageNode.appendChild(newParagraph);
// }

//creating a ul, then li objects
// 1) make a ul outside for loop
// 2) make a list item out of each book
// var newList = document.createElement('ul');
// pageNode.appendChild(newList);

// for (i=0; i<bookList.length; i++) {
//     var b = bookList[i]; //saved to a variable to reduce stuff
//     var newLi = document.createElement('li');
//     var liText = document.createTextNode(b.title + ": " + b.author);
//     newLi.appendChild(liText);
//     newList.appendChild(newLi);
// }

// ul
//   li : title
//     ul
//       li: author

// 1) create the first ul
// 2) make an li for each book containing title

var newList = document.createElement('ul');
pageNode.appendChild(newList);

for (i=0; i<bookList.length; i++) {
    var book = bookList[i]; //saved to a variable to reduce stuff

    var newLi = document.createElement('li');
    var liText = document.createTextNode(book.title);
    newLi.appendChild(liText);
    newList.appendChild(newLi);
    if (book.alreadyRead == true) {
        newLi.className = "read";  //putting classes as far up as possible is good, b/c it allows it be maximally useful
    }

    var image = document.createElement('img');
    image.src = book.url;
    newLi.appendChild(image);

    var ul2 = document.createElement('ul');
    newLi.appendChild(ul2);

    for (key in book.data) {
        var newKey = document.createElement('li');
        var liText2 = document.createTextNode(key + ": " + book.data[key]);
        newKey.appendChild(liText2);
        ul2.appendChild(newKey);
    }
}

// var pageNode = document.getElementsByTagName('body')[0];

// for (i = 0; i < bookList.length; i++){
// 	var newParagraphs = document.createElement('p');
// 	for (j = 0; j<bookList[i].length; j++) {
// 		var listItem = document.createElement("li");
// 		var listText = document.createTextNode(bookList[i][j]);
// 		listItem.appendChild(listText);
		//var paragraphText = document.createTextNode("Title: " + bookList[i].title + ", Author: " + bookList[i].author);
	//}
	//newParagraphs.appendChild(paragraphText);
// 	pageNode.appendChild(newParagraphs);

// }

</script>


<style>

li {
  background: #009987;
}

li.read {
  border-left: 70px #568bac solid;
  border-right: 70px #34678a solid;
  border-top: 70px #478655 dotted;
  border-bottom: 70px #900342 dotted;
}

</style>

<!--
Keep track of which books you read and which books you want to read!

Create a webpage with an h1 of "My Book List".
Add a script tag to the bottom of the page, where all your JS will go.
Copy the array of books from the previous exercise.
Iterate through the array of books. For each book, create a p element with the book title and author and append it to the page.
Bonus: Use a ul and li to display the books.
Bonus: add a property to each book with the URL of the book cover, and add an img element for each book on the page.
Bonus: Change the style of the book depending on whether you have read it or not. -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>My Book List</title>
	</head>
	<body>
	<h1>My Book List</h1>

	</body>
	</html>

	<script>

	// var book = {
	// "title":"Imaginary Girls",
	// "author": "N. Ay",
	// "alreadyRead": false
	// };

	// var book2 = {
	// "title": "Eating Animals",
	// "author": "Jonathan Safron Foer",
	// "alreadyRead": true
	// };

	var bookList = [{
	"title": "Eating Animals",
	"alreadyRead": true,
	"data": {
	"author": "Jonathan Safron Foer", "pages" : "457", "category" : "self-help"
	},
	"url": "http://bks4.books.google.com/books?id=Dm4P5Eja-QoC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70mwEKD5x2BoqZjxB5Defb7XPSGlIGaC3aHu1ITjRaZoSeqyjx5wFrCQ6qq1WJ2YWkTUU9qzxMFhlEhBqCyO5zbJWk6gPbxsZSOCHzqcjH9lMG5tvTNTbZjnqxbS0vh-RIxWQR0"
	},
	{
	"title":"Imaginary Girls",
	"alreadyRead": false,
	"data": { //stuff to output, that way could avoid the other stuff
	"author": "N. Ay"
	},
	"url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_Gk_dUb_7gnxeWoxfkjTsvQ0EPM-Ms3FcHN_RFMDZ_SZPZ230"
	}];

	var pageNode = document.getElementsByTagName('body')[0]; //find me the first object on the page with tagname:body. Pointer to it.

	//Putting text on the page
	// var newParagraph = document.createElement('p'); //Created a new object newParagraph of the type 'p'. Not linked to anything, or inserted into the body.
	// var paragraphText = document.createTextNode('Words!'); //Created a text object. Only DOM element that doesn't have a tag. Not placed.
	// newParagraph.appendChild(paragraphText); //append text node child to paragraph node, newParagraph
	// pageNode.appendChild(newParagraph); //appending paragraph node, newParagraph, to the body node

	//Iterating through bookList, creating a paragraph node for each book
	// for (i=0; i<bookList.length; i++) {
	// var b = bookList[i]; //saved to a variable to reduce stuff
	// var newParagraph = document.createElement('p');
	// var paragraphText = document.createTextNode(b.title + ": " + b.author);
	// newParagraph.appendChild(paragraphText);
	// pageNode.appendChild(newParagraph);
	// }

	//creating a ul, then li objects
	// 1) make a ul outside for loop
	// 2) make a list item out of each book
	// var newList = document.createElement('ul');
	// pageNode.appendChild(newList);

	// for (i=0; i<bookList.length; i++) {
	// var b = bookList[i]; //saved to a variable to reduce stuff
	// var newLi = document.createElement('li');
	// var liText = document.createTextNode(b.title + ": " + b.author);
	// newLi.appendChild(liText);
	// newList.appendChild(newLi);
	// }

	// ul
	// li : title
	// ul
	// li: author

	// 1) create the first ul
	// 2) make an li for each book containing title

	var newList = document.createElement('ul');
	pageNode.appendChild(newList);

	for (i=0; i<bookList.length; i++) {
	var book = bookList[i]; //saved to a variable to reduce stuff

	var newLi = document.createElement('li');
	var liText = document.createTextNode(book.title);
	newLi.appendChild(liText);
	newList.appendChild(newLi);
	if (book.alreadyRead == true) {
	newLi.className = "read"; //putting classes as far up as possible is good, b/c it allows it be maximally useful
	}

	var image = document.createElement('img');
	image.src = book.url;
	newLi.appendChild(image);

	var ul2 = document.createElement('ul');
	newLi.appendChild(ul2);

	for (key in book.data) {
	var newKey = document.createElement('li');
	var liText2 = document.createTextNode(key + ": " + book.data[key]);
	newKey.appendChild(liText2);
	ul2.appendChild(newKey);
	}
	}

	// var pageNode = document.getElementsByTagName('body')[0];

	// for (i = 0; i < bookList.length; i++){
	// var newParagraphs = document.createElement('p');
	// for (j = 0; j<bookList[i].length; j++) {
	// var listItem = document.createElement("li");
	// var listText = document.createTextNode(bookList[i][j]);
	// listItem.appendChild(listText);
	//var paragraphText = document.createTextNode("Title: " + bookList[i].title + ", Author: " + bookList[i].author);
	//}
	//newParagraphs.appendChild(paragraphText);
	// pageNode.appendChild(newParagraphs);

	// }

	</script>


	<style>

	li {
	background: #009987;
	}

	li.read {
	border-left: 70px #568bac solid;
	border-right: 70px #34678a solid;
	border-top: 70px #478655 dotted;
	border-bottom: 70px #900342 dotted;
	}

	</style>

	<!--
	Keep track of which books you read and which books you want to read!

	Create a webpage with an h1 of "My Book List".
	Add a script tag to the bottom of the page, where all your JS will go.
	Copy the array of books from the previous exercise.
	Iterate through the array of books. For each book, create a p element with the book title and author and append it to the page.
	Bonus: Use a ul and li to display the books.
	Bonus: add a property to each book with the URL of the book cover, and add an img element for each book on the page.
	Bonus: Change the style of the book depending on whether you have read it or not. -->