Activity 31: Angular Ecommerce Product List

Component HTML

<div class="header">BarbieHub</div>
<div class="product container">
    <div class="productcontainer" *ngFor="let toys of toys">
        <div class="productimg">
            <img [src]="toys.img" alt="">
        </div>

        <div class="productinfo">
            <h3 class="producttitle">{{ toys.name }}</h3>
            <p class="productprice">{{ toys.price | currency }}</p>
            <p class="productdescription">{{ toys.details }}</p>
            <div class="button-container">
                <button class="btn add-to-cart">Add to Cart</button>
                <button class="btn buy-now">Buy Now</button>
            </div>
        </div>
    </div>
  </div>

Component CSS

body {
  background-color: #f4c2c2; 
  font-family: 'Arial', sans-serif;
}

.product.container {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  gap: 20px; 
  padding: 20px; 
}

.productcontainer {
  background-color: #fff; 
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  overflow: hidden; 
  transition: transform 0.3s; 
}

.productcontainer:hover {
  transform: scale(1.05); 
}

.productimg img {
  width: 100%; 
  height: 250px; 
}

.productinfo {
  padding: 15px; 
  text-align: center; 
  font-size: 10px;
}

.producttitle {
  font-size: 1.5em; 
  color: #d5006d; 
}

.productprice {
  font-size: 1.2em; 
  color: #ff4081; 
}

.productdescription {
  font-size: 0.9em; 
  color: #555; 
}

.button-container {
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 10px; 
}

.header{
  font-size: 200px;
  font-weight: bold;
  color: #a0004d;
  text-align: center;
}

.btn {
    padding: 10px 15px; 
    border: none; 
    border-radius: 50px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 10px;
}

.add-to-cart {
    background-color: #ff66b2; 
    color: white; 
}

.add-to-cart:hover {
    background-color: #ff3385; 
}

.buy-now {
    background-color: #d5006d; 
    color: white; 
}

.buy-now:hover {
    background-color: #a0004d; 
}

Component Typescript

import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { NgModel } from '@angular/forms';
import { Product } from './act31-model';
import { ProductService } from '../act31-product-service';


@Component({
  selector: 'app-act31-product',
  templateUrl: './act31-product.component.html',
  styleUrl: './act31-product.component.css'
})
export class Act31PRODUCTComponent {
  toys: Product[]=[];
  constructor(private productService:ProductService){

  }
  ngOnInit(): void {
    this.toys = this.productService.getToys();
  }
}

Model Typescript

export interface Product{
    id:number;
    name:string;
    details:string;
    img:string;
    price:number;
}

Service Typescript

import { Injectable } from "@angular/core";
import { Product } from "./act31-product/act31-model";

@Injectable({
providedIn: "root", 
})
export class ProductService{
    private toys: Product[]=[
        {
            id: 1,
            name: 'Doll House',
            details:'A simple barbie doll house',
            img:'dollhouse.jpg',
            price: 1000
        },
        {
            id: 2,
            name: 'Chucky Doll',
            details:'A Doll that could unalive you.',
            img:'Chuckyy.jpg',
            price: 7000
        },
        {
            id: 3,
            name: 'Rose Toy',
            details:'A very useful toy, good for self satisfaction',
            img:'rosetoy.jpg',
            price: 100
        },
        {
            id: 4,
            name: 'Sexy Toy',
            details:'Dont have a girlfriend? Go get this product!',
            img:'Sexydoll.png',
            price: 3000
        },
        {
            id: 5,
            name: 'Lip stick',
            details:'A lipstick for your other lips',
            img:'lipstick.jpg',
            price: 500
        },
        {
            id: 6,
            name: 'Paper Doll',
            details:'Not your typical paper doll',
            img:'Paper_Doll.png',
            price: 300
        },
        {
            id: 7,
            name: 'Toy Phone',
            details:'Ayeheyhayahy Im your little butterfly',
            img:'phone.jpg',
            price: 100
        },
        {
            id: 8,
            name: 'Silicone Doll',
            details:'Cute silicone doll with curse',
            img:'siliconedoll.jpg',
            price: 1200
        },
        {
            id: 9,
            name: 'Spooky Doll',
            details:'Ancient doll from my grandmas attic',
            img:'spookydoll.jpg',
            price: 1500
        },
        {
            id: 10,
            name: 'Ugly Doll',
            details:'Doll that will match your face.',
            img:'uglydoll.jpg',
            price: 800
        }
    ];

    getToys():Product[]{
        return this.toys;
    }
}

Sample Output

GitHub Link: https://github.com/Sukucee/Angular31.git

Firebase Deployment: https://acrivity31.web.app/