Cześć. Jak się ma do dobrych praktyk taki kod? Mam wątpliwość, że może nie jest to najlepsze rozwiązanie, ale z drugiej strony nie znam alternatywy dla tego rozwiązania oprócz użycia Reacta i składni JSX, których nie mogę użyć w tym kodzie.
const createProductCard = (amount, save) => {
const productsList = document.querySelector('.products-list-section');
// CREATING ELEMENTS
const wrapper = document.createElement('div')
const topDiv = document.createElement('div')
const topDivFirstChild = document.createElement('div')
const topDivFirstChildParagraph = document.createElement('p')
const topDivImage = document.createElement('img')
const topDivSecondChild = document.createElement('div')
const topDivSecondChildDiv = document.createElement('div')
const topDivSecondChildDiv2 = document.createElement('div')
const image = document.createElement('img')
const bottomDiv = document.createElement('div')
const bottomDivFirstChild = document.createElement('div')
const bottomDivSecondChild = document.createElement('div')
const bottomDivThirdChild = document.createElement('div')
// PLACING THEM IN RIGHT PLACE
wrapper.appendChild(topDiv)
topDiv.appendChild(topDivFirstChild)
topDivFirstChild.appendChild(topDivImage)
topDivFirstChild.appendChild(topDivFirstChildParagraph)
topDiv.appendChild(topDivSecondChild)
topDivSecondChild.appendChild(topDivSecondChildDiv)
topDivSecondChild.appendChild(topDivSecondChildDiv2)
wrapper.appendChild(image)
wrapper.appendChild(bottomDiv)
bottomDiv.appendChild(bottomDivFirstChild)
bottomDiv.appendChild(bottomDivSecondChild)
bottomDiv.appendChild(bottomDivThirdChild)
// ADDING CLASSES AND ATTRIBUTES
wrapper.setAttribute('class', 'product-card-wrapper')
topDiv.setAttribute('class', 'product-card-top-section')
bottomDiv.setAttribute('class', 'product-card-bottom-section')
topDivImage.setAttribute('src', 'https://image.flaticon.com/icons/svg/626/626440.svg')
// ADDING CONTENT INTO ELEMETNS
topDivFirstChildParagraph.innerText = 'sztuk: ' + amount
topDivSecondChildDiv.innerText = 'OSZCZEDZASZ: '
topDivSecondChildDiv2.innerText = save + 'zł'
productsList.appendChild(wrapper)
}
Gustawiec<div>sztuk: ${amount}</div>
albo użyj ` albo + jak Ci wygodniej.GustawiecGustawiec