szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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>