About to Complete Project

Rajgupta7080 · Aug 4, 2022 · b4c93d9 · b4c93d9
1 parent 20507ae
commit b4c93d9
Show file tree

Hide file tree

Showing 31 changed files with 3,364 additions and 220 deletions.
diff --git a/account.html b/account.html
@@ -8,7 +8,7 @@
     <title>Account Page</title>
 </head>
 <body>
-
+    <a href="index.html"><p>Logout</p></a>
 </body>
 </html>
 <script src="account.js"></script>
diff --git a/cart.css b/cart.css
@@ -76,20 +76,20 @@ header{
     /* border:1px solid red; */
     width: 27%;
 }
-#container > :last-child > i,a{
+#container > :last-child > a{
     font-size:15px;
     color:grey;
     margin-top: 15px;
 }
-#container > :last-child > i{
+/* #container > :last-child > i{
     margin-top: 17px;
-}
+} */
 #container > :last-child > p{
     font-size:15px;
     color:grey;
     margin-top: 15px;
     font-family: sans-serif;
-    margin-left: -25px;
+    margin-left: -40px;
 }
 a>i{
     color:grey;
@@ -104,15 +104,15 @@ a>i:hover{
 #container > :last-child > p > a:hover{
     color: black;
 }
-#container > :last-child > button{
+/* #container > :last-child > button{
     border: 1px solid #ccc;
     border-radius:10px;
     height:40px;
     width:80px;
     margin-top:3.5px;
     background-color:#5DC6AD;
     color:white;
-}
+} */
 #container > :last-child > i:hover{
     color:black;
 }
@@ -224,6 +224,30 @@ a>i:hover{
     margin-top:55px;
     margin-left:50px;
 }
