Quiero renderizar un template en cadena de una serie de datos que ingreso a partir de un formulario, este es mi código javascript.
Con el código actual, me crea el template, pero cuando quiero agregar más valores este reemplaza los existentes, pero no se crea un segundo template.
Aquí obtengo mis elementos HTML de mi archivo. $form es donde ingreso los datos a mostrar y $containerProduct donde quiero renderizar mi cadena de templates
const $containerProduct = document.getElementById('product-list');
const $form = document.getElementById('product-form');
Ahora bien, defino una clase Product para manipular los datos de ingreso desde el form.
class Product {
constructor(name, price, count) {
this.name = name
this.price = price
this.count = count
}
};
la function templateProduct me va permitir renderizar mi template con los datos
function templateProduct({ name, price, count }) {
return `
<div class="card text-center mb-4">
<div class="card-body">
<strong>Producto name: </strong> ${name}
<strong>Price: </strong> ${price}
<strong>Year: </strong> ${count}
<a href="#" class="btn btn-danger" name="delete">Delete</a>
</div>
</div>
`;
};
Aquí recibo el objeto product para poder iterar cada uno de sus valores y pasarlos como argumentos a las función templateProduct y container es donde voy a renderizar cada producto agregado desde el form.
function createProduct(product, container) {
const productList = product.map(data => {
return templateProduct(data);
})
//const HTMLString = productList
container.innerHTML = productList;
};
Aquí, a través del evento submit empezaría a ejecutar todo mi código. Asigno las propiedades al objeto product y también crear un array de objetos para poder iterarlos en la función createProduct
//DOM event
document.getElementById('product-form')
.addEventListener('submit', (e) => {
const $name = document.getElementById('name').value;
const $price = document.getElementById('price').value;
const $count= document.getElementById('count').value;
const product = new Product($name, $price, $count);
const arrayProduct = [];
const data = arrayProduct.push(product);
createProduct(arrayProduct, $containerProduct);
});
Aquí también dejo mi código html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Product App</title>
<link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Products App</a>
</nav>
<div class="container" id="container">
<!-- APPLICATION -->
<div id="App" class="row pt-5">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Add Add A Product</h4>
</div>
<form id="product-form" class="card-body">
<div class="form-group">
<input type="text" id="name" placeholder="Product Name" class="form-control">
</div>
<div class="form-group">
<input type="number" id="price" step="0.01" placeholder="Product Price" class="form-control">
</div>
<div class="form-group">
<input type="text" id="count" placeholder="Quantity" class="form-control">
</div>
<input type="submit" value="Save" class="btn btn-primary btn-block">
</form>
</div>
</div>
<div id="product-list" class="col-md-8"></div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>