add lesson 2 solution

learn-co-students · Dec 13, 2022 · ca65387 · ca65387
1 parent 902330a
commit ca65387
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 13 deletions.
diff --git a/02_DOM_Manipulation/index.html b/02_DOM_Manipulation/index.html
@@ -18,22 +18,20 @@
   <body>
     <div class="list" id="header">
       <header>
-        <div>
-          <h1></h1>
-          <h2></h2>
-          <h2></h2>
-        </div>
+        <h1></h1>
+        <h2></h2>
+        <h2></h2>
       </header>
       <main>
         <div class="list">
           <ul id="book-list">
-            <li class="list-li">
+            <!-- <li class="list-li">
               <h3>Eloquent JavaScript : A Modern Introduction to Programming</h3>
               <p>Marjin Haverbeke</p>
               <p>$10.00</p>
               <img src="https://images-na.ssl-images-amazon.com/images/I/51IKycqTPUL._SX218_BO1,204,203,200_QL40_FMwebp_.jpg" alt="Eloquent JavaScript cover"/>
               <button>Delete</button>
-            </li>
+            </li> -->
           </ul>
         </div>
       </main>

diff --git a/02_DOM_Manipulation/src/index.js b/02_DOM_Manipulation/src/index.js
@@ -5,19 +5,69 @@ function formatPrice(price) {
   return '$' + Number.parseFloat(price).toFixed(2);
 }
 
+function renderHeader(bookStore) {
+  document.querySelector('header h1').textContent = bookStore.name;
+}
+
+function renderFooter(bookStore) {
+  // <footer>
+  //   <div id="store"></div>
+  //   <div id="number"></div>
+  //   <div id="address"></div>
+  // </footer>
+  document.querySelector('#store').textContent = bookStore.location;
+  document.querySelector('#number').textContent = bookStore.number;
+  document.querySelector('#address').textContent = bookStore.address;
+}
+
 // create a function called renderBook(book)
 // it will take a book object as an argument
 // and create the html struture for rendering 
 // that book and insert it into our webpage!
 
-// function renderBook(book) {
-// should create an li element that looks something like this:
+function renderBook(book) {
+  // should create an li element that looks something like this:
   // <li class="list-li">
   //   <h3>Eloquent JavaScript : A Modern Introduction to Programming</h3>
   //   <p>Marjin Haverbeke</p>
   //   <p>$10.00</p>
   //   <img src="https://images-na.ssl-images-amazon.com/images/I/51IKycqTPUL._SX218_BO1,204,203,200_QL40_FMwebp_.jpg" alt="Eloquent JavaScript cover"/>
   //   <button>Delete</button>
   // </li>
+  // console.log(book);
+  const li = document.createElement('li');
+  li.className = 'list-li'
+
+  const h3 = document.createElement('h3');
+  h3.textContent = book.title;
+
+  const pAuthor = document.createElement('p');
+  pAuthor.textContent = book.author;
+
+  const pPrice = document.createElement('p');
+  pPrice.textContent = formatPrice(book.price);
+
+  const img = document.createElement('img');
+  img.src = book.imageUrl;
+  img.alt = `${book.title} cover`
+  img.title = book.title;
+
+  const deleteBtn = document.createElement('button');
+  deleteBtn.textContent = "Delete"
+
+  // debugger
+  li.append(h3, pAuthor, pPrice, img, deleteBtn);
+
+  document.querySelector('#book-list').append(li)
+}
+
+function removeBook(index) {
+  document.querySelectorAll('#book-list .list-li')[index].remove()
+}
+
+
+
+renderHeader(bookStore);
+renderFooter(bookStore);
+bookStore.inventory.forEach(renderBook)
 
-
diff --git a/02_DOM_Manipulation/style.css b/02_DOM_Manipulation/style.css
@@ -4,18 +4,18 @@ header {
   opacity: 0.8;
 }
 
-header div h1, header div h2 {
+header h1, header h2 {
   text-align: center;
   color: aliceblue;
   text-shadow: 2px 4px #252525;
   font-family: Verdana;
 }
 
-header div h1 {
+header h1 {
   padding: 200px 0 0 0;
 }
 
-header div h2 {
+header h2 {
   color: aliceblue;
   font-style: italic;
 }
@@ -64,6 +64,7 @@ button, [type="submit"] {
 footer {
   display: flex;
   flex-direction: column;
+  text-align: center;
 }
 
 footer div p {