Activity # 31 Angular E -commerce product list

app.component.html

<style>

body {
      background-color: #f2f2f2;
    }

    h1 {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      margin-top: 10px;
    }

    .input-container {
      margin-bottom: 20px;
    }

    input[type="text"] {
      width: 10%;
      height: 30px;
      padding: 10px;
      margin-top:  50px;
      border: none;
      border-radius: 4px;
      background-color: #f2f2f2;
      color: #0a0303;
      margin-left: 30px;
      top: 10%;
    }
button {
    width: 20%;
    height: 40px;
    padding: 10px;
    border: none;

    border-radius: 4px;
    background-color: #62c3fcb2;
    color: #fff;
    cursor: pointer;
    margin-left: 30px;
    position: relative; 
    bottom: 10%;
    margin-top: 20px;

  }
  button:hover{
  background: #f2f2f2;
  color: #333;
  }

  button a {
      text-decoration: none;
      color: #333;
      font-size: 1rem;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-family: 700;
  }
</style>


<main>



        <h1 class="heading">Ecommerce Product List</h1>

        <button><a  routerLink ='/product'>Product-list</a></button>



    <router-outlet></router-outlet>
</main>

product.ts

export interface Product {
    id: number;
    name: string;
    price: number;

  }

product.component.html

<div class="product-list">
    <div class="product-item" *ngFor="let product of products">
      <h3>{{ product.name }}</h3>
      <p>Price: ₱{{ product.price }}</p>
      <button (click)="addToCart(product)">Add to Cart</button>
    </div>
  </div>

css style

<style>

.product-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  gap: 1.5rem; 
  padding: 1rem;
}


.product-item {
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  align-items: center; 
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f2e8cf;
  transition: transform 0.3s ease;
}

.product-item h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.product-item p {
  font-size: 1rem;
  margin: 0.5rem 0;
}

.product-item button {
  background-color: #3a5a40;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.product-item button:hover {
  background-color: #dad7cd;
  color: #000;
}

.product-item:hover {
  transform: scale(1.05); 
}

@media (max-width: 1024px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr; 
  }

  .product-item {
    padding: 0.8rem;
  }

  .product-item h3 {
    font-size: 1rem;
  }

  .product-item p {
    font-size: 0.9rem;
  }
}

productlist.services

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root', // Registers the service in the root injector
})
export class ProductService {
  private products = [
    { id: 1, name: 'Sonny headset pink', price: 5200 },
    { id: 2, name: 'Leopard print glasses', price: 70 },
    { id: 3, name: 'Cami dress', price: 300 },
    { id: 4, name: 'Smiski iphone 13 case', price: 300 },
    { id: 5, name: 'Sunflower crochet bandana', price: 200 },
    { id: 6, name: 'Vintage aesthetic totebag for women', price: 800 },
    { id: 7, name: 'Makeup brush set', price: 340 },
    { id: 8, name: 'Robux gift card', price: 1000 },
    { id: 9, name: 'Getto cat', price: 2000000000 },
    { id: 10, name: 'Mang thomas spicy', price: 50 },

  ];

  constructor() {}

  getProducts() {
    return this.products;
  }
}

Desktop

Tablet

Mobile

Github repo: https://github.com/Koronuma4Dev/Angular-Ecommerce-Product-List

firebase: