added favorite on product-item

src/app/components/cart/cart.component.scss

@@ -112,8 +112,7 @@ img {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding-top: 2%;
+    padding: 5vh;
-    padding-bottom: 2%;
     box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
     transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 

src/app/components/product-item/product-item.component.html

@@ -1,4 +1,5 @@
 <div class="product-card">
+    <mat-icon class="favorite" color="warn" *ngIf="product.favorite">favorite</mat-icon>
     <div class="card-content">
         <div class="card-img-container">
             <img src={{product.url}} class="card-img" alt="{{product.name}}">
@@ -10,6 +11,7 @@
         </div>
         <div class="card-buttons">
             <button mat-raised-button color="primary" routerLink="/product/{{product.id}}">Details</button>
+            <button mat-raised-button color="primary" (click)="marked.emit(product)">Favorite</button>
         </div>
     </div>
 </div>

src/app/components/product-item/product-item.component.scss

@@ -1,6 +1,19 @@
 $small: 600px;
 $medium: 960px;
 
+.favorite {
+    position: absolute;
+    pointer-events: none;
+    cursor: not-allowed;
+    margin-top: 1%;
+    margin-left: 13%;
+    @media screen and (max-width: $medium) {
+        margin-left: 22%;
+    }
+    @media screen and (max-width: $small) {
+        margin-left: 33%;
+    }
+}
 
 .product-card {
     display: flex;
@@ -26,8 +39,6 @@ $medium: 960px;
     }
 }
 
-
-
 .card-details-container {
     height: max-content;
     padding-top: 15%;
@@ -63,9 +74,9 @@ $medium: 960px;
     padding-bottom: 5%;
     button {
         margin: 2%;
-        width: 50%;
+        width: 45%;
         @media screen and (max-width: $medium) {
-            width: 65%;
+            width: 50%;
         }
         @media screen and (max-width: $small) {
             width: 80%;

src/app/components/product-item/product-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Product } from 'src/app/models/product';
 
 @Component({
@@ -16,6 +16,9 @@ export class ProductItemComponent implements OnInit {
     description: "",
     quantity: 0
   } 
+  
+@Output() marked: EventEmitter<Product> = new EventEmitter;
+
   constructor() { }
 
   ngOnInit(): void {

src/app/components/product-list/product-list.component.html

@@ -1,4 +1,4 @@
 <div class="product-list-container">
-    <app-product-item *ngFor="let product of products" [product]="product" class="product-item-container"></app-product-item>
+    <app-product-item class="product-item-container" *ngFor="let product of products" [product]="product" (marked)="markAsFavorite(product)" ></app-product-item>
 </div>
 

src/app/components/product-list/product-list.component.ts

@@ -18,4 +18,9 @@ export class ProductListComponent implements OnInit {
     })
   }
 
+  markAsFavorite(product: any): void {
+    console.log(`${product.name} has been added to favorites.`);
+    product.favorite = true
+  }
+
 }

src/app/models/product.ts

@@ -4,5 +4,6 @@ export interface Product {
     price: number,
     url : string
     description: string,
-    quantity: number
+    quantity: number,
+    favorite?: boolean,
 }