Created function to display the cart list items in the cart section

DiksonIvySon · Oct 18, 2023 · 80be30e · 80be30e
1 parent a16cf64
commit 80be30e
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 9 deletions.
diff --git a/landingPage/IMAGES/colorsax image.jpg → landingPage/IMAGES/colorsax-image.jpg b/landingPage/IMAGES/colorsax image.jpg → landingPage/IMAGES/colorsax-image.jpg
diff --git a/landingPage/IMAGES/darksax1 images.jpg → landingPage/IMAGES/darksax1-images.jpg b/landingPage/IMAGES/darksax1 images.jpg → landingPage/IMAGES/darksax1-images.jpg
diff --git a/landingPage/IMAGES/darksax2 images.jpg → landingPage/IMAGES/darksax2-images.jpg b/landingPage/IMAGES/darksax2 images.jpg → landingPage/IMAGES/darksax2-images.jpg
diff --git a/landingPage/IMAGES/darksax3 images.jpg → landingPage/IMAGES/darksax3-images.jpg b/landingPage/IMAGES/darksax3 images.jpg → landingPage/IMAGES/darksax3-images.jpg
diff --git a/landingPage/IMAGES/darksax4 images.jpg → landingPage/IMAGES/darksax4-images.jpg b/landingPage/IMAGES/darksax4 images.jpg → landingPage/IMAGES/darksax4-images.jpg
diff --git a/landingPage/IMAGES/darksax5 images.jpg → landingPage/IMAGES/darksax5-images.jpg b/landingPage/IMAGES/darksax5 images.jpg → landingPage/IMAGES/darksax5-images.jpg
diff --git a/landingPage/IMAGES/darksax6 images.jpg → landingPage/IMAGES/darksax6-images.jpg b/landingPage/IMAGES/darksax6 images.jpg → landingPage/IMAGES/darksax6-images.jpg
diff --git a/landingPage/script.js b/landingPage/script.js
@@ -26,5 +26,37 @@ function addToCartList(name, price, imageURL) {
     let new_cartItem = new cartItem(name, price, imageURL);
     cartList.push(new_cartItem);
     console.log(cartList)
+    display_cartList();
+}
+
+//function to display the cart list items in the cart section
+function display_cartList() {
+    let cartItem_container = document.querySelector('.cart-items-container');
+    cartItem_container.textContent = "";
+
+    for (let i = 0; i<cartList.length; i++) {
+        let cart_Item = document.createElement('div');
+        cart_Item.setAttribute('class', 'cart-item');
+        cart_Item.innerHTML= `
+                                <div class="cart-item-img">
+                                    <img src=${cartList[i].imageURL} >
+                                </div>
+                                <div class="cart-item-info">
+                                    <div>
+                                        <span><strong>ITEM: </strong>${cartList[i].name}</span>
+                                    </div>
+                                    <div>
+                                        <label for="qualities"><strong>Quality: </strong></label>
+                                        <input type="number" value="1">
+                                    </div>
+                                    <div>
+                                        <span><strong>PRICE: </strong>R${cartList[i].price}</span>
+                                    </div>
+                                    <button role="button" class="remove-btn">REMOVE</button>
+                                </div>
+                             `
+
+        cartItem_container.appendChild(cart_Item);
+    }    
 }
 
diff --git a/landingPage/store.html b/landingPage/store.html
@@ -28,7 +28,7 @@ <h2>MUSIC</h2>
                         <strong class="name1">Album 4</strong>
                     </div>
                     <div>
-                        <img class="image1" src="IMAGES/darksax3 images.jpg"    >
+                        <img class="image1" src="IMAGES/darksax3-images.jpg"    >
                     </div>
                     <div>
                          <span>R <span class="price1">100</span></span>
@@ -40,7 +40,7 @@ <h2>MUSIC</h2>
                         <strong class="name2">Album 4</strong>
                     </div>
                     <div>
-                        <img class="image2" src="IMAGES/darksax4 images.jpg"    >
+                        <img class="image2" src="IMAGES/darksax4-images.jpg"    >
                     </div>
                     <div>
                          <span>R <span class="price2">100</span></span>
@@ -52,7 +52,7 @@ <h2>MUSIC</h2>
                         <strong class="name3">Album 3</strong>
                     </div>
                     <div>
-                        <img class="image3" src="IMAGES/darksax5 images.jpg"    >
+                        <img class="image3" src="IMAGES/darksax5-images.jpg"    >
                     </div>
                     <div>
                          <span>R <span class="price3">100</span></span>
@@ -64,7 +64,7 @@ <h2>MUSIC</h2>
                         <strong class="name4">Album 4</strong>
                     </div>
                     <div>
-                        <img class="image4" src="IMAGES/darksax6 images.jpg"    >
+                        <img class="image4" src="IMAGES/darksax6-images.jpg"    >
                     </div>
                     <div>
                          <span>R <span class="price4">100</span></span>
@@ -81,7 +81,7 @@ <h2>MERCH</h2>
                         <strong class="name5">Dark Saxophone 1</strong>
                     </div>
                     <div>
-                        <img class="image5" src="IMAGES/darksax1 images.jpg"  >
+                        <img class="image5" src="IMAGES/darksax1-images.jpg"  >
                     </div>
                     <div>
                          <span>R <span class="price5">100</span></span>
@@ -93,7 +93,7 @@ <h2>MERCH</h2>
                         <strong class="name6">Dark Saxophone 2</strong>
                     </div>
                     <div>
-                        <img class="image6" src="IMAGES/darksax2 images.jpg"  >
+                        <img class="image6" src="IMAGES/darksax2-images.jpg"  >
                     </div>
                     <div>
                          <span>R <span class="price6">200</span></span>
@@ -105,7 +105,7 @@ <h2>MERCH</h2>
                         <strong class="name7">Dark Saxophone 1</strong>
                     </div>
                     <div>
-                        <img class="image7" src="IMAGES/darksax1 images.jpg"  >
+                        <img class="image7" src="IMAGES/darksax1-images.jpg"  >
                     </div>
                     <div>
                          <span>R <span class="price7">500</span></span>
@@ -117,7 +117,7 @@ <h2>MERCH</h2>
                         <strong class="name8">Dark Saxophone 2</strong>
                     </div>
                     <div>
-                        <img class="image8" src="IMAGES/darksax2 images.jpg"  >
+                        <img class="image8" src="IMAGES/darksax2-images.jpg"  >
                     </div>
                     <div>
                          <span>R <span class="price8">700</span></span>
@@ -132,7 +132,7 @@ <h2>CART</h2>
                 <div class="cart-items-container">
                     <div class="cart-item">
                         <div class="cart-item-img">
-                            <img src="IMAGES/darksax1 images.jpg" >
+                            <img src="IMAGES/darksax1-images.jpg" >
                         </div>
                         <div class="cart-item-info">
                             <div>