Angular library grid - Activity#32

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">Library List</h1>

  <button><a  routerLink ='/booklist'>Book-list</a></button>



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

book.model.ts

export interface Book {
    id: number;
    name: string;
    price: number;
    imageUrl: string;
  }

booklist.html

<style>

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.book-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  background-color: #f4f4f4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.book-card img {
  width: 100px;
  height: auto;
  margin-bottom: 12px;
}

.book-card h3 {
  margin: 0 0 8px;
}

.book-card button {
  margin-top: auto;
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.book-card button:hover {
  background-color: #45a049;
}

@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) {
  .book-grid {
    grid-template-columns: 1fr; 
  }

  .book-card {
    padding: 0.8rem;
  }

  .book-card h3 {
    font-size: 1rem;
  }

  .book-card p {
    font-size: 0.9rem;
  }
}
</style>
<div class="book-grid">
    <div class="book-card" *ngFor="let book of books">
      <img [src]="book.imageUrl" alt="{{ book.name }}" class="book-image" />
      <h3>{{ book.name }}</h3>
      <p>Price: ₱{{ book.price }}</p>
      <button (click)="addToLibrary(book)">Add to Library</button>

    </div>
  </div>

book.component.ts

import { Component, OnInit } from '@angular/core';
import { Book } from './book.model';
import { BookService } from '../../Services/book.service';

@Component({
  selector: 'app-booklist',
  templateUrl: './booklist.component.html',
  styleUrl: './booklist.component.css'
})
export class BookComponent implements OnInit {
  books: Book[] = [];

  constructor(private bookService: BookService) {}

  ngOnInit(): void {
    this.books = this.bookService.getBooks();
  }

  addToLibrary(book: Book): void {
    alert(`${book.name} has been added to your library!`);
  }
}

book.service

import { Injectable } from '@angular/core';
import { Book } from '../component/booklist/book.model';
@Injectable({
  providedIn: 'root',
})
export class BookService {
  private books: Book[] = [
    {
      id: 1,
      name: 'The Great Gatsby',
      price: 650,
      imageUrl: 'https://i.pinimg.com/enabled_lo_mid/736x/9b/7d/ff/9b7dffb5b6539ca32f3c75d60ef7c697.jpg',
    },
    {
      id: 2,
      name: '1984',
      price: 520,
      imageUrl: 'https://i.pinimg.com/736x/47/ec/55/47ec55cb4487080ea75a344228297ad2.jpg',
    },
    {
      id: 3,
      name: 'To Kill a Mockingbird',
      price: 400,
      imageUrl: 'https://i.pinimg.com/enabled_lo_mid/736x/44/11/d7/4411d7d78f84ea7c99ac6d5039ac9fe6.jpg',
    },

    {
      id: 4,
      name: 'To Methamorphosis',
      price: 500,
      imageUrl: 'https://i.pinimg.com/736x/ab/65/42/ab654223ac93b5cf303b1ca62db0543d.jpg',
    },

    {
      id: 5,
      name: 'First lies win',
      price: 600,
      imageUrl: 'https://i.pinimg.com/736x/48/23/73/4823737fb4e52d26b4221bade734d664.jpg',
    },

    {
      id: 6,
      name: 'The storm we made',
      price: 200,
      imageUrl: 'https://i.pinimg.com/736x/6c/9a/53/6c9a536adf8ba77bef4a248ec954c321.jpg',
    },

    {
      id: 7,
      name: 'Mercury',
      price: 200,
      imageUrl: 'https://i.pinimg.com/736x/af/12/26/af1226f815bdc54eee5256959076ff3a.jpg',
    },

    {
      id: 8,
      name: 'Atomic habits',
      price: 200,
      imageUrl: 'https://i.pinimg.com/enabled_lo_mid/736x/20/d1/a6/20d1a65703a999cd0b39f87d7bb41c1d.jpg',
    },

    {
      id: 9,
      name: 'Heartless',
      price: 400,
      imageUrl: 'https://i.pinimg.com/736x/32/7b/3d/327b3d63355c84c2bca5f4a5678e6755.jpg',
    },

    {
      id: 10,
      name:'Baka Sakali',
      price: 400,
      imageUrl: 'https://i.pinimg.com/736x/fe/81/7f/fe817f610816266a73ab355394ae1c5e.jpg',
    },
  ];

  getBooks(): Book[] {
    return this.books;
  }
}

DESKTOP

TABLET

MOBILE

GITHUB REPO:https://github.com/Koronuma4Dev/Angular-book-grid

FIREBASE REPO: