V2.3 week2

Completed the 3rd exercise in mandatory folder.

Author: davappler

Week-2/Homework/mandatory/2-exercises/exercises.js

@@ -84,6 +84,43 @@ function exerciseTwo(shopping) {
     The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
 **/
 function exerciseThree(books) {
+
+  let content = document.querySelector("#content");
+  let ul=document.createElement("ul");
+  ul.className="ulList";
+  content.appendChild(ul);
+  // created an array of links for images source.
+  var imageSource=["https://m.media-amazon.com/images/I/416Hql52NCL.jpg",
+  "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1295465264l/8884400.jpg",
+  "https://images-na.ssl-images-amazon.com/images/I/51cUVaBWZzL.jpg" ]
+
+  
+  for(let i=0;i<books.length;i++)
+  {
+    var p=document.createElement("p");
+    var li=document.createElement("li");
+    li.className="liItem";
+
+    p.textContent+=books[i].title +"-" + books[i].author;
+    li.appendChild(p);
+    
+
+    let img=document.createElement("img");
+    img.className="imgDimension";
+
+    img.src=imageSource[i];
+    img.alt= books[i].title +"-" + books[i].author;
+
+    li.appendChild(img);
+
+    if(books[i].alreadyRead)
+    li.style.backgroundColor="green";
+    else 
+    li.style.backgroundColor="red";
+    
+    ul.appendChild(li);
+
+  }
 }
 
 //

Week-2/Homework/mandatory/2-exercises/style.css

@@ -151,6 +151,38 @@ body {
 	background: #87ca8a
 }
 
+
+
+
+/* ----------------------------- */
+/* Adding some classes to make javascript neat  */
+
+.ulList
+{
+	display: flex;
+	justify-content: space-around;
+	list-style-type:none ;
+}
+
+.liItem
+{
+	padding:1rem;
+	width:27vw;
+}
+
+.imgDimension
+{
+	width:200px;
+	height:300px;
+}
+
+
+
+
+
+
+
+
 @media screen and (min-width: 992px) {
 
 	.navbar-brand > img {