cart update

0MeMo07 · Feb 19, 2024 · db19ecf · db19ecf
1 parent c812dc9
commit db19ecf
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 229 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-proje",
-  "homepage": "https://0memo07.github.io/React-Market-Application",
+  "homepage": "https://0memo07.github.io/React-Shopping-Web-Application/",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/src/app/Cart.jsx b/src/app/Cart.jsx
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import CartProductNotFound from '../components/CartProductNotFound';
 import { Link } from 'react-router-dom';
 import { BsChevronCompactRight,  BsChevronCompactLeft } from "react-icons/bs";
-import '../css/Cart.css'
+import classNames from 'classnames';
+import '../css/Cart.css';
 
 export default function Cart() {
   // const[total, SetTotal] = useState('')
@@ -31,6 +32,9 @@ export default function Cart() {
         if (result && Array.isArray(result.products)) {
           setProducts(result.products);
         }
+        else{
+          console.log("Your Cart list is empty.")
+        }
       } catch (error) {
         console.error('Error fetching data:', error);
       }
@@ -135,7 +139,12 @@ export default function Cart() {
   });
 
 
-
+  const cartClass = classNames(
+    {
+      "d-flex": ProductCount > 0,
+    },
+    "justify-content-between",
+  );
 
   return (
     <>
@@ -155,27 +164,27 @@ export default function Cart() {
                 </Link>
               </div>
               <hr />
-              <h6 className="mb-0">Shopping Favorites</h6>
-              <div className="d-flex justify-content-between">
-                <span>You have {ProductCount} items in your Favorites</span>
+              <h6 className="mb-0">Shopping Cart</h6>
+              <div className={cartClass}>
+                <span>You have {ProductCount} items in your Carts</span>
                 {ProductCount === 0 && <CartProductNotFound />}
               </div>
-
+              
               {productDetails.map((product, index) => (
-              <div key={index}>
+              <div key={index} className='Product'>
                 <div className="d-flex justify-content-between align-items-center mt-3 p-2 items rounded">
                   <div className="d-flex flex-row">
                     <img className="rounded" src={product.thumbnail} width="40" alt={`${index}`} />
                     <div className="ml-2">
-                      <span className="font-weight-bold d-block">{product.title}</span>
+                      <span className="Title font-weight-bold d-block">{product.title}</span>
                       <span className="spec">{product.description}</span>
                     </div>
                   </div>
-                  <div className="d-flex flex-row align-items-center">
-                    <span className="d-block ml-5 font-weight-bold">${product.price * product.quantity}</span>
-                    <span className="d-block ml-5 font-weight-bold" id= "AddQuantity-RemoveQuantity">
+                  <div className="quantity-controller d-flex flex-row align-items-center">
+                    <span className="price d-block ml-3 font-weight-bold">${product.price * product.quantity}</span>
+                    <span className="d-block ml-3 font-weight-bold" id="AddQuantity-RemoveQuantity">
                     <BsChevronCompactLeft onClick={() => RemoveQuantity(product.id)} id="Leftİcon"/>
-                    {product.quantity}
+                    <span className="quantity-value">{product.quantity}</span>
                     <BsChevronCompactRight onClick={() => AddQuantity(product.id)} id="Rightİcon"/>
                     </span>
                     <i className="fa fa-trash-o ml-3 text-black-50" id="Trash" onClick={() => DeleteProduct(product.id)}></i>
@@ -192,12 +201,10 @@ export default function Cart() {
                 <img className="rounded" src="https://i.imgur.com/WU501C8.jpg" width="30" alt="Card Type" />
               </div>
 
-              {/* Repeat this block for each card type */}
               <label className="radio">
                 <input type="radio" name="card" value="payment" checked />
                 <span><img width="30" src="https://img.icons8.com/color/48/000000/mastercard.png" alt="Mastercard" /></span>
               </label>
-              {/* Repeat block end */}
 
               <div>
                 <label className="credit-card-label">Name on card</label>

diff --git a/src/css/Cart.css b/src/css/Cart.css
@@ -4,115 +4,156 @@
     border-radius: 6px;
     color: #fff;
     font-weight: bold;
-  }
-
-  .product-details {
-    padding: 10px;
-  }
-
-  body {
-    background: #eee;
-  }
-
-  .cart {
-    background: #fff;
-  }
-
-  .p-about {
-    font-size: 12px;
-  }
-
-  .table-shadow {
-    -webkit-box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
-    box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
-  }
-
-  .type {
-    font-weight: 400;
-    font-size: 10px;
-  }
-
-  label.radio {
-    cursor: pointer;
-  }
-
-  label.radio input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  label.radio span {
-    padding: 1px 12px;
-    border: 2px solid #ada9a9;
-    display: inline-block;
-    color: #8f37aa;
-    border-radius: 3px;
-    text-transform: uppercase;
-    font-size: 11px;
-    font-weight: 300;
-  }
-
-  label.radio input:checked + span {
-    border-color: #fff;
-    background-color: blue;
-    color: #fff;
-  }
-
-  .credit-inputs {
-    background: rgb(102,102,221);
-    color: #fff !important;
-    border-color: rgb(102,102,221);
-  }
-
-  .credit-inputs::placeholder {
-    color: #fff;
-    font-size: 13px;
-  }
-
-  .credit-card-label {
-    font-size: 9px;
-    font-weight: 300;
-  }
-
-  .form-control.credit-inputs:focus {
-    background: rgb(102,102,221);
-    border: rgb(102,102,221);
-  }
-
-  .line {
-    border-bottom: 1px solid rgb(102,102,221);
-  }
-
-  .information span {
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  .information {
-    margin-bottom: 5px;
-  }
-
-  .items {
-    -webkit-box-shadow: 5px 5px 4px -1px rgba(0,0,0,0.25);
-    box-shadow: 5px 5px 4px -1px rgba(0, 0, 0, 0.08);
-  }
-
+}
+
+.product-details {
+  padding: 10px;
+}
+
+body {
+  background: #eee;
+}
+
+.cart {
+  background: #fff;
+}
+
+.p-about {
+  font-size: 12px;
+}
+
+.table-shadow {
+  -webkit-box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
+  box-shadow: 5px 5px 15px -2px rgba(0,0,0,0.42);
+}
+
+.type {
+  font-weight: 400;
+  font-size: 10px;
+}
+
+label.radio {
+  cursor: pointer;
+}
+
+label.radio input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+label.radio span {
+  padding: 1px 12px;
+  border: 2px solid #ada9a9;
+  display: inline-block;
+  color: #8f37aa;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 300;
+}
+
+label.radio input:checked + span {
+  border-color: #fff;
+  background-color: blue;
+  color: #fff;
+}
+
+.credit-inputs {
+  background: rgb(102,102,221);
+  color: #fff !important;
+  border-color: rgb(102,102,221);
+}
+
+.credit-inputs::placeholder {
+  color: #fff;
+  font-size: 13px;
+}
+
+.credit-card-label {
+  font-size: 9px;
+  font-weight: 300;
+}
+
+.form-control.credit-inputs:focus {
+  background: rgb(102,102,221);
+  border: rgb(102,102,221);
+}
+
+.line {
+  border-bottom: 1px solid rgb(102,102,221);
+}
+
+.information span {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.information {
+  margin-bottom: 5px;
+}
+
+.items {
+  -webkit-box-shadow: 5px 5px 4px -1px rgba(0,0,0,0.25);
+  box-shadow: 5px 5px 4px -1px rgba(0, 0, 0, 0.08);
+}
+
+.spec {
+  font-size: 11px;
+}
+#AddQuantity-RemoveQuantity{
+  margin-right: 20px;
+}
+#AddQuantity-RemoveQuantity:hover{
+  cursor: pointer;
+}
+#Leftİcon{
+  left: 0;
+}
+#Rightİcon{
+  right: 0;
+}
+
+
+.quantity-controller {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}
+
+#Trash {
+  margin-top: auto;
+  margin-bottom: 3px;
+}
+/* Removes product description */
+.spec {
+  display: none;
+}
+@media (max-width: 850px) {
+
+  .items img {
+      width: 50px;
+      height: 50px;
+      border-radius: 5px;
+      margin-right: 10px;
+  }
+
+  /* Removes product description */
   .spec {
-    font-size: 11px;
-  }
-  #AddQuantity-RemoveQuantity{
-    margin-right: 20px;
-  }
-  #AddQuantity-RemoveQuantity:hover{
-    cursor: pointer;
-  }
-  #Leftİcon{
-    left: 0;
-  }
-  #Rightİcon{
-    right: 0;
-  }
-
+      display: none;
+  }
+
+}
+
+@media (max-width: 500px) {
+  #Trash {
+    margin-top: auto;
+    margin-bottom: 0px;
+    position: fixed;
+    right: 43px;
+  }
+}