├── images
    ├── img-1.jpg
    ├── img-2.jpg
    ├── img-3.jpg
    ├── img-4.jpg
    ├── img-5.jpg
    ├── img-6.jpg
    ├── img-7.png
    ├── img-8.jpg
    ├── img-9.jpg
    ├── img-10.jpg
    ├── img-11.jpg
    ├── img-12.jpg
    ├── desk-shot1.PNG
    ├── mob-shot1.PNG
    ├── mob-shot2.PNG
    └── mob-shot3.PNG
├── index.html
├── cart.html
├── src
    ├── data.js
    ├── main.js
    ├── style.css
    └── cart.js
└── README.md


/images/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-1.jpg


--------------------------------------------------------------------------------
/images/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-2.jpg


--------------------------------------------------------------------------------
/images/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-3.jpg


--------------------------------------------------------------------------------
/images/img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-4.jpg


--------------------------------------------------------------------------------
/images/img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-5.jpg


--------------------------------------------------------------------------------
/images/img-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-6.jpg


--------------------------------------------------------------------------------
/images/img-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-7.png


--------------------------------------------------------------------------------
/images/img-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-8.jpg


--------------------------------------------------------------------------------
/images/img-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-9.jpg


--------------------------------------------------------------------------------
/images/img-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-10.jpg


--------------------------------------------------------------------------------
/images/img-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-11.jpg


--------------------------------------------------------------------------------
/images/img-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/img-12.jpg


--------------------------------------------------------------------------------
/images/desk-shot1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/desk-shot1.PNG


--------------------------------------------------------------------------------
/images/mob-shot1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/mob-shot1.PNG


--------------------------------------------------------------------------------
/images/mob-shot2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/mob-shot2.PNG


--------------------------------------------------------------------------------
/images/mob-shot3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ab-noori/OnlineBookStore/HEAD/images/mob-shot3.PNG


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>فروشگاه آنلاین کتاب</title>
 8 |     <link rel="stylesheet" href="src/style.css" />
 9 |     <link
10 |       rel="stylesheet"
11 |       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
12 |     />
13 |   </head>
14 |   <body>
15 |     <div class="navbar">
16 |       <a href="index.html">
17 |         <h2>فروشگاه آنلاین کتاب</h2>
18 |       </a>
19 | 
20 |       <a href="cart.html">
21 |         <div class="cart">
22 |           <i class="bi bi-cart2"></i>
23 |           <div id="cartAmount" class="cartAmount">0</div>
24 |         </div>
25 |       </a>
26 |     </div>
27 |     <div class="shop" id="shop"></div>
28 |   </body>
29 |   <script src="src/data.js "></script>
30 |   <script src="src/main.js"></script>
31 | </html>
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>فروشگاه آنلاین کتاب</title>
 8 |     <link rel="stylesheet" href="src/style.css" />
 9 |     <link
