Skip to content

Commit 12b2081

Browse files
clevercoderjoyclevercoderjoy
committed
code
0 parents  commit 12b2081

14 files changed

+940
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.vscode/settings.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"cSpell.words": [
3+
"Alexa"
4+
],
5+
"files.autoSave": "afterDelay",
6+
"compile-hero.disable-compile-files-on-did-save-code": false
7+
}

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Amazon-clone-2.0
2+
clevercoderjoy amazon clone 2.0

‎cart.html

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jdenticon.min.js" async
12+
integrity="sha384-l0/0sn63N3mskDgRYJZA6Mogihu0VY3CusdLMiwpJ9LFPklOARUcOiWEIGGmFELx"
13+
crossorigin="anonymous">
14+
</script>
15+
<!-- importing firebase -->
16+
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
17+
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
18+
<script src="./firebase.js"></script>
19+
<!-- importing firebase done -->
20+
<script src="./header.js"></script>
21+
<script src="./cart.js"></script>
22+
<title>clevercoderjoy - Amazon Clone 2.0</title>
23+
</head>
24+
25+
<body>
26+
<div class="bg-white w-full">
27+
28+
<!-- header start-->
29+
<div class="header bg-gray-900 h-16 flex items-center">
30+
<div class="logo w-1/5 h-16 ml-10">
31+
<a href="/">
32+
<img class="w-28 h-16 object-contain"
33+
src="https://www.pinclipart.com/picdir/big/57-576184_view-our-amazon-storefront-logo-white-png.png"
34+
alt="Amazon">
35+
</a>
36+
</div>
37+
38+
<!-- input area -->
39+
<input
40+
class="h-9 w-30 bg-gray-800 border-gray-500 border-opacity-75 rounded-l-xl px-3 text-white ml-6 focus:outline-none placeholder-white"
41+
id="search" type="text" placeholder="Search..." />
42+
43+
<!-- categories -->
44+
<div
45+
class="categories h-9 w-30 bg-gray-800 border border-gray-500 border-opacity-75 px-3 text-white flex items-center">
46+
categories
47+
<!-- down arrow icon -->
48+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
49+
stroke="currentColor">
50+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
51+
</svg>
52+
</div>
53+
54+
<!-- search icon -->
55+
<div class="search-icon h-9 w-10 rounded-r-xl bg-yellow-500 flex justify-center items-center text-white">
56+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
57+
<path fill-rule="evenodd"
58+
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
59+
clip-rule="evenodd" />
60+
</svg>
61+
</div>
62+
63+
<!-- right side icons -->
64+
<div class="icons text-white flex items-center ml-auto mr-8 w-48 h-16 justify-around">
65+
66+
<!-- heart icon -->
67+
<svg class="h-6 w-6 m-1" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
68+
fill="currentColor">
69+
<path fill-rule="evenodd"
70+
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
71+
clip-rule="evenodd" />
72+
</svg>
73+
74+
<!-- cart icon -->
75+
<div class="cart-icon h-10 w-10 bg-yellow-500 flex items-center justify-center rounded-xl relative">
76+
<!-- total cart items -->
77+
<div class="cart-item-number font-bold absolute -top-1 -right-1 h-4 w-4 bg-white rounded-full flex justify-center items-center text-gray-800 text-xs">
78+
<!-- total number of items in the cart goes here from the database -->
79+
</div>
80+
<!-- total cart items ends -->
81+
<svg class="h-4 w-4 text-gray-600" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
82+
viewBox="0 0 24 24" stroke="currentColor">
83+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
84+
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
85+
</svg>
86+
</div>
87+
</a>
88+
89+
<!-- bell -->
90+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
91+
stroke="currentColor">
92+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
93+
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
94+
</svg>
95+
96+
<!-- avatar -->
97+
<svg class="h-12 w-12 rounded" width="80" height="80" data-jdenticon-value="clevercoderjoy"></svg>
98+
</div>
99+
100+
</div>
101+
<!-- header end-->
102+
103+
<!-- main -->
104+
<div class="main h-screen flex">
105+
106+
<!--sidebar-->
107+
<div class="border-t-2 border-gray-700 main-sidebar w-1/5 bg-gray-900 p-6">
108+
109+
<!-- sidebar categories -->
110+
<div class="sidebar-categories">
111+
<div class="sidebar-main-category text-yellow-500 cursor-pointer flex font-bold p-2 bg-gray-700 rounded-lg">
112+
<span class="w-8">
113+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
114+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
115+
</svg>
116+
</span>
117+
<span>Categories</span>
118+
</div>
119+
120+
<!-- sidebar items starts-->
121+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
122+
<span class="w-8"></span>
123+
<span>Echo and Alexa</span>
124+
</div>
125+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
126+
<span class="w-8"></span>
127+
<span>Kindle</span>
128+
</div>
129+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
130+
<span class="w-8"></span>
131+
<span>Books</span>
132+
</div>
133+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
134+
<span class="w-8"></span>
135+
<span>Electronics</span>
136+
</div>
137+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
138+
<span class="w-8"></span>
139+
<span>Home and Garden</span>
140+
</div>
141+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2">
142+
<span class="w-8">
143+
</span>
144+
<span>Fashion</span>
145+
</div>
146+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2 hover:bg-gray-700 rounded-xl">
147+
<span class="w-8">
148+
<i class="fas fa-percent"></i>
149+
</span>
150+
<span>Sell on Amazon</span>
151+
</div>
152+
<div class="sidebar-main-category text-white cursor-pointer flex font-bold p-2 hover:bg-gray-700 rounded-xl">
153+
<span class="w-8">
154+
<i class="far fa-question-circle"></i>
155+
</span>
156+
<span>Help</span>
157+
</div>
158+
<!-- sidebar items ends-->
159+
160+
</div>
161+
<!-- sidebar categories ends-->
162+
163+
</div>
164+
<!--sidebar ends-->
165+
166+
<!-- main section starts-->
167+
<div class="main-section flex-1 p-6 bg-white">
168+
<!-- heading -->
169+
<h1 class="text-gray-400 text-3xl font-bold mb-6">Shopping Cart</h1>
170+
<!-- cart table -->
171+
<div class="table-titles flex font-bold flex text-gray-400">
172+
<!-- table headings -->
173+
<h2 class="flex-grow ml-3">Product</h2>
174+
<h2 class="w-48">Count</h2>
175+
<h2 class="w-48">Total Cost</h2>
176+
<span class="w-10"></span>
177+
</div>
178+
<!-- cart table ends -->
179+
180+
<!-- cart items -->
181+
<div class="cart-items mt-5">
182+
<!-- items added to the cart goes here from the database -->
183+
</div>
184+
<!-- cart items ends -->
185+
<!-- total cost section -->
186+
<div class="complete-order flex justify-end mt-10">
187+
<div class="total-cost mr-7">
188+
<h2 class="text-gray-400">Total Cost</h2>
189+
<div class="total-cost-number text-3xl font-bold text-gray-600">
190+
<!-- total cost goes here from the database -->
191+
</div>
192+
</div>
193+
<!-- complete order button -->
194+
<div class="complete-order-button items-center w-56 flex justify-center bg-yellow-500 rounded text-white cursor-pointer hover:bg-yellow-600">
195+
Complete Order
196+
</div>
197+
</div>
198+
<!-- total cost section ends -->
199+
</div>
200+
<!-- main section ends -->
201+
</div>
202+
<!-- main ends -->
203+
</div>
204+
</body>
205+
</html>

‎cart.js

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// function gatCartItems
2+
function getCartItems(){
3+
db.collection("cart-items").onSnapshot((snapshot) => {
4+
let cartItems = [];
5+
snapshot.docs.forEach((doc) => {
6+
cartItems.push({
7+
id: doc.id,
8+
...doc.data()
9+
})
10+
})
11+
generatedCartItems(cartItems);
12+
getTotalCost(cartItems);
13+
})
14+
}
15+
// function getCartItems ends
16+
17+
// function decreaseCount
18+
function decreaseCount(itemId){
19+
let cartItem = db.collection("cart-items").doc(itemId);
20+
cartItem.get().then(function(doc) {
21+
if(doc.exists) {
22+
if(doc.data().quantity > 1){
23+
cartItem.update({
24+
quantity: doc.data().quantity - 1
25+
})
26+
}
27+
}
28+
})
29+
}
30+
// function decreaseCount ends
31+
32+
// function increaseCount
33+
function increaseCount(itemId){
34+
let cartItem = db.collection("cart-items").doc(itemId);
35+
cartItem.get().then(function(doc) {
36+
if(doc.exists) {
37+
if(doc.data().quantity > 0){
38+
cartItem.update({
39+
quantity: doc.data().quantity + 1
40+
})
41+
}
42+
}
43+
})
44+
}
45+
// function increaseCount ends
46+
47+
// function deleteItem
48+
function deleteItem(itemId){
49+
db.collection("cart-items").doc(itemId).delete();
50+
}
51+
// function deleteItem ends
52+
53+
// function getTotalCost
54+
function getTotalCost(items){
55+
let totalCost = 0;
56+
items.forEach((item) => {
57+
totalCost += item.price * item.quantity;
58+
})
59+
document.querySelector(".total-cost-number").innerText = `₹${totalCost}.00`;
60+
}
61+
// function getTotalCost ends
62+
63+
// function generatedCartItems
64+
function generatedCartItems(cartItems){
65+
let itemsHTML = "";
66+
cartItems.forEach((item) => {
67+
itemsHTML += `
68+
<div class="cart-item flex items-center pb-4 border-b border-gray-100">
69+
<div class="cart-item-img w-40 h-24 bg-white rounded-lg p-4">
70+
<img class="w-full h-full object-contain" src="${item.image}" alt="">
71+
</div>
72+
<div class="cart-item-details flex-grow">
73+
<div class="item-title font-bold text-sm text-gray-600">
74+
${item.name}
75+
</div>
76+
<div class="cart-item-brand text-small text-gray-400">
77+
${item.make}
78+
</div>
79+
</div>
80+
<div class="cart-item-counter w-48 flex item-center">
81+
<div data-id="${item.id}" class="cart-item-decrease text-gray-400 bg-gray-100 cursor-pointer rounded h-6 w-6 flex justify-center items-center hover:bg-gray-200 mr-2">
82+
<i class="fas fa-chevron-left fa-xs"></i>
83+
</div>
84+
<h4 class="text-gray-400">x${item.quantity}</h4>
85+
<div data-id="${item.id}" class="cart-item-increase text-gray-400 bg-gray-100 cursor-pointer rounded h-6 w-6 flex justify-center items-center hover:bg-gray-200 ml-2">
86+
<i class="fas fa-chevron-right fa-xs"></i>
87+
</div>
88+
</div>
89+
<div class="cart-item-total-cost w-48 font-bold text-gray-400">
90+
₹${item.price * item.quantity}.00
91+
</div>
92+
<div data-id="${item.id}" class="cart-item-delete w-10 font-bold text-gray-300 cursor-pointer hover:text-gray-400">
93+
<i class="fas fa-times"></i>
94+
</div>
95+
</div>
96+
`
97+
})
98+
document.querySelector(".cart-items").innerHTML = itemsHTML;
99+
createEventListeners();
100+
}
101+
// function generatedCartItems ends
102+
103+
// function createEventListeners
104+
function createEventListeners() {
105+
let decreaseButtons = document.querySelectorAll(".cart-item-decrease");
106+
let increaseButtons = document.querySelectorAll(".cart-item-increase");
107+
let deleteButtons = document.querySelectorAll(".cart-item-delete");
108+
109+
decreaseButtons.forEach((button) => {
110+
button.addEventListener("click", function(){
111+
decreaseCount(button.dataset.id);
112+
})
113+
})
114+
115+
increaseButtons.forEach((button) => {
116+
button.addEventListener("click", function(){
117+
increaseCount(button.dataset.id);
118+
})
119+
})
120+
121+
deleteButtons.forEach((button) => {
122+
button.addEventListener("click", function() {
123+
deleteItem(button.dataset.id);
124+
})
125+
})
126+
}
127+
// function createEventListeners ends
128+
129+
getCartItems();

0 commit comments

Comments
 (0)