Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:reszponziv [2025/06/05 21:56] – [Angularban] admin
+++ oktatas:web:reszponziv [2025/06/27 14:45] (aktuális) – [Bevezetés] admin
@@ Sor 10: / Sor 10: @@
 ===== Bevezetés =====
-Hogyan tegyük reszponzívvá az olyan adatokat, amelyeket általában táblázatban
+Hogyan tegyük reszponzívvá az olyan weblapokat, ahol az adatokat táblázatban
 vagy táblázatszerűen jelenítünk meg?
@@ Sor 188: / Sor 188: @@
 </code>
+<code javascript app.js>
+const cars = [
+  {
+    id: 1,
+    plate: 'ABC123',
+    name: 'Ford',
+    model: 'Mustang',
+    year: 2022
+  },
+  {
+    id: 2,
+    plate: 'DEF456',
+    name: 'BMW',
+    model: 'X5',
+    year: 2021
+  },
+  {
+    id: 3,
+    plate: 'GHI789',
+    name: 'Toyota',
+    model: 'Camry',
+    year: 2020
+  },
+  {
+    id: 4,
+    plate: 'JKL012',
+    name: 'Honda',
+    model: 'Civic',
+    year: 2019
+  },
+  {
+    id: 5,
+    plate: 'MNO345',
+    name: 'Nissan',
+    model: 'Altima',
+    year: 2018
+  }
+]
+const template = (car) => {
+  return `
+    <div class="card m-3 text-center" style="width: 18rem;">
+      <div class="card-body">
+        <h3 class="card-title">${car.name}</h3>
+        <p class="card-text">
+          ${car.model}
+        </p>
+        <p class="card-text">
+          ${car.year}
+        </p>
+        <p class="card-text">
+          ${car.plate}
+        </p>
+      </div>
+    </div>
+  `
+}
+const carsContainer = document.getElementById('cars')
+cars.forEach(car => {
+  carsContainer.innerHTML += template(car)
+})
+</code>