Static Cart added

richardkanai123 · Aug 14, 2021 · f33154c · f33154c
1 parent 2d727c9
commit f33154c
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 33 deletions.
diff --git a/app.js b/app.js
@@ -5,6 +5,30 @@ const MenuBtn = document.querySelector("#MenuBtn")
 const Nav = document.querySelector("nav")
 const CardsHolder = document.querySelector(".CardsHolder")
 const ProductsCategory = document.querySelector("#ProductsCategory")
+const ToggleCartbtn = document.querySelector("#Cartbtn")
+const CartDiv = document.querySelector(".CartDiv")
+
+
+// navigation
+
+// menu btn for small screens
+MenuBtn.addEventListener("click", ()=>{
+    Nav.classList.toggle('Show'); 
+})
+
+// hides nav when one clicks outside it
+window.onclick = function(e){
+    let NavClass = e.target.parentElement.classList
+    if(NavClass == "Show"){
+        Nav.classList.toggle('Show'); 
+    }
+}
+
+
+// Toggle Cart
+ToggleCartbtn.addEventListener("click",()=>{
+    CartDiv.classList.toggle("Show")
+} )
 
 
 // animate IntroText
@@ -17,12 +41,6 @@ ScrollReveal().reveal('.SocialLinks', { delay: 1000});
 ScrollReveal().reveal('.Links', { delay: 700});
 ScrollReveal().reveal('#About', { delay: 900});
 
-
-
-
-
-
-
 // display image changer every 5s
 const Covers = [
     "(./Images/coveroriginal.png) center center /contain no-repeat",
@@ -44,23 +62,7 @@ const ChangeImage = (images, container, step) => {
 ChangeImage(Covers, D_image, 5000)
 
 
-// menu btn for small screens
 
-MenuBtn.addEventListener("click", ()=>{
-    Nav.classList.toggle('Show'); 
-})
-
-window.onclick = function(e){
-    let NavClass = e.target.parentElement.classList
-    if(NavClass == "Show"){
-        Nav.classList.toggle('Show'); 
-}else{
-    console.log(" ");
-}
-}
-// give header background on scrolling
-
-// window.onscroll = document.querySelector("header").classList.add("Scrolled")
 
 
 // json fetching
@@ -94,8 +96,6 @@ function CreateProductCard(Pimage, PName, PCompany, PMake, PCost){
     CardsHolder.append(newCard);
 }
 
-
-
 // Displaying Products depending on the category the user wants
 ProductsCategory.addEventListener('change', ()=>{
     CardsHolder.innerHTML = "";
@@ -107,7 +107,6 @@ ProductsCategory.addEventListener('change', ()=>{
 
 })
 
-
 function SortByCategory(userChoice){
     let source = `./${userChoice}.json`
     console.log(source);
@@ -119,6 +118,4 @@ function SortByCategory(userChoice){
             CreateProductCard(data.image, data.name, data.company, data.make, data.cost)
         })
     })
-
-}
-
+}
diff --git a/index.html b/index.html
@@ -79,14 +79,9 @@ <h3>Ksh. <span id="ProductCost"></span>2300</h3>
                 <button class="btn" id="CartItem">Add to Cart</button>  
             </div> -->
 
-
-
-
         </div>
 
-
         <!-- About  -->
-
         <div class="About" id="About">
             <h2>About RichTonics</h2>
             <p>
@@ -145,6 +140,42 @@ <h2>Visit our Social Media Pages for more</h2>
 
     </div>
 
