Go For Live Demo For Shopping Cart Web App
Go For Live Demo For Dynamic Global Popup Box
And also cover How to make Dynamic Global Popup Box (Success,Warn,Error) and mange it with Context hook for Web App?
React Hooks Which played a big role for developing React Application are useState(),useEffect(),useRef(),useContext() and More.
In This post i shall work on useContext() Hook to Manage Global State.Basically We Create A Shopping Cart Web App Who manage All Carting Facility, like add Item in Cart,remove Item From Cart,Calculate Cart Value and so on.
Now we Come on Our Topic.
1) First we Create a Folder With Store Context file name like **"GlobalContext" and Add new js file "GlobalContext.js".**
import React, { createContext } from 'react';
const GlobelContext = createContext("");
export default GlobelContext;
*2)Now We Create a JavaScript List who store out Item Details.
for this we also create a separate Folder and File on your desire.
I have "DbFile " Folder and "BookList.js" file.
*
/*This image use for showing item*/
import Grewal from "./Image/Book1.jpg";
import RVK from "./Image/Book2.jpg";
import Radha from "./Image/Book3.jpg";
import Aggarwal from "./Image/Book4.jpg";
export const BookList = [
{
BookId:1,
BookImgSrc: Grewal,
BookName: "T.S.Grewal's Double Entry Book Keeping…",
BookPrice:765.00,
BookPriceDisCount:800.00,
BookPublisher:"T.S.Grewal's",
ItemQnt:1,
},
{
BookId: 2,
BookImgSrc: RVK,
BookName:"Introductory Macroeconomics And Indian Economic Development",
BookPrice:944.00,
BookPriceDisCount:954.00,
BookPublisher: "RVK Global Publications Pvt, LtdVK Global Publications Pvt Ltd",
ItemQnt: 1,
},
{
BookId: 3,
BookImgSrc: Radha,
BookName:"Indian Economic Development & Introductory Macroeconomic",
BookPrice:688.00,
BookPriceDisCount:750.00,
BookPublisher: "Radha Bahuguna",
ItemQnt: 1,
},
{
BookId: 4,
BookImgSrc: Aggarwal,
BookName:"Secondary School Mathematics for Cl…",
BookPrice:729.00,
BookPriceDisCount:835,
BookPublisher: "R.S. Aggarwal",
ItemQnt: 1,
},
];
3)Now time to Create a Folder like **component which hold our all component like** BookCard.jsx ,CartCard.jsx,NavBar.jsx ,PopupBox.jsx and PopupBox.css** file **
a)BookCard.jsx which show our Individual Item Details.
import { useContext } from "react";
import { BookList } from "../DbFile/BookList";
import GlobelContext from "../GlobalContext/GlobalContext";
import PopupBox from "./PopupBox";
const BookCard = (props) =>
{
const { cartValue, setCartValue, setShowPopupBox } = useContext(GlobelContext);
const { BookImgSrc, BookName, BookPrice, BookPriceDisCount, BookPublisher, BookId } = props;
const AddProductInCard = (Item) => {
const isAvailabe = cartValue.some(obj => obj.BookId === Item);
if (!isAvailabe) {
const CartItem = BookList.find((bookItem) => { return bookItem.BookId === Item });
setCartValue((pre) => ([...pre, CartItem]));
setShowPopupBox(<PopupBox Message="Item Successfully Added In Your Cart,Go Cart to Buy" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} />);
}
else
{
setShowPopupBox(<PopupBox Message="Allready In Cart,Go To Cart to See" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} />);
}
}
return (
<>
<div className="BookCard">
<img className="BookCardImg" src={BookImgSrc} alt={BookPublisher} />
<div>
<span className="BookTitle">{BookName}</span><br/>
<span className="BookPubisher">{BookPublisher}</span><br/>
</div>
<div className="BookPriceText">
<span>₹ {BookPrice} </span>
<span className="BookPrice">₹ {BookPriceDisCount} </span>
<button className="CartBtn" onClick={() => { AddProductInCard(BookId)} }>Add Cart</button>
<br />
</div>
</div>
</>
);
}
export default BookCard;
b)CartCard.jsx which show our Individual Item Details In Cart page.
import { useContext } from "react";
import { BookList } from "../DbFile/BookList";
import GlobelContext from "../GlobalContext/GlobalContext";
import PopupBox from "./PopupBox";
const CartCard = (props) => {
const { cartValue, setCartValue, setShowPopupBox } = useContext(GlobelContext);
const { BookImgSrc, BookName, BookPrice, BookPriceDisCount, BookPublisher, BookId, ItemQnt } = props;
const DeleteProductFromCard = (Item) => {
const CartItem = cartValue.filter((bookItem) => { return bookItem.BookId !== Item });
setCartValue((pre) => (CartItem));
setShowPopupBox(<PopupBox Message="Item Deleted" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} />);
}
const AddNewItemInCard = (event, Item) => {
const { value } = event.target;
const CartItem = cartValue.filter((bookItem) => {
if (bookItem.BookId === Item) {
return bookItem.ItemQnt = parseInt(value);
}
else {
return bookItem;
}
});
setCartValue((pre) => (CartItem));
}
return (
<>
<div className="CartCard">
<div className="CartCardLeft">
<img className="CartCardImg" src={BookImgSrc} alt={BookPublisher} />
</div>
<div className="CartCardRight">
<span className="CartTitle">{BookName}</span><br />
<span className="BookPubisher">By {BookPublisher}</span><br />
<span>₹ {BookPrice} </span>
<br />
<br />
<br />
<br />
<select className="CartValue" value={ItemQnt} onChange={(event) => { AddNewItemInCard(event, BookId) }} >
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</select>
<button className="DeleteBtn" onClick={() => { DeleteProductFromCard(BookId) }}>Delete</button>
<br />
</div>
</div>
</>
);
}
export default CartCard;
c)NavBar.jsx which show our NavBar and Added Item Count.
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import GlobelContext from '../GlobalContext/GlobalContext';
import { ShoppingCart } from '../Icons/Icons';
const NavBar = () => {
const { cartValue } = useContext(GlobelContext);
let cartVal = cartValue.length;
return (<>
<div className="Navbar">
<div className="NavbarLogo">
<Link to="/">
<h3>BihariSoft ,The Online Edu Shop</h3>
</Link>
</div>
<div className="NavbarLogo">
<Link to="/ShowPopup">
<h3>ShowPopup page</h3>
</Link>
</div>
<div className="Cart">
<Link to="/Cart" >
<ShoppingCart ClassNm="IconCart" IconColor="blue" IconSize={2} />
<span className="IconCartVal">{cartVal}</span>
</Link>
<h6>Cart</h6>
</div>
</div>
</>)
}
export default NavBar;
d)PopupBox.jsx which show our Popup Box .
import React, { useContext } from 'react';
import GlobelContext from '../GlobalContext/GlobalContext';
import { CheckCircle, Error, Warning } from '../Icons/Icons';
import './PopupBox.css';
const PopupBox = (props) => {
console.log(props)
const { ClosePopup } = useContext(GlobelContext);
console.log(ClosePopup)
const { Message, RedirectUrl, IsSuccess, IsWarning, IsError } = props;
const MessageList = Message.split(",");
const PopupHeader = IsSuccess ? "PopupSucces" : IsWarning ? "PopupWarn" : IsError ? "PopupError" : "PopupWarn";
const PopupHeaderMsg = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "Warning";
const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
: IsWarning ? <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />
: IsError ? <Error ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
: <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />;
const CloseMe = () => {
ClosePopup(RedirectUrl);
}
return (
<>
<div className="PopupBoxmodal">
<div className="PopupBoxModalContent">
<div className={"PopupHeader " + PopupHeader}>
<div className="PopupHeaderTitle"><b>{PopupHeaderMsg}</b>{PopupHeaderIcon}</div>
<div className="PopupBoxClose">
<span onClick={() => { CloseMe() }}>×</span>
</div>
</div>
<div className="PopupMessageBody" >
<ul>
{
MessageList.map((msg,index)=>(
<li key={"PopupMSg " + index}>{msg}</li>
))
}
</ul>
</div>
<div className="PopupFooter">
<button className={"Popupbtn " + PopupHeader} onClick={() => { CloseMe() }}> Ok</button>
</div>
</div>
</div>
</>
);
}
export default PopupBox;
e)PopupBox.css for Popup Box .
.PopupBoxmodal {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.PopupBoxModalContent {
background-color: #fefefe;
margin: auto;
padding: 0px;
border: 1px solid #888;
width: 42%;
border-radius: 9px;
position: relative;
height: 272px;
}
.PopupHeader {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
border-bottom: 1px solid #e6eaec;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
/* The Close Button */
.PopupBoxClose {
position: absolute;
top: 5px;
right: 7px;
color: #fff;
text-shadow: none;
/* opacity: 0.5;*/
width: 30px;
height: 30px;
padding: 0;
border-radius: 20px;
font-size: 28px;
}
.PopupBoxClose span {
margin-top: 0px;
margin-left: 8px;
display: block;
}
.PopupBoxClose:hover, .PopupBoxClose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.PopupSucces
{
background: #82ce34;
}
.PopupError
{
background: #ee3535;
}
.PopupWarn
{
background: #eda645;
}
.IconPopup {
cursor: pointer;
margin-left: 21px;
margin-top: -4px;
position: absolute;
}
.PopupHeaderTitle {
padding: 14px;
color: aliceblue;
}
.PopupSucces:hover, .PopupSucces:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.PopupMessageBody {
padding: 14px;
height: 54%;
overflow-y: auto;
}
.PopupMessageBody ul li{
padding: 4px;
font-size: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.PopupFooter {
padding: 14px;
height: 7%;
border-top: 1px solid;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
background: #ecf0f1;
border-color: #e6eaec;
}
.Popupbtn {
color: #fff;
text-decoration: none;
transition: all 0.4s;
line-height: normal;
border-radius: 3px;
padding: 6px 20px;
min-width: 75px;
border: none;
margin-left: 69%;
}
.Popupbtn:hover {
cursor: pointer;
}
4) Create another Folder name like **Icons **which hold our Popup Icons File Icons.js .
import React from 'react';
export const ShoppingCart = (props) => {
const {ClassNm,IconColor,IconSize} = props;
return (
<svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" >
<path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" />
</svg >
);
};
export const CheckCircle = (props) => {
const {ClassNm,IconColor,IconSize} = props;
return (
<svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
);
};
export const Warning = (props) => {
const {ClassNm,IconColor,IconSize} = props;
return (
<svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
</svg>
);
};
export const Error = (props) => {
const {ClassNm,IconColor,IconSize} = props;
return (
<svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
);
};
5)And Now Create a Folder **CommonService which hold CommonService.js file .In this file we create a function calculateSum() which manipulate Cart Item Count**
export const calculateSum = (array, property, property2,reqTye) => {
const total = array.reduce((preSum, obj) => {
return reqTye === "proOne" ?
(preSum + obj[property]) :
((preSum + obj[property]) * obj[property2]);
}, 0);
return total;
}
6)Now time to Create a Folder **pages which hold Three pages file name like HomePage.jsx ,MyCart.jsx and ShowPopup.jsx.**
a)HomePage.jsx which show our Product List.
import React from 'react';
import BookCard from '../component/BookCard';
import NavBar from '../component/NavBar';
import { BookList } from '../DbFile/BookList';
const HomePage = () => {
return (<>
<NavBar />
<div className="BookCardBody">
{
BookList.map((item,index) => (
<BookCard key={index + "book"} BookId={item.BookId} BookImgSrc={item.BookImgSrc} BookName={item.BookName} BookPrice={item.BookPrice} BookPriceDisCount={item.BookPriceDisCount} BookPublisher={item.BookPublisher} />
))
}
</div>
</>)
}
export default HomePage;
*b)MyCart.jsx which show our Cart Details. *
import React, { useContext } from 'react';
import { calculateSum } from '../CommonService/CommonService';
import CartCard from '../component/CartCard';
import NavBar from '../component/NavBar';
import GlobelContext from '../GlobalContext/GlobalContext';
const MyCart = () => {
const { cartValue, setCartValue } = useContext(GlobelContext);
const TotalCartValue = calculateSum(cartValue, "BookPrice", "ItemQnt", "proTwo");
const TotalCartCount = calculateSum(cartValue, "ItemQnt", "", "proOne");
return (
<>
<NavBar/>
<h1>Shopping Cart</h1>
<div className="CartBody">
<div className="CartBodyLeft" >
{
cartValue.map((item, index) => (
<CartCard key={index + "book"} BookId={item.BookId} BookImgSrc={item.BookImgSrc} BookName={item.BookName} BookPrice={item.BookPrice} BookPriceDisCount={item.BookPriceDisCount} BookPublisher={item.BookPublisher} ItemQnt={item.ItemQnt } />
))
}
</div>
<div className="CartBodyRight">
<table className="CartTable">
<thead>
<tr>
<th>Product</th>
<th>Mrp</th>
<th colSpan="2">Quantity</th>
</tr>
</thead>
<tbody>
{
cartValue.map((item, index) => (
<tr className="TotalCartTxt" key={item.BookName + index}>
<td className="BookPubisher">{item.BookName}</td>
<td>₹ {item.BookPrice}</td>
<td>{item.ItemQnt}</td>
<td>{item.BookPrice * item.ItemQnt}</td>
</tr>
))
}
</tbody>
<tfoot>
<tr>
<td><h5>Total Item {TotalCartCount} </h5></td>
<td colSpan="3" style={{ textAlign: 'right' }}><strong> ₹ {TotalCartValue} </strong></td>
</tr>
</tfoot>
</table>
<button className="proceedBtn">Proceed to Buy</button>
</div>
</div>
</>)
}
export default MyCart;
*C)ShowPopup.jsx which show our Dynamic PopupBox . *
import { useContext } from "react";
import NavBar from "../component/NavBar";
import PopupBox from "../component/PopupBox";
import GlobelContext from "../GlobalContext/GlobalContext";
import './../component/PopupBox.css';
const ShowPopup = () => {
const { setShowPopupBox } = useContext(GlobelContext);/* call useContext */
const ShowMe = (reqType) => {
if (reqType === "success") {
setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Succes Message" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} />);
}else if (reqType === "error") {
setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Error Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} />);
}else if (reqType === "warn") {
setShowPopupBox(<PopupBox Message="WelCome Biharisoft,Warnning Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} />);
}
}
return (
<><NavBar/>
<button className="PopupSucces" onClick={() => { ShowMe("success") }}>Success Popup </button>
<button className="PopupWarn" onClick={() => { ShowMe("warn") }} >Warnig Popup</button>
<button className="PopupError" onClick={() => { ShowMe("error") }}>Error Popup</button>
</>
);
}
export default ShowPopup;
Now Time to wrap All Our Pages with Context Provider in App.js File.
import './App.css';
import React, { useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import GlobelContext from './GlobalContext/GlobalContext';
import MyCart from './pages/MyCart';
import ShowPopup from './pages/ShowPopup';
function App()
{
const [cartValue, setCartValue] = useState([]);
const [showPopupBox, setShowPopupBox] = useState("");
const ClosePopupBox = (props) => {
setShowPopupBox("");
}
/* Create Global Store Who Manage Our Global State*/
const StoreDbContext = {
cartValue: cartValue,
setCartValue: setCartValue,
setShowPopupBox: setShowPopupBox,
ClosePopup: ClosePopupBox,
}
return (
<>
<GlobelContext.Provider value={StoreDbContext}>
{showPopupBox}
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route index element={<HomePage />} />
<Route path="/Cart" element={<MyCart />} />
<Route path="/ShowPopup" element={<ShowPopup />} />
</Routes>
</BrowserRouter>
</GlobelContext.Provider>
</>
);
}
export default App;
Update Your index.css File With below css File
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0;
background-color: #F3F3F4;
font-family: Arial, Helvetica, sans-serif;
overflow-y: scroll;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.Navbar {
display: flex;
background-color: #a30d3b;
border: 1px solid black;
height: 56px;
}
.NavbarLogo {
display: flex;
width: 80%;
}
.Cart {
display: flex;
width: 20%;
}
.Cart a {
text-decoration: none;
}
.Cart h6 {
position: absolute;
margin-left: 45px;
}
.NavbarLogo a {
margin-left: 16px;
color: forestgreen;
text-decoration: none;
}
.IconCart {
cursor: pointer;
color: white;
margin-left: 7px;
margin-top: 12px;
position: absolute;
}
.IconCartVal {
cursor: pointer;
color: white;
margin-left: 12px;
margin-top: 9px;
position: absolute;
}
.BookCardBody {
display: inline-flex;
flex-wrap: wrap;
margin-left: 30px;
}
.BookCard {
width: 186px;
height: 304px;
color: black;
border: 1px solid yellow;
margin: 10px;
padding: 3px;
background-color: #ffffff;
}
.BookCardImg {
width: 100%;
height: 63%;
color: white;
}
.BookTitle {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: block;
line-height: 1em; /* a */
max-height: 2em; /* a x number of line to show (ex : 2 line) */
}
.BookPubisher {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: block;
line-height: 1em; /* a */
max-height: 1em; /* a x number of line to show (ex : 2 line) */
}
.BookPrice {
text-decoration: line-through;
}
.BookPriceText {
font-weight: 700;
}
.CartBtn {
padding: 2px;
border: 2px solid #f14836;
background-color: Background;
border-radius: 50px;
color: #f14836;
cursor: pointer;
}
.CartBtn:hover {
border: 2px solid Background;
background-color: #f14836;
border-radius: 50px;
color: Background;
}
.CartBody {
display: inline-flex;
flex-wrap: wrap;
margin-left: 30px;
border-top: 2px solid black;
padding: 10px;
height: 100%;
width: 97%;
}
.CartBodyLeft {
height: 100%;
width: 70%;
}
.CartBodyRight {
margin: 10px;
padding: 3px;
height: 100%;
width: 25%;
background-color: #ffffff;
margin-left: 30px;
}
.CartCard {
display:flex;
width: 100%;
height: 304px;
color: black;
border: 1px solid yellow;
margin: 10px;
padding: 3px;
background-color: #ffffff;
}
.CartCardLeft {
padding: 20px;
}
.CartCardRight {
padding: 20px;
}
.CartCardImg {
width: 100%;
height: 100%;
}
.CartTitle {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: block;
line-height: 1em; /* a */
max-height: 2em; /* a x number of line to show (ex : 2 line) */
}
.DeleteBtn {
padding: 2px;
border: 2px solid #f14836;
background-color: Background;
border-radius: 7px;
color: #f14836;
cursor: pointer;
}
.DeleteBtn:hover {
border: 2px solid Background;
background-color: #f14836;
border-radius: 50px;
color: Background;
}
.CartValue {
padding: 1px;
border: 2px solid #f14836;
background-color: #f0f2f2;
border-radius: 7px;
width: 66px;
margin: 7px;
color: #f14836;
cursor: pointer;
text-align: center;
}
.CartBodyRight h3 {
text-align: right;
}
.proceedBtn {
cursor: pointer;
border: 0;
text-align: center;
vertical-align: middle;
background: #FFD814;
border-color: #FCD200;
border-style: solid;
border-width: 1px;
border-radius: 8px;
box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
width: 80%;
padding: 5px;
margin: 7px;
}
.TotalCartTxt {
color: black;
font-weight: 500;
font-family: 'Times New Roman', Times, serif;
}
table, th, td, th {
padding: 2px;
border: 1px solid black;
border-collapse: collapse;
}
.CartTable {
width: 100%;
background-color: #E7E9EB;
}
Well done! Finally mange Global State Management In React With the Help of useContext() Hook And make Dynamic Global Popup Box (Success,Warn,Error) for Web App!
Drop some love by liking or commenting ♥
Reference w3schools
Reference fonts.google
Top comments (0)