Sinto Project

[[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 =====





  
    
    
    Sinto Project
    
            
  
  
    
      Termékek

===== JavaScript =====


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 = `
    
      
      
        ${prod.name}
        ${prod.price} (LIT)        
        
        
            
                
            
            
                
            
        
      
    
    `
    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()
}