<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Productos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.product {
margin-bottom: 10px;
}
#productList {
margin-top: 20px;
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<h1>Lista de Productos</h1>
<div>
<label for="productName">Producto:</label>
<input type="text" id="productName">
</div>
<div>
<label for="productPrice">Precio:</label>
<input type="number" id="productPrice">
</div>
<div>
<label for="productQuantity">Cantidad:</label>
<input type="number" id="productQuantity">
</div>
<button onclick="addProduct()">Agregar Producto</button>
<div id="productList">
<h2>Productos</h2>
<textarea id="productText" rows="10" cols="50" readonly></textarea>
</div>
<script>
function addProduct() {
var productName = document.getElementById("productName").value;
var productPrice = document.getElementById("productPrice").value;
var productQuantity = document.getElementById("productQuantity").value;
if (productName && productPrice && productQuantity) {
var total = productPrice * productQuantity;
var productLine = `${productName}. ${productQuantity}u. $${total}($