+    <div class="CartDiv">
+        <div class="CartHeader">
+            <h1>Your Cart</h1>
+        </div>
+
+        <div class="CartItemsHolder">
+
+            <div class="CartItem">
+                <img src="./Images/ComputerA1.png" alt="image">
+                <h3 class="ItemTitle">Gaming Computer</h3>
+                <section>
+                    <i class="bi bi-file-minus-fill btn"></i>
+                    <input type="number" name="Quantity" id="Quantity">
+                    <i class="bi bi-file-plus-fill btn"></i>
+                    <input type="number" name="ItemCost" id="ItemCost" readonly>
+                </section>
+                <button id="RemoveItemBtn" class="btn">Remove</button>
+
+            </div>
+            <div class="CartItem">
+                <img src="./Images/ComputerA2.png" alt="image">
+                <h3 class="ItemTitle">Gaming Computer</h3>
+                <section>
+                    <i class="bi bi-file-minus-fill btn"></i>
+                    <input type="number" name="Quantity" id="Quantity">
+                    <i class="bi bi-file-plus-fill btn"></i>
+                    <input type="number" name="ItemCost" id="ItemCost" readonly>
+                </section>
+                <button id="RemoveItemBtn" class="btn">Remove</button>
+
+            </div>
+
+
+        </div>
+    </div>
+
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js" integrity="sha512-LfB+BcvR3zBt7ebVskhSWiSbEUiG3p5EcCprkieldsKhBeR6wpnLi0VpWC2GNgVGWP2n/skO8Bx2oKNjUhXCkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
     <script src="app.js"></script>
 </body>

diff --git a/style.css b/style.css
@@ -17,6 +17,7 @@
     --btn-padding: 0 0.5rem;
     --btn-font: 1rem 500;
     --card-bg-color:#0a91b3bd;
+    --cart-bg-color:#032961 ;
 }
 
 html{
@@ -388,6 +389,96 @@ ol li{
     margin: 0.25rem;
 }
 
+.CartDiv{
+    position: absolute;
+    width: 10%;
+    height: 90vh;
+    top: 10vh;
+    right: -50%;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    align-self: center;
+    background: var(--cart-bg-color);
+    z-index: -10;
+    padding: 0.5rem;
+    transition: ease;
+    opacity: 0.1;
+    transition: all 3s ease 200ms;
+    transform-style:preserve-3d;
+}
+
+.CartDiv.Show{
+    width: 90%;
+    display: flex;
+    opacity: 1.0;
+    z-index: 10;
+    right: 5%;
+    pointer-events: all;
+
+}
+
+.CartHeader{
+    width: 100%;
+    height: 10%;
+    align-self: center;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    border-bottom: solid;
+}
+
+.CartItem{
+    min-width: 90%;
+    max-width: 100%;
+    display: flex;
+    min-height: 100px;
+    max-height: 150px;
+    align-content: center;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid black 1px;
+    color: var(--light2-color);
+}
+
+
+.CartItem img{
+    width: 100px;
+    height: 100px;
+    margin:0 0.5rem ;
+}
+
+.CartItem h3{
+    margin:0 0.5rem ;
+    color: var(--light2-color);
+}
+
+
+.CartItem section{
+    display: flex;
+    margin: 0 0.25rem;
+    height: 100%;
+}
+
+.CartItem section input{
+    width: 5rem;
+    margin: 0 0.25rem;
+    border-radius:5px;
+    outline: none;
+    border: none;
+    background: var(--mid-color);
+    text-align: center;
+    font-size: 1rem;
+}
+
+.CartItem button{
+    width: 5rem;
+    font: unset;
+}
+
+.CartItem .btn{
+    width: fit-content;
+}
+
 /* ////////////////////////////////////////////////////////// */
 /* media queries */
 /* ///////////////////////////////////////////////////////////////////////////// */
@@ -429,6 +520,11 @@ ol li{
         text-align: center;
     }
 
+    .CartDiv{
+        width: 100%;
+        left: 0;
+        right: 0;
+    }
 
 
 
@@ -615,6 +711,7 @@ ol li{
         flex-direction: column;
         width: 99%;
         align-items:center;
+        margin-top: unset;
     }
 
 
@@ -679,4 +776,35 @@ ol li{
         margin: 0.25rem;
     }
 
+    .CartDiv{
+        min-width: 99%;
+        max-width: 100%;
+        background: chocolate;
+    }
+
+    .CartItem{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        max-height: fit-content;
+        padding:0.25rem 0.75rem;
+        margin: 0.5rem 0;
+        justify-content: space-evenly;
+        /* border:solid; */
+
+    }
+
+    .CartItem section{
+        margin: unset;
+        padding: unset;
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+    }
+
+    .CartItem button:hover, .CartItemn .btn:hover{
+        margin: 0.5rem;
+    }
+
 }