├── style.css ├── header.js ├── firebase.js ├── script.js ├── cart.js ├── cart.html └── index.html /style.css: -------------------------------------------------------------------------------- 1 | .main-section-banner { 2 | background-image: url("https://i.ibb.co/JnmTD12/banner.jpg"); 3 | background-position: center; 4 | background-size: cover; 5 | } -------------------------------------------------------------------------------- /header.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function getCartItems() { 4 | db.collection("cart-items").onSnapshot((snapshot) => { 5 | let totalCount = 0; 6 | snapshot.docs.forEach((doc)=>{ 7 | totalCount += doc.data().quantity; 8 | }) 9 | setCartCounter(totalCount); 10 | }) 11 | } 12 | 13 | function setCartCounter(totalCount) { 14 | // cart-item-number 15 | document.querySelector(".cart-item-number").innerText = totalCount; 16 | } 17 | 18 | getCartItems(); -------------------------------------------------------------------------------- /firebase.js: -------------------------------------------------------------------------------- 1 | var firebaseConfig = { 2 | apiKey: "AIzaSyBX6YmNxQAeummx2ElMp3v3wUzDzcGtTkA", 3 | authDomain: "test-7861b.firebaseapp.com", 4 | projectId: "test-7861b", 5 | storageBucket: "test-7861b.appspot.com", 6 | messagingSenderId: "982558408905", 7 | appId: "1:982558408905:web:faa5660fa1ca4f83190d18", 8 | measurementId: "G-FNRPS7RGFX" 9 | }; 10 | // Initialize Firebase 11 | firebase.initializeApp(firebaseConfig); 12 | firebase.analytics(); 13 | 14 | var db = firebase.firestore(); 15 | 16 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function getItems(){ 4 | db.collection("items").get().then((querySnapshot) => { 5 | let items = []; 6 | querySnapshot.forEach((doc) => { 7 | items.push({ 8 | id: doc.id, 9 | image: doc.data().image, 10 | name: doc.data().name, 11 | make: doc.data().make, 12 | rating: doc.data().rating, 13 | price: doc.data().price 14 | }) 15 | }); 16 | generateItems(items) 17 | }); 18 | } 19 | 20 | function addToCart(item){ 21 | let cartItem = db.collection("cart-items").doc(item.id); 22 | cartItem.get() 23 | .then(function(doc){ 24 | if(doc.exists){ 25 | cartItem.update({ 26 | quantity: doc.data().quantity + 1 27 | }) 28 | } else { 29 | cartItem.set({ 30 | image: item.image, 31 | make: item.make, 32 | name: item.name, 33 | price: item.price, 34 | rating: item.rating, 35 | quantity: 1 36 | }) 37 | } 38 | }) 39 | } 40 | 41 | function generateItems(items) { 42 | let itemsHTML = ""; 43 | items.forEach((item) => { 44 | let doc = document.createElement("div"); 45 | doc.classList.add("main-product", "mr-5"); 46 | doc.innerHTML = ` 47 |
48 | 49 |
50 |
51 | ${item.name} 52 |
53 |
54 | ${item.make} 55 |
56 |
57 | ⭐⭐⭐⭐⭐ ${item.rating} 58 |
59 |
60 | ${numeral(item.price).format('$0,0.00')} 61 |
62 | ` 63 | 64 | let addToCartEl = document.createElement("div"); 65 | addToCartEl.classList.add("hover:bg-yellow-600", "cursor-pointer", "product-add", "h-8", "w-28", "rounded", "bg-yellow-500", "text-white", "text-md", "flex", "justify-center", "items-center"); 66 | addToCartEl.innerText = "Add to cart"; 67 | addToCartEl.addEventListener("click", function(){ 68 | addToCart(item) 69 | }) 70 | doc.appendChild(addToCartEl); 71 | document.querySelector(".main-section-products").appendChild(doc); 72 | }) 73 | } 74 | 75 | getItems(); -------------------------------------------------------------------------------- /cart.js: -------------------------------------------------------------------------------- 1 | function getCartItems() { 2 | db.collection("cart-items").onSnapshot((snapshot) => { 3 | let cartItems = []; 4 | snapshot.docs.forEach((doc) => { 5 | cartItems.push({ 6 | id: doc.id, 7 | ...doc.data() 8 | }) 9 | }) 10 | generateCartItems(cartItems); 11 | getTotalCost(cartItems) 12 | }) 13 | } 14 | 15 | function getTotalCost(items){ 16 | let totalCost = 0; 17 | items.forEach((item)=>{ 18 | totalCost += (item.price * item.quantity); 19 | }) 20 | document.querySelector(".total-cost-number").innerText = numeral(totalCost).format('$0,0.00'); 21 | } 22 | 23 | function decreaseCount(itemId) { 24 | let cartItem = db.collection("cart-items").doc(itemId); 25 | cartItem.get().then(function(doc) { 26 | if (doc.exists) { 27 | if (doc.data().quantity > 1) { 28 | cartItem.update({ 29 | quantity: doc.data().quantity - 1 30 | }) 31 | } 32 | } 33 | }) 34 | } 35 | 36 | function increaseCount(itemId){ 37 | let cartItem = db.collection("cart-items").doc(itemId); 38 | cartItem.get().then(function(doc) { 39 | if (doc.exists) { 40 | if (doc.data().quantity > 0) { 41 | cartItem.update({ 42 | quantity: doc.data().quantity + 1 43 | }) 44 | } 45 | } 46 | }) 47 | } 48 | 49 | function deleteItem(itemId){ 50 | db.collection("cart-items").doc(itemId).delete(); 51 | } 52 | 53 | function generateCartItems(cartItems) { 54 | let itemsHTML = ""; 55 | cartItems.forEach((item) => { 56 | itemsHTML += ` 57 |
58 |
59 | 60 |
61 |
62 |
63 | ${item.name} 64 |
65 |
66 | ${item.make} 67 |
68 |
69 |
70 |
71 | 72 |
73 |

x ${item.quantity}

74 |
75 | 76 |
77 |
78 |
79 | ${numeral(item.price * item.quantity).format('$0,0.00')} 80 |
81 |
82 | 83 |
84 |
85 | ` 86 | }) 87 | document.querySelector(".cart-items").innerHTML = itemsHTML; 88 | createEventListeners(); 89 | } 90 | 91 | function createEventListeners() { 92 | let decreaseButtons = document.querySelectorAll(".cart-item-decrease"); 93 | let increaseButtons = document.querySelectorAll(".cart-item-increase"); 94 | 95 | let deleteButtons = document.querySelectorAll(".cart-item-delete"); 96 | 97 | decreaseButtons.forEach((button) => { 98 | button.addEventListener("click", function(){ 99 | decreaseCount(button.dataset.id); 100 | }) 101 | }) 102 | 103 | increaseButtons.forEach((button) => { 104 | button.addEventListener("click", function() { 105 | increaseCount(button.dataset.id) 106 | }) 107 | }) 108 | 109 | deleteButtons.forEach((button)=>{ 110 | button.addEventListener("click", function(){ 111 | deleteItem(button.dataset.id) 112 | }) 113 | }) 114 | 115 | } 116 | 117 | 118 | getCartItems(); -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amazon 2.0 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 24 |
25 |
26 | 31 | 32 |
33 | categories 34 | 35 | 36 | 37 |
38 |
39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 |
50 |
51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 |
60 |
61 |
62 | 110 |
111 |

Shopping Cart

112 |
113 |

Product

114 |

Count

115 |

Total Cost

116 | 117 |
118 |
119 | 120 |
121 |
122 |
123 |

Total Cost

124 |
125 | $1,439.00 126 |
127 |
128 |
129 | Complete Order 130 |
131 |
132 |
133 |
134 |
135 | 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amazon 2.0 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 |
26 |
27 | 30 | 31 |
32 | categories 33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 |
50 |
51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 |
61 |
62 |
63 | 111 |
112 |
113 |
114 |

Browse Products

115 |
116 |
117 |
118 |

119 | Popular Categories 120 | 121 | 122 | 123 |

124 |
125 |
126 | 127 | 128 | 129 |
130 |
131 | 132 | 133 | 134 |
135 |
136 | 137 | 138 | 139 |
140 |
141 | 142 | 143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 |
151 |
152 | 153 | 154 | 155 |
156 |
157 | 158 | 159 | 160 |
161 |
162 | 163 | 164 | 165 |
166 |
167 |
168 |
169 |

Hot Deals 🔥

170 |
171 |
172 |
173 |
174 |
175 |
176 | 177 | --------------------------------------------------------------------------------