10 |       rel="stylesheet"
11 |       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
12 |     />
13 |   </head>
14 |   <body>
15 |     <div class="navbar">
16 |       <a href="index.html">
17 |         <h2>فروشگاه آنلاین کتاب</h2>
18 |       </a>
19 | 
20 |       <a href="cart.html">
21 |         <div class="cart">
22 |           <i class="bi bi-cart2"></i>
23 |           <div id="cartAmount" class="cartAmount">0</div>
24 |         </div>
25 |       </a>
26 |     </div>
27 |     <div id="label" class="text-center">
28 | 
29 |     </div>
30 |     <div class="shopping-cart" id="shopping-cart">
31 | 
32 |     </div>
33 |   </body>
34 |   <script src="src/data.js "></script>
35 |   <script src="src/cart.js"></script>
36 | </html>


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | let shopItemsData = [
 2 |     {
 3 |     id: "book_31301",
 4 |     name: "کتاب ۱۹۸۴",
 5 |     price: 75000,
 6 |     desc: "کتاب ۱۹۸۴ اثر جورج اورول نشر شاهدخت پاییز",
 7 |     img: "images/img-1.jpg",
 8 |   },
 9 |   {
10 |     id: "book_31302",
11 |     name: "کتاب شدن",
12 |     price: 63000,
13 |     desc: "کتاب شدن اثر میشل اوباما، رومان و زندگی نامه",
14 |     img: "images/img-2.jpg",
15 |   },
16 |   {
17 |     id: "book_31303",
18 |     name: "کتاب فقط ساکت شوانجامش بده",
19 |     price: 94000,
20 |     desc: "کتاب فقط ساکت شو و انجامش بده اثر برایان تریسی",
21 |     img: "images/img-3.jpg",
22 |   },
23 |   {
24 |     id: "book_31304",
25 |     name: "کتاب نبرد من",
26 |     price: 55000,
27 |     desc: " کتاب نبرد من اثر آدولف هتلر، تاریخ و سیاست",
28 |     img: "images/img-4.jpg",
29 |   },
30 |   {
31 |     id: "book_31305",
32 |     name: "کتاب جهانی که می بینم",
33 |     price: 90000,
34 |     desc: "کتاب جهانی که می بینم، اثر آلبرت انیشتین با موضوع علمی",
35 |     img: "images/img-5.jpg",
36 |   },
37 |   {
38 |     id: "book_31306",
39 |     name: "کتاب جنایت و مکافات",
40 |     price: 34000,
41 |     desc: "کتاب جنایت و مکافات اثر فئودور داستایوفسکی، رمان",
42 |     img: "images/img-6.jpg",
43 |   },
44 |   {
45 |     id: "book_31307",
46 |     name: "کتاب شرمنده نباش دختر",
47 |     price: 51000,
48 |     desc: "کتاب شرمنده نباش دختر اثر ریچل هالیس نشر کتاب کوله پشتی",
49 |     img: "images/img-7.png",
50 |   },
51 |   {
52 |     id: "book_31308",
53 |     name: "کتاب اثر مرکب",
54 |     price: 48000,
55 |     desc: " کتاب اثر مرکب اثر دارن هاردی نشر داریوش",
56 |     img: "images/img-8.jpg",
57 |   },
58 |   {
59 |     id: "book_31309",
60 |     name: "کتاب ملت عشق",
61 |     price: 85000,
62 |     desc: "کتاب ملت عشق اثر الیف شافاک با موضوع رمان خارجی",
63 |     img: "images/img-9.jpg",
64 |   },
65 |   {
66 |     id: "book_31310",
67 |     name: "کتاب قلعه حیوانات",
68 |     price: 52000,
69 |     desc: "کتاب قلعه حیوانات اثر جورج اورول، رمان خارجی",
70 |     img: "images/img-10.jpg",
71 |   },
72 |   {
73 |     id: "book_31311",
74 |     name: "کتاب خودت باش دختر",
75 |     price: 45000,
76 |     desc: "کتاب خودت باش دختر اثر ریچل هالیس",
77 |     img: "images/img-11.jpg",
78 |   },
79 |   {
80 |     id: "book_31312",
81 |     name: "کتاب هنر شفاف اندیشیدن",
82 |     price: 35000,
83 |     desc: "کتاب هنر شفاف اندیشیدن اثر رولف دوبلی، مهارت های زندگی و موفقیت",
84 |     img: "images/img-12.jpg",
85 |   },
86 | ];


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | let shop = document.getElementById("shop");
 2 | 
 3 | let basket = JSON.parse(localStorage.getItem("ali")) || [];
 4 | 
 5 | let generateShop = () =>{
 6 |     return (shop.innerHTML = shopItemsData
 7 |         .map((x)=>{
 8 |             let {id, name, desc, price, img} = x;
 9 |             let searchForAmount = basket.find((x)=> x.id === id) || [];
10 |         return `<div id=product-id-${id} class="items">
11 |         <img width="220" src= ${img} alt="">
12 |         <div class="details">
13 |           <h3>${name}</h3>
14 |           <p>${desc}</p>
15 |             <div class="price-quantity">
16 |               <h3>${price} تومان </h3>
17 |               <div class="buttons">
18 |                 <i onclick="decrement(${id})" class="bi bi-dash-lg"></i>
19 |                 <div id=${id} class="quantity">
20 |                 ${searchForAmount.item === undefined? 0: searchForAmount.item}
21 |                 </div>
22 |                 <i onclick="increment(${id})" class="bi bi-plus-lg"></i>
23 |               </div>
24 |             </div>
25 |           
26 |         </div>
27 |       </div>`
28 |     }).join(""));
29 | }
30 | 
31 | generateShop();
32 | 
33 | let increment = (id)=>{
34 |     let selectedItem = id;
35 |     let search = basket.find((x)=>x.id===selectedItem.id);
36 |     if(search === undefined){
37 |         basket.push({
38 |             id: selectedItem.id,
39 |             item: 1,
40 |         })
41 |     }else{
42 |         search.item +=1;
43 |     }
44 |       
45 |     // console.log(basket);
46 |     update(selectedItem.id);
47 | 
48 |     
49 |     localStorage.setItem("ali", JSON.stringify(basket));
50 | }
51 | 
52 | let decrement = (id)=>{
53 |     let selectedItem = id;
54 |     let search = basket.find((x)=>x.id===selectedItem.id);
55 | 
56 |     if(search === undefined)return
57 |     else if(search.item === 0)return
58 |     else{
59 |         search.item -=1;
60 |     }
61 | 
62 |     update(selectedItem.id);
63 |     basket = basket.filter((f) => f.item !== 0);
64 |     // console.log(basket);
65 |     localStorage.setItem("ali", JSON.stringify(basket));
66 |     }
67 | 
68 | let update = (id) =>{
69 |     let search = basket.find((x) => x.id === id);
70 |     // console.log(search.item);
71 |     document.getElementById(id).innerHTML = search.item;
72 |     calculation();
73 | }
74 | 
75 | let calculation = () =>{
76 |     let cartIcon = document.getElementById("cartAmount");
77 |     cartIcon.innerHTML = basket.map((x)=> x.item).reduce((x,y)=>x+y,0);
78 | }
79 | 
80 | calculation(); 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     direction: rtl;
  6 | }
  7 | 
  8 | body {
  9 |     font-family: sans-serif;
 10 | }
 11 | 
 12 | i {
 13 |     cursor: pointer;
 14 | }
 15 | 
 16 | a {
 17 |     text-decoration: none;
 18 |     color: white;
 19 | }
 20 | 
 21 | .navbar {
 22 |     display: flex;
 23 |     flex-direction: row;
 24 |     justify-content: space-between;
 25 |     align-items: center;
 26 |     background-color: #212529;
 27 |     color: white;
 28 |     padding: 25px 60px;
 29 |     margin-bottom: 30px;
 30 | 
 31 | }
 32 | 
 33 | .cart {
 34 |     background-color: white;
 35 |     color: #212529;
 36 |     font-size: 30px;
 37 |     padding: 5px;
 38 |     border-radius: 4px;
 39 |     position: relative;
 40 | }
 41 | 
 42 | .cartAmount {
 43 |     position: absolute;
 44 |     top: -15px;
 45 |     right: -10px;
 46 |     font-size: 16px;
 47 |     color: white;
 48 |     background-color: red;
 49 |     border-radius: 3px;
 50 |     padding: 3px;
 51 | 
 52 | }
 53 | 
 54 | /**
 55 | * ! shop styles
 56 | **/
 57 | 
 58 | .shop {
 59 |     display: grid;
 60 |     grid-template-columns: repeat(4, 223px);
 61 |     gap: 30px;
 62 |     justify-content: center;
 63 |     margin-bottom: 50px;
 64 | }
 65 | 
 66 | @media (max-width: 1000px) {
 67 |     .shop{
 68 |         grid-template-columns: repeat(2, 223px);
 69 |     }
 70 | }
 71 | 
 72 | @media (max-width: 500px){
 73 |     .shop{
 74 |         grid-template-columns: repeat(1, 223px);
 75 |     }
 76 | }
 77 | 
 78 | .items {
 79 |     border: 2px solid #212529;
 80 |     border-radius: 4px;
 81 | }
 82 | 
 83 | .items img {
 84 |     width: 100%;
 85 |     border-radius: 2px 2px 0 0;
 86 | }
 87 | .details {
 88 |     display: flex;
 89 |     flex-direction: column;
 90 |     padding: 10px;
 91 |     gap:10px;
 92 | }
 93 | 
 94 | .price-quantity {
 95 |     display: flex;
 96 |     justify-content: space-between;
 97 |     align-items: center;
 98 | }
 99 | 
