FIrestore Product Card test

by Alex Cowan

HTML

<!DOCTYPE html>
<html lang="en">
  <html>

    <!DOCTYPE html>
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>

    <script>
      var config = {

        apiKey: "AIzaSyDWNTqk_QnOwEKBzab5FD9NUsDC5xxDQ7Q",
        authDomain: "brandefy-user-database.firebaseapp.com",
        databaseURL: "https://brandefy-user-database-default-rtdb.firebaseio.com",
        projectId: "brandefy-user-database",
        storageBucket: "brandefy-user-database.appspot.com",
        messagingSenderId: "862207940177",
        appId: "1:862207940177:web:0a48e25f8d2947c1f38a70",
        measurementId: "G-N7MTFJGHK9"
      };

      // Initialize Firebase
      firebase.initializeApp(config);
      const firestore = firebase.firestore();

    </script>

    <!DOCTYPE html>
    <html>

      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Your Website Title</title>
      </head>

      <body>
        <nav>
          <a href="#">Home</a>
          <a href="#">Products</a>
          <a href="#">About Us</a>
          <a href="#">Contact</a>
        </nav>
        <header>
          <h1>Your Brand Name</h1>
        </header>



        <section>
          <h2>Welcome to Our Website</h2>
          <p>This is a simple website template. Customize it to fit your needs.</p>
        </section>
        <section2>
          <h2>Welcome to Our Website</h2>
          <p>This is a...

CSS

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 header {
   background-color: #303;
   color: #fff;
   padding: 15px;
   text-align: center;
 }

 nav {
   background-color: #555;
   padding: 10px;
 }

 nav a {
   color: #fff;
   text-decoration: none;
   padding: 10px;
   margin: 0 10px;
   font-weight: bold;
 }

 section {
   padding: 20px;
   background-color: #555;
 }

 section2 {
   font-family: Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
 }

 .product-card {
   border: 1px solid #ddd;
   padding: 20px;
   margin: 10px;
   text-align: center;
   max-width: 200px;
 }

 .product-image {
   max-width: 100%;
   height: auto;
 }

 footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 10px;
   position: fixed;
   bottom: 0;
   width: 100%;
 }

JavaScript

// Initialize Firebase
console.log(localStorage.getItem("pn"));
// Create a Firestore reference
const db = firebase.firestore();
// Function to fetch products from Firestore
async function fetchProducts() {
  const productContainer = document.getElementById('product-container');
  console.log("the productContainer is" + productContainer);

  try {
    const productsSnapshot = await db.collection('products').get();

    productsSnapshot.forEach((doc) => {
      const productData = doc.data();
      const productCard = createProductCard(productData);
      productContainer.appendChild(productCard);
    });
  } catch (error) {
    console.error('Error fetching products: ', error);
  }
}

// Function to create a product card
function createProductCard(productData) {
  const productCard = document.createElement('div');
  productCard.className = 'product-card';

  const productName = document.createElement('h3');
  productName.textContent = productData.name;

  const productPrice = document.createElement('p');
  productPrice.textContent = `Price: $${productData.price}`;

  const productImage = document.createElement('img');
  productImage.src = productData.img;
  productImage.alt = productData.name;
  productImage.className = 'product-image';

  productCard.appendChild(productName);
  productCard.appendChild(productPrice);
  productCard.appendChild(productImage);

  return productCard;
}

// Fetch and display products when the page loads
window.onload = fetchProducts;