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:javascript:termekek_inline [2024/04/18 21:56] – létrehozva admin
+++ oktatas:web:javascript:termekek_inline [2024/04/19 20:15] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:javascript|< JavaScript]]
-====== Termékek inline ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2024, Sallai András
-  * Szerkesztve: 2024
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
-  * Web: https://szit.hu
-===== HTML =====
-<code html index.html>
-<!DOCTYPE html>
-<html lang="hu">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta charset="UTF-8">
-    <title>Sinto Project</title>
-    <link rel="stylesheet" href="bootstrap.css">
-    <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
-    <div class="container">
-      <h1>Termékek</h1>
-      <div id="pieceOfProducts"></div>
-      <div id="content" class="card-group">
-      </div>
-    </div>
-    <script src="app.js"></script>
-  </body>
-</html>
-</code>
-===== JavaScript =====
-<code javascript app.js>
-const doc = {
-    content : document.querySelector('#content'),
-    pieceOfProducts: document.querySelector('#pieceOfProducts')
-}
-const state = {
-    products: [],
-    cart: []
-}
-state.products = [
-    {id: 1, name: "cpu", price: 0.12 },
-    {id: 2, name: "egér", price: 0.12 },
-    {id: 3, name: "billentyűzet", price: 0.02 },
-    {id: 4, name: "HDD", price: 0.11 },
-    {id: 5, name: "sDD", price: 0.13 },
-    {id: 6, name: "CD-ROM", price: 0.12 },
-    {id: 7, name: "monitor", price: 0.12 },
-    {id: 8, name: "pendrive", price: 0.12 },
-    {id: 9, name: "elem", price: 0.12 },
-    {id: 10, name: "tároló", price: 0.12 },
-    {id: 11, name: "cpu", price: 0.12 },
-]
-var cards = ''
-state.products.forEach( prod => {
-    const card = `
-    <div class="card m-2" style="min-width: 14rem; max-width: 14rem">
-      <img src="https://picsum.photos/150" class="card-img-top" alt="...">
-      <div class="card-body">
-        <h5 class="card-title">${prod.name}</h5>
-        <p class="card-text">${prod.price} (LIT)</p>
-        <div class="row">
-            <div class="col">
-                <button class="btn btn-primary"
-                data-id="${prod.id}"
-                onclick="addToCart(this)"
-                >Kosárba</button>
-            </div>
-            <div class="col">
-                <input type="number"
-                class="form-control" value="1">
-            </div>
-        </div>
-      </div>
-    </div>
-    `
-    cards += card
-})
-doc.content.innerHTML = cards
-function addToCart(source) {
-    console.log(source.dataset.id)
-    console.log(source.parentNode.parentNode.children[1].children[0].value)
-    const item = {
-        productId: source.dataset.id,
-        piece: source.parentNode.parentNode.children[1].children[0].value
-    }
-    state.cart.push(item)
-}
-function refreshPage() {
-    location.reload()
-}
-</code>