+ /* new css  */
+.nameAndQuantityPrice>div:first-child{
+    width:40%;
+}
+.nameAndQuantityPrice>div:nth-child(2){
+    width:20%;
+    display:flex;
+    justify-content: space-around;
+    position: relative;
+}
+.nameAndQuantityPrice>div:nth-child(2)>button{
+    width:25px;
+    height: 35px;
+    margin-top:18px;
+    border: none;
+    border-radius:4px;
+    background-color:#5DC6AD;
+    color: #fff;
+}
+.nameAndQuantityPrice>div:nth-child(2)>p{
+    position: absolute;
+    top: -55px;
+}
+/* End */
 .nameAndQuantityPrice>button{
     width:100px;
     height: 35px;
@@ -235,7 +259,7 @@ a>i:hover{
 }
 #cartValue{
     width:33%;
-    height:450px;
+    height:500px;
     padding: 10px;
     margin-top:20px;
     border-radius: 5px;
@@ -271,6 +295,10 @@ td{
     /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */
     font-family:Verdana, Geneva, Tahoma, sans-serif;
 }
+.item>:first-child>td{
+    font-size:25px;
+    color: black;
+}
 hr{
     width: 95%;
     margin: auto;
@@ -283,6 +311,10 @@ hr{
     font-size:12px;
     font-family:Verdana, Geneva, Tahoma, sans-serif;
 }
+.Pay>tbody>:first-child>td{
+    font-size:14px;
+    color: black;
+}
 #checkout{
     width: 100%;
     margin: auto;

diff --git a/cart.html b/cart.html
@@ -16,7 +16,7 @@
     <header>
         <div id="container">
             <div>
-                <a href="index.html"><img src="https://webasset.fraazo.com/production/b70a67f4e825e3d388ac4466952c20a8.svg" alt="logo"></a>
+                <a href="homepage.html"><img src="https://webasset.fraazo.com/production/b70a67f4e825e3d388ac4466952c20a8.svg" alt="logo"></a>
                 <div>
                     <i class="fa-solid fa-location-dot"></i>
                     <p>Location</p>
@@ -27,10 +27,15 @@
             <div>
                 <a href="cart.html"><i class="fas fa-shopping-cart"></i></a>
                 <p><a href="cart.html">Cart</a></p>
-                <i class="fas fa-wallet"></i>
-                <p><a href="">Credits</a></p>
-                <button>Sign Up</button>
-                <button>Log In</button>
+
+                <a href="account.html"><i class="fas fa-wallet"></i></a>
+                <p><a href="account.html">Credits</a></p>
+
+                <a href="account.html"><i class="fa-solid fa-user"></i></a>
+                <p><a href="account.html" id="user"></a></p>
+
+                <!-- <button>Sign Up</button>
+                <button>Log In</button> -->
             </div>
         </div>
     </header>
@@ -67,7 +72,7 @@
     </div>
     <div class="kart">
         <div id="cart">
-            <h1>ok</h1>
+            <h1></h1>
             <!-- Append Here -->
         </div>
         <div id="cartValue" >
@@ -79,7 +84,12 @@ <h1>ok</h1>
                         <th style="padding:8px">Bill Details</th>
                     </tr>
                 </thead>
-                <tbody>
+                <tbody class="item">
+                    <tr>
+                        <td style="padding:8px">Cart Items</td>
+                        <td></td>
+                        <td id="items"></td>
+                    </tr>
                     <tr>
                         <td style="padding:8px">Total Items Price</td>
                         <td></td>

diff --git a/cart.js b/cart.js
@@ -1,29 +1,44 @@
 var cartProduct = JSON.parse(localStorage.getItem("cart")) || [];
-
+// console.log(cartProduct);
 var cart = document.getElementById('cart');
 if(cartProduct.length == 0){
     displayEmptyProduct();
 }
 else{
-    displayProduct();
+    displayProduct(cartProduct);
     cartValue();
 }
 
-document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length;
+document.getElementById("items").innerText = cartProduct.length;
+// document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length;
 document.getElementById('items').innerText =cartProduct.length+" items";
 document.getElementById('items').style.fontSize="12px";
 
 function cartValue(){
-    var total = cartProduct.reduce(function(accumulator, element) {
-        return accumulator+Number(element.price);
-    },0);
+    var total = 0;
+    if(cartProduct.length!=0){
+        cartProduct.map(function(element){
+            total += element.price*element.piec;
+        });
+    }
+    else{
+        total = cartProduct.reduce(function(accumulator, element) {
+            return accumulator+Number(element.price);
+        },0);
+    }
 
     document.getElementById("total").innerText ="₹ "+total;
     document.getElementById("totals").innerText ="₹ "+total;
     document.getElementById("pay").innerText ="₹ "+total;
     document.getElementById("check").innerText ="₹ "+total;
 }
 
+// Header Section
+var loggedInUser = JSON.parse(localStorage.getItem("userName")) || [];
+// console.log(loggedInUser);
+
+document.getElementById("user").innerText =loggedInUser[0].name;
+
 function displayEmptyProduct(){
     document.getElementById('cart').style.display = 'none';
     document.getElementById('cartValue').style.display = 'none';
@@ -34,7 +49,7 @@ function displayEmptyProduct(){
     // imgDiv.setAttribute("class", "img");
 
     var image = document.createElement('img');
-    image.setAttribute("src","/system-zombies/images/empty.png");
+    image.setAttribute("src","https://webasset.fraazo.com/production/empty_cart.35cdf7d10a7af693e2ea.png");
 
     // imgDiv.append(image);
 
@@ -49,7 +64,7 @@ function displayEmptyProduct(){
     // div.setAttribute("id", "button");
 
     var a = document.createElement('a');
-    a.setAttribute("href", "index.html");
+    a.setAttribute("href", "homepage.html");
 
     var btn = document.createElement('button');
     btn.innerText = "Let's Shop!";
@@ -60,39 +75,68 @@ function displayEmptyProduct(){
     document.getElementById("empty").append(h1,image,h2,p,a);
 
 }
-function displayProduct(){
+function displayProduct(prod){
     document.getElementById("empty").style.display = "none";
-    // document.getElementById("cart").innerText="";
-    cartProduct.map(function(element, index){
-        var div = document.createElement("div");
+    document.getElementById("cart").innerText="";
+    prod.map(function(element, index){
+        // var h1 = document.createElement("h1");
+        // h1.innerText = cartProduct.length;
 
-        var image = document.createElement("img");
-        image.setAttribute("src", element.image_url);
+        var div = document.createElement("div");
+        // div.style.border = "1px solid blue";
+            var image = document.createElement("img");
+            image.setAttribute("src", element.image_url);
 
         var mainDiv = document.createElement("div");
         mainDiv.setAttribute("class","nameAndQuantityPrice");
-
+        // mainDiv.style.border = "1px solid red";
+
         var div1 = document.createElement("div");
+        // div1.style.border = "1px solid red";
+            var p = document.createElement("p");
+            p.innerText = element.name;
 
-        var p = document.createElement("p");
-        p.innerText = element.name;
-
-        var quantity = document.createElement("p");
-        quantity.innerText = element.quantity;
+            var quantity = document.createElement("p");
+            quantity.innerText = element.quantity;
 
-        var price = document.createElement("h4");
-        price.innerText = "₹ "+ element.price;
+            var price = document.createElement("h4");
+            price.innerText = "₹ "+ element.price*element.piec; //jsoidghdhrgdd
 
         div1.append(p,quantity,price);
 
+        var btnDiv = document.createElement("div");
+        btnDiv.width = "100%"
+        // btnDiv.style.border = "1px solid black"
+
+            var minus = document.createElement("button");
+            minus.innerText = "-";
+            minus.addEventListener("click",function(){
+                decrease(index);
+                refreshPage();
+            });
+
+            var pieces = document.createElement("p");
+            pieces.innerText = element.piec;
+            pieces.setAttribute("id", "decVal")
+            pieces.style.marginTop = "80px"
+
+            var plus = document.createElement("button");
+            plus.innerText = "+";
+            plus.addEventListener("click",function(){
+                increase(index);
+                refreshPage();
+            });
+
+        btnDiv.append(minus, pieces, plus,);
+
         var btn = document.createElement("button");
         btn.innerText = "Remove";
         btn.addEventListener("click", function(){
             remove(index);
             refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart.
         });
 
-        mainDiv.append(div1,btn);
+        mainDiv.append(div1, btnDiv, btn);
 
         div.append(image,mainDiv);
         document.getElementById("cart").append(div);
@@ -101,10 +145,27 @@ function displayProduct(){
 
 function remove(index){
     cartProduct.splice(index,1);
-    displayProduct();
     localStorage.setItem("cart",JSON.stringify(cartProduct));
+    displayProduct(cartProduct);
 }
 
 function refreshPage(){
     window.location.reload();
-}
+}
+
+function decrease(index){
+    cartProduct[index].piec = cartProduct[index].piec - 1;
+    if(cartProduct[index].piec == 0){
+        remove(index);
+    }
+    localStorage.setItem("cart",JSON.stringify(cartProduct));
+    displayProduct(cartProduct);
+
+}
+function increase(index){
+    cartProduct[index].piec = cartProduct[index].piec + 1;
+    localStorage.setItem("cart",JSON.stringify(cartProduct));
+    displayProduct(cartProduct);
+}
+
+// console.log(cartProduct);