Activity 31: Angular Ecommerce Product List

Create a List of Object Data Structures

product.service.ts

product.model.ts

product.component.ts

product.component.html

import { Injectable } from '@angular/core';
import { Product } from '../model/product.model';

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  private productList: Product[] = [
    {
      price: 590,
      image:
        'https://www.uniqlo.com/jp/ja/contents/feature/masterpiece/common/img/product/item_05_03_03.jpg?240829',
      name: 'Uniqlo Cotton Crew Neck T-Shirt',
      rate: 'Description: High-quality cotton, minimalist style, and available in multiple colors.',
}

,
{
  price: 2000,
    image:
        'data:image/jpeg;base64,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',
      name: 'Penshoppe Graphic Tee',
      rate: 'Description: Trendy graphic designs, perfect for casual wear.',
    },
    {
      price: 5500,
      image:
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVzvtdMAjiaHyPZ3AiQ-NXwKBUnXQA7Rb-uw&s',
      name: 'Giordano Round Neck Basic Tee  ',
      rate: 'Description: Premium fabric and a classic fit, known for durability and comfort.',
    },
    {
      price:9000,
      image:
        'https://down-ph.img.susercontent.com/file/099f92cbbd3f253a76d4c348b21ae53a',
      name: 'Hanford V-Neck Shirt (3-Pack)',
      rate: 'Description: Value pack of soft, breathable V-neck shirts, great for everyday use.',
    },
    {
      price: 2000,
      image:
        'https://shop.bench.com.ph/media/catalog/product/cache/009763e0cc55019733fb9a5ba619b171/b/o/bow0470gr4_fl_f_za.jpg',
      name: 'Bench Plain T-Shirt',
      rate: 'Description: Affordable plain shirts in a variety of colors and sizes.',
    },


  ];

  getProductList() {
    return this.productList;
  }
}

main {
  background-color: #31152b; /* Black background */
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(233, 217, 237, 0.1); /* White shadow for contrast */
  height: 100%;
  overflow-y: auto;
  display: grid;
  gap: 3rem;
  color: #e9cfcf; /* Red text color */
  transition: background-color 0.5s ease; /* Smooth background transition */
}

main:hover {
  background-color: #111; /* Slightly darker black on hover */
}

.product-card {
  border-radius: 1rem;
  padding: 1rem;
  height: auto;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1); /* White shadow for contrast */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease; /* Smooth scaling on hover */
}

.product-card:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.product-card__image__container {
  height: 15rem;
  border-radius: 1rem;
  overflow: hidden; /* Hide image overflow */
}

.product-card__image {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Cover the entire container */
  transition: transform 0.3s ease; /* Smooth scaling on hover */
}

.product-card__image:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

.product-card__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

h1 {
  font-size: 2.5rem; /* Larger font size */
  font-weight: bold; /* Bold text */
  text-align: center;
  color: #ff0000; /* Red text color */
  padding-bottom: 2rem;
}

.product-card__details__name {
  font-size: 1.5rem;
  padding: 0.5rem 0;
  color: #ff0000; /* Red text color */
  font-weight: bold; /* Bold text */
}

.product-card__details__description {
  line-height: 1.5rem;
  flex-grow: 1;
  color: #ff0000; /* Red text color */
}

.product-card__details__price {
  font-size: 1.5rem;
  padding: 1rem 0;
  color: #ff0000; /* Red text color */
  font-weight: bold; /* Bold text */
}

.button-container {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.button-cart,
.button-buy {
  background-color: #22191f; /* Red for buttons */
  color: white;
  font-size: 1.25rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Add transform transition */
  border: none; /* Remove default button border */
}

.button-cart:hover {
  background-color: #800000; /* Darker red on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.button-buy:hover {
  background-color: #800000; /* Darker red on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}


@media (max-width: 767px) {
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  main {
    grid-template-columns: repeat(5, 1fr);
  }
}

https://act31-maryjoy.web.app/