{tilesNeeded}

Number of columns: $

{numColumns}

Number of lines: $

{numRows}

Reseller price: ${prices.resellerPrice} €

Suggested retail price: ${prices.suggestedPrice} €

`; renderTileGrid(numColumns, numRows, tileLength, tileHeight, selectedReference); resultDiv.style.display = "block"; } function renderTileGrid(columns, rows, tileLength, tileHeight, backgroundUrl) { const tileGrid = document.getElementById('tileGrid'); tileGrid.style.gridTemplateColumns = `repeat($ {columns} , $ {tileLength} px)`; // Columns = width tileGrid.style.gridTemplateRows = `repeat($ {rows} , $ {tileHeight} px)`; // Lines = length tileGrid.innerHTML = ''; for (let i = 0; i < columns * rows; i++) { const tile = document.createElement('div'); tile.style.backgroundImage = `url($ {backgroundUrl} )`; tile.title = `Length: ${tileLength.toFixed(1)} cm, Height: ${tileHeight.toFixed(1)} cm`; tileGrid.appendChild(tile); } tileGrid.style.display = 'grid'; }