100 | .buttons {
101 |     display: flex;
102 |     gap: 8px;
103 |     font-size: 18px;
104 | }
105 | 
106 | .bi-dash-lg {
107 |     color: red;
108 | }
109 | 
110 | .bi-plus-lg {
111 |     color: green;
112 | }
113 | 
114 | /* ----------------------------style rules fo cart page--------------------------*/
115 | 
116 | .text-center {
117 |     text-align: center;
118 |     margin-bottom: 20px;
119 | }
120 | 
121 | .homeBtn, .a, .b {
122 |     background-color: #212529;
123 |     color: white;
124 |     border: none;
125 |     padding: 6px;
126 |     border-radius: 3px;
127 |     cursor: pointer;
128 |     margin-top: 10px;
129 | }
130 | 
131 | .a {
132 |     background-color: green;
133 | }
134 | 
135 | .b {
136 |     background-color: red;
137 | }
138 | 
139 | .bi-x-lg {
140 |     color: red;
141 |     font-weight: bold;
142 | }
143 | 
144 | /*-------------------------------shoppingCart style rules----------------------------------*/
145 | 
146 | .shopping-cart {
147 |     display: grid;
148 |     grid-template-columns: repeat(1, 300px);
149 |     justify-content: center; 
150 |     gap: 15px;
151 | 
152 | }
153 | 
154 | .cart-item {
155 |     display: flex;
156 |     border: 2px solid #212529;
157 |     border-radius: 5px;
158 | }
159 | 
160 | .title-price-x {
161 |     width: 192px;
162 |     display: flex;
163 |     align-items: center;
164 |     /* border: 1px solid blue; */
165 |     justify-content: space-between;
166 | }
167 | 
168 | .title-price {
169 |     width: 171px;
170 |     display: flex;
171 |     align-items: center;
172 |     justify-content: space-between;
173 |     gap: 4px;
174 |     /* border: 1px solid red; */
175 | }
176 | 
177 | .cart-item-price {
178 |     background-color: #212529;
179 |     color: white;
180 |     border-radius: 4px;
181 |     padding: 3px 6px;
182 |     white-space: nowrap;
183 | }
184 | 
185 | .cart-details {
186 |     margin: 5px;
187 |     margin-top: 10px;
188 |     display: flex;
189 |     flex-direction: column;
190 |     gap: 6px;
191 | }
192 | 


