Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Belajar JavaScript

JavaScript : Membuat Kartu

Posting Komentar

Struktur Folder

.
└── membuat_kartu/
    ├── card.html
    └── assets/
        └── gambar/

Membuat File

Berikut adalah isi dari file card.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta viewport="width=device-width, initial-scale=1.0">
  <title>Card</title>

  <style>  
    body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
      margin: 0;
      padding: 20px;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 5px;
    }

    .card {
      background: #fff;
      width: calc(16.66% - 5px);
      text-align: center;
      display: flex;
      flex-direction: column;
    }

    .card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    .card h3 {
      font-size: 16px;
      margin: 10px 0 5px;
      padding: 0 8px;
    }

    .price {
      color: grey;
      font-size: 16px;
      margin-bottom: 5px;
    }

    .card p.desc {
      padding: 0 10px;
      margin: 0 0 10px;
      font-size: 14px;
      color: #555;

      white-space: nowrap;    
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
	
    .card button {
      background: #000;
      color: #fff;
      padding: 10px;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    .card button:hover {
      opacity: 0.8;
    }

    @media (max-width: 1200px) {
      .card { width: calc(25% - 10px); }
    }

    @media (max-width: 800px) {
      .card { width: calc(33.33% - 10px); }
    }

    @media (max-width: 500px) {
      .card { width: calc(50% - 10px); }
    }
  </style>
</head>

<body>

  <h2>Produk Pilihanmu</h2>

  <div class="container" id="productContainer"></div>

  <script>
    // DATA PRODUK
    const products = [
      { img: "alamat_gambar", title: "Produk 1", price: "Rp 20.000", desc: "Deskripsi produk" },  
    ];

    const container = document.getElementById("productContainer");
	
    products.forEach(p => {
      container.innerHTML += `
        <div class="card">
          <img src="${p.img}" alt="">
          <h3>${p.title}</h3>
          <p class="price">${p.price}</p>
          <p class="desc">${p.desc}</p>
          <button>Detail</button>
        </div>
      `;
    });
  </script>

</body>
</html>

Posting Komentar untuk "JavaScript : Membuat Kartu"