Mark up
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jdenticon.min.js" integrity="sha384-l0/0sn63N3mskDgRYJZA6Mogihu0VY3CusdLMiwpJ9LFPklOARUcOiWEIGGmFELx"
crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>
<script src="./firebase.js"></script>
<script src="./header.js"></script>
<link rel="stylesheet" href="style.css">
<title>amazon 2.0</title>
</head>
<body class="text-blue-900">
<div class="bg-white w-full">
<!-- Header -->
<div class="header bg-gray-900 flex items-center">
<div class="logo w-1/5 h-16 ml-10">
<img class="w-28 h-16 object-contain" src="https://www.pinclipart.com/picdir/big/57-576184_view-our-amazon-storefront-amazon-logo-white-png.png" alt="imageNotFound">
</div>
<!-- Search Bar -->
<input class="w-30 h-9 bg-gray-800 border border-gray-500 border-opacity-75 rounded-l-xl px-3 text-white ml-6 focus:outline-none placeholder-white" type="text" id="search" placeholder = "Search...">
<!-- Categories dropdown -->
<div class="categories h-9 w-30 bg-gray-800 border border-gray-500 border-opacity-75 text-white flex items-center px-3">
categories <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<!-- search icon -->
<div class="search-icon h-9 w-10 bg-yellow-500 rounded-r-xl flex items-center justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<!-- Right icons -->
<div class="icons text-white flex items-center ml-auto mr-8 w-48 h-16 justify-around">
<!-- heart icon -->
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<!-- Cart icon -->
<a href="cart.html">
<div class="cart-icon h-10 w-10 bg-yellow-500 rounded-xl flex justify-center items-center text-xs text-gray-600 relative">
<div class="cart-item-number absolute -top-1 -right-1 h-4 w-4 rounded-full bg-white flex justify-center items-center text-black">1</div>
<svg class = "h-4 w-4"xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
</svg>
</div>
</a>
<!-- bell icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
</svg>
<svg class=" rounded h-12 w-12" width="80" height="80" data-jdenticon-value="Abdullah"></svg>
</div>
</div>
<!-- Main section -->
<div class="main h-screen flex bg-gray-100">
<!-- Left hand side bar -->
<div class="main-sidebar w-1/5 h- bg-gray-900 border-gray-700 border-t-2 p-6 ">
<!-- Child categories bar for optimal padding -->
<div class="sidebar-categories">
<!-- The Categories button -->
<div class="text-yellow-500 cursor-pointer flex mb-3 p-2 bg-gray-700 rounded-lg font-bold">
<!-- Grid icon -->
<span class="w-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
</svg>
</span>
<!-- Text -->
<span>Categories</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2 ">
<span class="w-8"></span>
<span>Echo and alexa</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2">
<span class="w-8"></span>
<span>Kindle</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2">
<span class="w-8"></span>
<span>Books</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2">
<span class="w-8"></span>
<span>Electronics</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2">
<span class="w-8"></span>
<span>Home and Garden</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2">
<span class="w-8"></span>
<span>Fashion</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2 font-bold rounded-lg hover:bg-gray-700 mb-4">
<span class="w-8 flex justify-center items-center"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="percent" class="svg-inline--fa fa-percent w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M112 224c61.9 0 112-50.1 112-112S173.9 0 112 0 0 50.1 0 112s50.1 112 112 112zm0-160c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zm224 224c-61.9 0-112 50.1-112 112s50.1 112 112 112 112-50.1 112-112-50.1-112-112-112zm0 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zM392.3.2l31.6-.1c19.4-.1 30.9 21.8 19.7 37.8L77.4 501.6a23.95 23.95 0 0 1-19.6 10.2l-33.4.1c-19.5 0-30.9-21.9-19.7-37.8l368-463.7C377.2 4 384.5.2 392.3.2z"></path></svg></span>
<span>Sell on Amazon</span>
</div>
<div class="side-bar-main-category text-white cursor-pointer flex p-2 mb-2 font-bold rounded-lg hover:bg-gray-700">
<span class="w-8 flex ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
<span>Help</span>
</div>
</div>
</div>
<!-- main section of cart -->
<div class="main-section flex-1 p-6 bg-white">
<!-- Heading -->
<h1 class="text-gray-400 font-bold text-3xl mb-6">Shopping Cart</h1>
<!-- headings of tables -->
<div class="table-titles flex font-bold text-gray-400">
<h2 class="flex-grow">Product</h2>
<h2 class="w-48">Count</h2>
<h2 class="w-48">Total Cost</h2>
<span class="w-10"></span>
</div>
<!-- cart items -->
<div id = 'cart-items' class="cart-items this mt-5">
<!-- -->
<div class="cart-item flex items-center pb-4 border-b border-gray-100">
<!-- Product img -->
<div class="cart-item-image w-40 h-24 bg-white p-4 rounded-lg">
<img class="w-full h-full object-contain" src="https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6418/6418603_sd.jpg" alt="">
</div>
<!-- Product detail -->
<div class="cart-item-detail flex-grow">
<div class="cart-item-title font-bold text-sm text-gray-600">Apple MacBook pro 13,3</div>
<div class="cart-item-brand text-sm text-gray-400">
Apple
</div>
</div>
<div class="cart-item-counter w-48 flex items-center">
<!-- Left chrvron -->
<div class="chevron-left cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<!-- number of items -->
<h4 class="text-gray-400">x1</h4>
<!-- right chevron -->
<div class="chevron-right cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Product Price -->
<div class="cart-item-total-cost w-48 font-bold text-gray-400">
$1,149.00
</div>
<!-- Delete item icon -->
<div class="cart-item-delete w-10 font-bold text-gray-300 cursor-pointer hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<!-- Second item -->
<div class="cart-item flex items-center pb-4 border-b border-gray-100">
<!-- Product img -->
<div class="cart-item-image w-40 h-24 bg-white p-4 rounded-lg">
<img class="w-full h-full object-contain" src="https://m.media-amazon.com/images/I/61-PblYntsL._AC_SL1500_.jpg" alt="">
</div>
<!-- Product detail -->
<div class="cart-item-detail flex-grow">
<div class="cart-item-title font-bold text-sm text-gray-600">Nintendo Switch</div>
<div class="cart-item-brand text-sm text-gray-400">
Nintendo
</div>
</div>
<div class="cart-item-counter w-48 flex items-center">
<!-- Left chrvron -->
<div class="chevron-left cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<!-- number of items -->
<h4 class="text-gray-400">x1</h4>
<!-- right chevron -->
<div class="chevron-right cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Product Price -->
<div class="cart-item-total-cost w-48 font-bold text-gray-400">
$290.00
</div>
<!-- Delete item icon -->
<div class="cart-item-delete w-10 font-bold text-gray-300 cursor-pointer hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
</div>
<div class="complete-order flex justify-end mt-10">
<!-- total cost -->
<div class="total-cost mr-7">
<h2 class="text-gray-400">Total Cost</h2>
<div class="total-cost-number text-3xl font-bold text-gray-600">
$1,439.00
</div>
</div>
<div class="complete-order-button w-56 flex items-center justify-center bg-yellow-500 rounded text-white cursor-pointer hover:bg-yellow-600">
Complete Order
</div>
</div>
</div>
</div>
</div>
<script src="./cart.js"></script>
</body>
</html>
Script
var firebaseConfig = {
apiKey: "AIzaSyDJhP_i1oa9MUCAIrSsQosxuJIa3dkyouE",
authDomain: "test-4ce90.firebaseapp.com",
projectId: "test-4ce90",
storageBucket: "test-4ce90.appspot.com",
messagingSenderId: "524556826840",
appId: "1:524556826840:web:8eb8c922aa49c10e397fad",
measurementId: "G-6Z6PZF2X8W"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
var db = firebase.firestore();
function getCartItem() {
db.collection("cart-item")
.onSnapshot((Snapshot) => {
let totalCount = 0;
Snapshot.forEach((doc) => {
totalCount += doc.data().quantity;
});
setCartCounter(totalCount);
});
}
getCartItem();
function setCartCounter(totalCount) {
document.querySelector(".cart-item-number").innerText = totalCount;
}
function getCartItems(){
let cartItems = [];
db.collection('cart-item').onSnapshot((snapshot)=>{
snapshot.docs.forEach(doc => {
cartItems.push({
id : doc.id,
...doc.data()
});
});
})
generateCartItems(cartItems);
console.log(cartItems)
}
function generateCartItems(cartItems){
let itemHTML = "";
cartItems.forEach((item) =>{
console.log('Came in the loop');
itemHTML +=`
<div class="cart-item flex items-center pb-4 border-b border-gray-100">
<!-- Product img -->
<div class="cart-item-image w-40 h-24 bg-white p-4 rounded-lg">
<img class="w-full h-full object-contain" src="${item.image}" alt="">
</div>
<!-- Product detail -->
<div class="cart-item-detail flex-grow">
<div class="cart-item-title font-bold text-sm text-gray-600">${item.name}</div>
<div class="cart-item-brand text-sm text-gray-400">
${item.make}
</div>
</div>
<div class="cart-item-counter w-48 flex items-center">
<!-- Left chrvron -->
<div class="chevron-left cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<!-- number of items -->
<h4 class="text-gray-400">x${item.quantity}</h4>
<!-- right chevron -->
<div class="chevron-right cursor-pointer text-gray-400 bg-gray-100 rounded w-6 h-6 flex justify-center items-center hover:bg-gray-200 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Product Price -->
<div class="cart-item-total-cost w-48 font-bold text-gray-400">
$${item.price*item.quantity}
</div>
<!-- Delete item icon -->
<div class="cart-item-delete w-10 font-bold text-gray-300 cursor-pointer hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
`
})
document.querySelector('#cart-items').innerHTML = itemHTML;
}
getCartItems();
my javascript file I am Fetching data from firebase and pushing it one by one in an array. Now if i console log the whole array it show the whole array like normal as bellow
[H]Snapshot of Out put1
But as in generateCartItems() i loop it it wont happen and if i console log the array’s element it will show undefined Kindly tell what is the issue here Thankyou very much