--------------------------------------------------------------------------------
/src/cart.js:
--------------------------------------------------------------------------------
  1 | let label = document.getElementById("label");
  2 | 
  3 | let shoppingCart = document.getElementById("shopping-cart");
  4 | 
  5 | let basket = JSON.parse(localStorage.getItem("ali")) || [];
  6 | let calculation = () => {
  7 |   let cartIcon = document.getElementById("cartAmount");
  8 |   cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
  9 | };
 10 | 
 11 | calculation();
 12 | 
 13 | let generateCartItems = () => {
 14 |   if (basket.length !== 0) {
 15 |     return (shoppingCart.innerHTML = basket.map((cart) => {
 16 |       let {id, item} = cart;
 17 |       let search = shopItemsData.find((y)=> y.id === id) || [];
 18 |       let {img, name, price} = search;
 19 |       return `
 20 |             <div class="cart-item">
 21 |               <img width="95" src=${img} alt="">
 22 |               <div class="cart-details">
 23 |                 <div class="title-price-x">
 24 |                     <h5 class="title-price">
 25 |                       <p>${name}</p>
 26 |                       <p class="cart-item-price" > ${price} تومان</p>
 27 |                     </h5>
 28 |                     <i onclick="removeItem(${id})" class="bi bi-x-lg"></i>
 29 |                 </div>
 30 |                 <div class="buttons">
 31 |                   <i onclick="decrement(${id})" class="bi bi-dash-lg"></i>
 32 |                   <div id=${id} class="quantity">${item}</div>
 33 |                   <i onclick="increment(${id})" class="bi bi-plus-lg"></i>
 34 |       
 35 |                 </div>
 36 |                 <h4>${item*price} تومان</h4> 
 37 |               </div>
 38 |             </div>
 39 | 
 40 |             
 41 |         `;
 42 |     }).join(""));
 43 |   } else {
 44 |     shoppingCart.innerHTML = ``;
 45 | 
 46 |     label.innerHTML = `
 47 |         <h2>سبد خرید شما خالی است</h2>
 48 |         <a href="index.html">
 49 |             <button class="homeBtn">بازگشت به صفحه اصلی</button>
 50 |             
 51 |         </a>
 52 |         `;
 53 |   }
 54 | };
 55 | 
 56 | 
 57 | generateCartItems();
 58 | 
 59 | 
 60 | let increment = (id)=>{
 61 |   let selectedItem = id;
 62 |   let search = basket.find((x)=>x.id===selectedItem.id);
 63 |   if(search === undefined){
 64 |       basket.push({
 65 |           id: selectedItem.id,
 66 |           item: 1,
 67 |       })
 68 |   }else{
 69 |       search.item +=1;
 70 |   }
 71 |     
 72 |   generateCartItems();
 73 |   update(selectedItem.id);
 74 | 
 75 |   
 76 |   localStorage.setItem("ali", JSON.stringify(basket));
 77 | }
 78 | 
 79 | let decrement = (id)=>{
 80 |   let selectedItem = id;
 81 |   let search = basket.find((x)=>x.id===selectedItem.id);
 82 | 
 83 |   if(search === undefined)return
 84 |   else if(search.item === 0)return
 85 |   else{
 86 |       search.item -=1;
 87 |   }
 88 | 
 89 |   update(selectedItem.id);
 90 |   basket = basket.filter((f) => f.item !== 0);
 91 |   generateCartItems();
 92 |   localStorage.setItem("ali", JSON.stringify(basket));
 93 |   }
 94 | 
 95 | let update = (id) =>{
 96 |   let search = basket.find((x) => x.id === id);
 97 |   // console.log(search.item);
 98 |   document.getElementById(id).innerHTML = search.item;
 99 |   calculation();
100 |   totallAmount();
101 | }
102 | 
103 | let removeItem = (id) =>{
104 |   let selectedItem = id;
105 |   basket = basket.filter((toremove)=> toremove.id !== selectedItem.id);
106 |   localStorage.setItem("ali", JSON.stringify(basket));
107 |   generateCartItems();
108 |   totallAmount();
109 |   calculation();
110 | 
111 | }
112 | 
113 | let clearCarts = () => {
114 |   basket = [];
115 |   generateCartItems();
116 |   localStorage.setItem("ali", JSON.stringify(basket));
117 |   calculation();
118 |   
119 | 
120 | }
121 | 
122 | let totallAmount = () => {
123 |   if(basket.length !== 0){
124 |     let amount = basket.map((p)=>{
125 |       let {item, id} = p;
126 |       let search = shopItemsData.find((y)=> y.id === id) || [];
127 | 
128 |       return item * search.price;
129 |     }).reduce((x,y)=>x+y,0);
130 |     // console.log(amount);
131 |     label.innerHTML = `
132 |     <h2> مبلغ قابل پرداخت: <span>${amount} تومان</span></h2>
133 |     <button class="a">پرداخت</button>
134 |     <button onclick="clearCarts()" class="b">حذف همه</button>
135 |     
136 |     `;
137 |   }
138 |   else return
139 | };
140 | 
141 | totallAmount();


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a name="readme-top"></a>
  2 | 
  3 | ![](https://img.shields.io/badge/Microverse-blueviolet)
  4 | 
  5 | > # Online Book Store
  6 | 
  7 | 
  8 | | Project Shoots Representation|
  9 | |---------------------------------------|
 10 | |![screenshot](images/desk-shot1.PNG)|
 11 | |<div align="center">![screenshot](images/mob-shot3.PNG)</div>|
 12 | |<div align="center"><img src="./images/mob-shot1.PNG" alt="logo" width="300"  height="auto"/><img src="./images/mob-shot2.PNG" alt="logo" width="300"  height="auto"/></div>|
 13 | 
 14 | <!-- TABLE OF CONTENTS -->
 15 | 
 16 | # 📗 Table of Contents
 17 | 
 18 | - [📖 About the Project](#about-project)
 19 |   - [🛠 Built With](#built-with)
 20 |     - [Tech Stack](#tech-stack)
 21 |     - [Key Features](#key-features)
 22 |   - [🚀 Live Demo](#live-demo)
 23 | - [💻 Getting Started](#getting-started)
 24 |   - [Setup](#setup)
 25 |   - [Prerequisites](#prerequisites)
 26 |   - [Install](#install)
 27 |   - [Usage](#usage)
 28 | - [👥 Authors](#authors)
 29 | - [🔭 Future Features](#future-features)
 30 | - [🤝 Contributing](#contributing)
 31 | - [⭐️ Show your support](#support)
 32 | - [🙏 Acknowledgements](#acknowledgements)
 33 | - [❓ FAQ (OPTIONAL)](#faq)
 34 | - [📝 License](#license)
 35 | 
 36 | <!-- PROJECT DESCRIPTION -->
 37 | 
 38 | # 📖 [Online Book Store] <a name="about-project"></a>
 39 | 
 40 | > **[Online Book Store]** is a simple book store with vanilla JavaScript. You can select multiple numbers of books. Adding them to cart, removing them from cart, decreasing and increasing the cart amount and calculating the total cost of the cart.
 41 | 
 42 | ## 🛠 Built With <a name="built-with"></a>
 43 | 
 44 | ### Tech Stack <a name="tech-stack"></a>
 45 | - <summary>Client</summary>
 46 |     <ul>
 47 |       <li><a href="https://reactjs.org/">HTML</a></li>
 48 |       <li><a href="https://reactjs.org/">CSS</a></li>
 49 |       <li><a href="https://reactjs.org/">JavaScript</a></li>
 50 |     </ul>
 51 | 
 52 | 
 53 | ### Key Features <a name="key-features"></a>
 54 | 
 55 | - **[Responsive layout]**
 56 | - **[UX/UI accessibility]**
 57 | - **[Dynamic data]**
 58 | 
 59 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 60 | 
 61 | <!-- LIVE DEMO -->
 62 | 
 63 | ## 🚀 Live Demo <a name="live-demo"></a>
 64 | 
 65 | > Add a link to your deployed project.
 66 | 
 67 | - [Live Demo On Gh-pages](https://ab-noori.github.io/OnlineBookStore/)
 68 | - [Live Demo On Render](https://onlinebookstore-gbte.onrender.com)
 69 | 
 70 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 71 | 
 72 | <!-- GETTING STARTED -->
 73 | 
 74 | ## 💻 Getting Started <a name="getting-started"></a>
 75 | 
 76 | To get a local copy up and running, follow these steps:
 77 | 
 78 | ### Prerequisites
 79 | 
 80 | In order to run this project you need:
 81 |   - A browser of you choice.
 82 |   - A text editor of your choice.
 83 |   - An installed node.js on your local system
 84 | 
 85 | ### Setup
 86 | 
 87 | Clone this repository to your desired folder:
 88 | 
 89 | - Use the following Commands:
 90 | 
 91 |       cd your-desired-folder
 92 |       git clone git@github.com:ab-noori/OnlineBookStore.git
 93 | 
 94 | 
 95 | ### Install
 96 | 
 97 | Install this project with:
 98 | 
 99 |   - You can deploy this projec on hosting provider of your choise or you can deploy it on github pages.
100 | 
101 | 
102 | ### Usage
103 | 
104 | - To add data the local storage of browser
105 | - To read data from local storage of browser.
106 | - To display data.
107 | - To remove data from local storage.
108 | 
109 | ### Deployment
110 | 
111 | You can deploy this project using:
112 | - Free deployment services like GitHub pages.
113 | - Any deployment services of your choice.
114 | 
115 | 
116 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
117 | 
118 | 
119 | ## 👥 Authors <a name="authors"></a>
120 | 
121 | 👤 **Abdul Ali Noori**
122 | 
123 | - GitHub: [@ab-noori](https://github.com/ab-noori)
124 | - Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4)
125 | - LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/)
126 | 
127 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
128 | 
129 | 
130 | ## 🔭 Future Features <a name="future-features"></a>
131 | 
132 | - [ ] **[Add About page]**
133 | - [ ] **[Add Contact page]**
134 | 
135 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
136 | 
137 | ## 🤝 Contributing <a name="contributing"></a>
138 | 
139 | Contributions, issues, and feature requests are welcome!
140 | 
141 | Feel free to check the [issues page](https://github.com/ab-noori/Awesome-Books/issues).
142 | 
143 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
144 | 
145 | ## ⭐️ Show your support <a name="support"></a>
146 | 
147 |  
148 |   If you like this project, give it a star.
149 | 
150 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
151 | 
152 | 
153 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
154 | 
155 |   I would like to thank Microverse and my coding partners, and also give credit to FreeCodeCamp
156 | YouTub Channel, I really learned a lot from this channel.
157 | 
158 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
159 | 
160 | 
161 | ## ❓ FAQ (OPTIONAL) <a name="faq"></a>
162 | 
163 | - **How to make it mobile friendly?**
164 | 
165 |   - Put a viewport tag in the header
166 | 
167 | - **How to design the site?**
168 | 
169 |   - Draw a mockup before start to code
170 | 
171 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
172 | 
173 | 
174 | ## 📝 License <a name="license"></a>
175 | 
176 | This project is [MIT](./LICENSE) licensed.
177 | 
178 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
179 | 


--------------------------------------------------------------------------------