Felhasználói eszközök
oktatas:web:javascript:termekek_inline
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.
| Előző változat mindkét oldalon Előző változat | |||
|
oktatas:web:javascript:termekek_inline [2024/04/19 20:15] admin eltávolítva |
— (aktuális) | ||
|---|---|---|---|
| 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 | ||
| - | |||
| - | |||
| - | ===== 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> | ||
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
