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_rugalmasan [2024/04/19 20:15] (aktuális) admin létrehozva |
||
---|---|---|---|
Sor 1: | Sor 1: | ||
+ | [[oktatas:web:javascript|< JavaScript]] | ||
+ | |||
+ | ====== Termékek inline rugalmasan ====== | ||
+ | |||
+ | * **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 | ||
+ | |||
+ | |||
+ | ===== Bevezetés ===== | ||
+ | |||
+ | Egy példa helye: | ||
+ | * https://github.com/oktat/termekek.git | ||
+ | ===== 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> | ||