Cómo calcular porcentajes

5/27
Recursos

Aportes 6

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Mi aporte (hay mucho que limpiar. Se aceptan sugerencias.) :

/******************* PRECIOS Y DESCUENTOS***********************/
const app = document.getElementById('app');
const br = document.createElement('br');

/* Creating a label and an input. */
const label1 = document.createElement('label');
label1.innerHTML = '<b>Price:</b> ';
const input1 = document.createElement('input');
input1.setAttribute('type', 'number')

/* Creating a label and an input. */
const label2 = document.createElement('label');
label2.innerHTML = '<b>Discount:</b> ';
const input2 = document.createElement('input');
input2.setAttribute('type', 'number');

const btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.innerText = 'Get Discount';

const p = document.createElement('p');
p.innerHTML = '<b style="color:blue">Total payment:</b> '

btn.addEventListener('click', () => {
    const span = document.createElement('span');
    let discount = (input1.value * (100 - input2.value)) / 100;
    span.innerText = `$${discount}`;
    p.appendChild(span);
});

app.appendChild(label1);
label1.appendChild(input1);
// app.appendChild(br);

app.appendChild(label2);
label2.appendChild(input2);

app.appendChild(btn);
app.appendChild(br);

app.appendChild(p);

Funcionó 😂

Mi intento para hacerlo “dinámico” y que el precio final se actualice cada vez que el usuario cambia el precio o el descuento:

HTML

<form action="" class="percentages__form">
					<label for="price">Precio completo</label>
					<input
						class="input"
						min="0"
						id="price"
						type="number"
						placeholder="Escribe el precio"
						value="100"
					/>
					<label for="price">Descuento</label>
					<input
						class="input"
						min="0"
						max="100"
						id="discount"
						type="number"
						placeholder="Escribe el descuento"
						value="0"
					/>
					<!-- <button id="btnClick" type="button">Calcular precio</button> -->
				</form>
				<span id="result"></span>

JavaScript

const result = document.querySelector("#result");
const inputPrice = document.querySelector("#price");
const inputDiscount = document.querySelector("#discount");

result.innerText = `Precio con descuento: ${100}`;

const calculateDiscount = (price, discount) => {
	return (price * (100 - discount)) / 100;
};

document.querySelectorAll(".input").forEach((element) => {
	element.addEventListener("input", () => {
		result.innerText = `Precio con descuento del ${
			inputDiscount.value
		}%: ${calculateDiscount(inputPrice.value, inputDiscount.value)}`;
	});
});

Aquí mi aporte

<form action="" method="post">
            <label for="InputPrice">Escribe el precio de tu producto:</label>
            <input id="InputPrice" type="number" placeholder="Inserte números..">
            
            <label for="InputDiscount">Escribe el descuento de tu producto:</label>
            <input id="InputDiscount" type="number" placeholder="Inserte números..">
            
            <button type="button" onclick="onClickButtonPriceDiscount()">
                Calcular el precio con descuento
            </button>

            <p id="resultPrice"></p>

        </form>
function calcularPrecioConDescuento(precio, descuento){
    const porcentajePrecioConDescuento = 100 - descuento
    const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100

    return precioConDescuento
    
}

function onClickButtonPriceDiscount(){
    const InputPrice = document.getElementById("InputPrice")
    const priceValue = InputPrice.value

    const InputDiscount = document.getElementById("InputDiscount")
    const discountValue = InputDiscount.value
    
    const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue)

    const resultPrice = document.getElementById("resultPrice")
    resultPrice.innerText = "El precio con descuento son: $" + precioConDescuento
}

HTML

<h1>Calculemos porcentajes de descuentos con JS</h1>
    <div class="container">
        <p>Ingresa el precio del producto, y el descuento quye quieres aplicar en los siguientes campos:</p>
        <label for="price">Precio</label>
        <input type="number" id="price">
        <label for="desc">% Descuento</label>
        <input type="number" id="desc">
        <input type="button" value="Calcular" class="buttom">
    </div>

JS

const price = document.querySelector('#price');
const descuento = document.querySelector('#desc');
const buttom = document.querySelector('.buttom');
const container = document.querySelector('.container');

buttom.addEventListener('click', calcDescuento);
const resultP= document.createElement('p');
resultP.classList.add('discount');
container.appendChild(resultP);


function calcDescuento(){ 
    resultP.innerHTML='';
    if(price.value !== '' && descuento.value !== ''){
        let precio = parseInt(price.value);
        let desc = parseInt(descuento.value);
        let resultadoDescuento = precio * (100 - desc) / 100;
               
        resultP.innerHTML = `Aplicando el descuento el monto es de ${resultadoDescuento}$`;
    }
    else{
        resultP.innerHTML = "Ingresa los datos correspondientes";
    }
     
}

Reto cumplido
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Saca tu cuenta!</title>
</head>
<body>
    <h1>Estamos de ofertas!!!</h1>
    <label for="monto">Introduzca el monto</label>
    <input type="number" name="pruebaaa" id="monto">
    <label for="descuento">Descuento</label>
    <input type="number" id="descuento">
    <button type="submit" id="btn">Enviar</button>
    <p id="text">Muy sencillo, coloca el monto, luego abajo coloca el descuento y pulsa el boton de Enviar.</p>
    <script src="./retoPorcentaje.js"></script>
</body>
</html>

JavaScript

const monto = document.getElementById("monto");
const descuento = document.getElementById("descuento");
const btn = document.getElementById("btn")
const texto = document.getElementById("text");


btn.addEventListener("click", cuentaTotal)


function cuentaTotal(){
    const total = (monto.value) - (monto.value * (descuento.value / 100));
    console.log(total);
    texto.innerText = `El monto total a pagar es de: $${total}`;
}