Cómo calcular porcentajes

Clase 6 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Clase anteriorSiguiente clase

Juan Fernando Yepes Muñoz

student•

Funcionó 😂

Sergio Alejandro Saldaña Rangel

student•

Amé lo de aldulto independiente 😂

Jefferson Valencia

student•

Diego Vanegas

student•

Recordatorio: al momento de generar el evento para el calculo, usar el metodo preventDefault() para cancelar su acción por defecto(refrescar pagina) e imprima el total en elemento HTML de su preferencia 💚.

Codio JS💛

// selectors

let inputPrice = document.querySelector('.price');
let inputDiscount = document.querySelector('.amount');
const btn = document.querySelector('.btn__calc');
const result = document.querySelector('.result__amount');


btn.addEventListener('click', totalAmount);

function totalAmount(event) {
    console.log({event})
    // d = price * (100 - discount) / 100
    event.preventDefault();
    const price = inputPrice.value;
    const discount = inputDiscount.value;
    const newPrice = (price * (100 - discount)) / 100;
    result.innerHTML = 'Total Amount: $' + newPrice
}

Hector Maluy Fernandez

student•

Con respecto al preventDefault(), a mí se me ocurre simplemente añadir un botón de type button y listo.

<button type="button" onclick="calcularDescuento()">Calcular</button>

Axel Enrique Galeed Gutierrez

student•

Les comparto mi solución al reto de esté módulo. :D Cualquier comentario es bienvenido. Repositorio de GitHub

Red Robles

student•

Te quedó muy bien, buen trabajo!

Axel Enrique Galeed Gutierrez

student•

@redworld22, muchas gracias. 😁

Alejandro Manzo

student•

El mío es muy sencillo artísticamente pero agregue otro botón con la opción de aumentar el precio

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>porcentajes</title>
</head>
<body>
    <input type="number" class="numero" placeholder="Numero"><br><br>
    <input type="number" class="porcentaje" placeholder="Porcentaje a calcular"><br><br>

    <input type="button" value="aumentar" class="aumentar"><br><br>
    <input type="button" value="disminuir" class="disminuir"><br><br>

    <p class="resultado"></p>

    <script src="./main.js"></script>
</body>
</html>

let aumentar = document.querySelector(".aumentar");
let disminuir = document.querySelector(".disminuir");
let resultado = document.querySelector(".resultado");


aumentar.addEventListener("click", sumar);
disminuir.addEventListener("click", restar);

function sumar() {
    let numero = parseFloat(document.querySelector(".numero").value);
    let porcentaje = parseFloat(document.querySelector(".porcentaje").value);

    aumentarPrecio = (numero * (100 + porcentaje)) / 100;
    
    resultado.innerHTML ="Su nuevo precio con el aumento de " + porcentaje + "% es " + aumentarPrecio;
}

function restar() {
    let numero = parseFloat(document.querySelector(".numero").value);
    let porcentaje = parseFloat(document.querySelector(".porcentaje").value)

    disminuirPrecio = (numero * (100 - porcentaje)) / 100;

    resultado.innerHTML = "Su nuevo precio con el descuento de " + porcentaje + "% es " + disminuirPrecio;
}

Josue Cerron Tuesta

student•

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);

Daniel Jiménez Chaverri

student•

No se si era la manera que tenia que hacer lo del descuento, pero mi solucion es esta:

HTML

<code> 
<!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">
    <link rel="stylesheet" href="style.css">
    <title>Calcula tu descuento</title>
</head>
<body>
     <section class="main-containerz">
        <div class="disc-container">
            <h2>Calcula tu descuento</h2>
            <label>Ingresa el Precio</label>
            <input type="text" id="price">
            <label>Ingresa el descuento</label>
            <input type="text" id="discount">
            <button onclick="descuento()" id="btn">Generar Descuento</button>
            <span id="result"></span>
        </div>
     </section>
    <script src="discount.js"></script>
</body>
</html>

Codigo Javascript

<code> 

function descuento() {
    const price = document.querySelector('#price').value;
    const discount = document.querySelector('#discount').value;
    const result = document.querySelector('#result');
    const total = price*(100-discount)/100

    result.innerText = "El descuento sera de " + total;
}

Carlos Nicolas Gonzalez Cabrera

student•

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
}

Andres Trujillo

student•

Que lindo saludar y ser saludado dicen en mi pais Colombia 🤭 Les comparto la funcionalidad y el codigo:

<form action="">
        <input class="valorProducto" type="number" placeholder="Valor del producto">
        <input class="porcentajeDescuento" type="number" placeholder="Porcentaje de descuento">
        <button type="button">calcular</button>
    </form>

const valorProducto = document.querySelector('.valorProducto');
const porcentajeDescuento = document.querySelector('.porcentajeDescuento');
const btnDescuentoProducto = document.querySelector('button');

btnDescuentoProducto.addEventListener('click', calcularDescuentoProducto);

function calcularDescuentoProducto () {
    const precioFinal = valorProducto.value * (100 - porcentajeDescuento.value) / 100;
    return alert(`El valor del producto con descuento es de ${precioFinal}`);
}

Gustavo Liendo

student•

Le agregué unos pocos estilos de una forma rápida,

HTML

<body>
    <h2>Taller de Matemáticas con JS</h2>
    <p>Ingresa la cantidad y el porcentaje para optener el descuento y el precio total</p>

    <form id="Form">
        <input id="Precio" placeholder="Escribe el precio" type="number">
        <input id="Descuento" placeholder="Escribe el descuento sin &quot;&#37&quot;; " type="number">
        <button type="button" id="btnCalcular">Calcular</button>

        <p id="resultDescuento">Descuento total</p>
        <p id="result">Precio total</p>
    </form>

<script src="./math.js"></script>

const precioInicial = document.getElementById('Precio');
const porcentajeDeDescuento = document.getElementById('Descuento');
const btnCalcular = document.getElementById('btnCalcular');
const pResult = document.getElementById('result');
const pDescuento = document.getElementById('resultDescuento');

btnCalcular.addEventListener("click", calcularTotalDelPrecio);

function calcularTotalDelPrecio() {
    const porcenjateDelValor = ((100 - porcentajeDeDescuento.value) / 100);
    const precioConDescuento = precioInicial.value * porcenjateDelValor;
    const descuentoDelPrecio = precioInicial.value - precioConDescuento;
    console.log(porcenjateDelValor);
    console.log(porcentajeDeDescuento.value)
    console.log("precio con descuento " + descuentoDelPrecio);

    pDescuento.innerText = "El descuento total es de: " + descuentoDelPrecio.toFixed(2);
    pResult.innerText = "El precio final de tu producto es: " + precioConDescuento;
}

Kimberlyn Serrano

student•

Este es el resultado de sangre sudor y lagrimas 😣

<!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">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Calcula tu descuento</title>

    <style>
        :root {
        --lila: #B1AFFF;
        --cielo: #B8E8FC;
        --limon: #C8FFD4;
        --lima: #FDFDBD;
        --text-input-field: #8b8989;
        --sm: 14px;
        --md: 16px;
        --lg: 18px
        }
        body {
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Josefin Sans', sans-serif;
            margin-top: 100px;
 
        }
        .cupon-descuento {
            background: var(--limon);
            display: flex;
            border: 1px var(--lila);
            border-radius: 10px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 400px;
            height: 500px;
        }
        .cupon-descuento img {
            width: 250px;
            height: 200px;
            border-radius: 5px;
        }
        .title {
            text-align: center;
            font-size: var(--sm);
        }
        .botones {
            display: flex;
            flex-direction:row;
        }
        .botones button {
            background: var(--lila);
            border: transparent;
            border-radius: 5px;
            width: 150px;
            height: 50px;
            margin: 10px 10px;
            font-family: 'Josefin Sans', sans-serif;
            margin-top: 10px;
            
        }
        .price, .discount {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            margin-bottom: 0;
            margin-top: 5px;
        }
        .precio, .descuento {
            width: 150px;
            height: 20px;
            border: transparent;
            border-radius: 4px;
            margin-bottom: 10px;
            margin-top: 5px;
        }

    </style>
</head>
<body>
    <div class="cupon-descuento">
        <div class="title">
            <h2> Calcule el precio neto de su compra</h2>
        </div>
        <div>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7agkGdALMlUFh8RfdDy3vBx0x0kl8jh_G_A&usqp=CAU" alt="cupon de descuento">
        </div>
        <div class="price">
            <input class="precio" type="number" placeholder="$"></input> 
            <label for="precio"> Ingrese el precio de su compra</label>
        </div>
        <div class="discount">
            <input class="descuento" type="number" placeholder="%"> </input>
            <label for="descuento"> Ingrese el porcentaje de descuento de su cupón</label>
        </div>
        <div class="oferta">
        </div>
        <div class="botones">
            <button class="btn-calcular">Calcular</button>
            <button type="reset" class="btn-reset"> Reiniciar</button>
        </div>
    </div>
    
    
</body>
<script>
    const precio = document.getElementsByClassName('precio')[0];
    const descuento = document.getElementsByClassName('descuento')[0];
    const oferta = document.getElementsByClassName('oferta')[0];
    const btnCalcular = document.getElementsByClassName('btn-calcular')[0];
    const btnReset = document.getElementsByClassName('btn-reset')[0];

    const precioDescuento = precio.value*(100-descuento.value)/100;
    
    btnCalcular.addEventListener('click', calcularDescuento);
    btnReset.addEventListener('click', _ => {location.reload();})


    function calcularDescuento() {
        const precioDescuento = "El costo de su compra es de: $" + precio.value*(100-descuento.value)/100;
        const ofertaProducto = document.createElement('span');
        ofertaProducto.innerText = precioDescuento;
        oferta.appendChild(ofertaProducto)

        btnCalcular.disabled = true;
    }
</script>
</html>

PD: Gracias Teff por las enseñanzas 🤗

Alejandro Ramos

student•

no me lleve bien con los porcentajes en mi época de escolar xd

Orlando Rodriguez

student•

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>
    <h2>Estamos de ofertas!!!</h2>
    <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}`;
}

Stivenson David Mejia Palacios

student•

tuve que volver al curso practico de javascript básico y recordar un poco sobre la manipulación del Doom para darle el lado interactivo en una web, quedo genial :D

silfredo mario

student•

Otra forma de calcular descuento:

es dividir el porcentaje de descuento entre 100, para convertirlo en un decimal. Por ejemplo, si queremos calcular un descuento que es del 40%, debemos dividir 40 entre 100, y ya tenemos el decimal que es 0,4.

Una vez que tengamos este decimal, lo multiplicaremos por el descuento convertido en decimal por el precio original, y de esta manera conseguiremos saber el porcentaje de descuento.

Ejemplo: La prenda vale 120 y el descuento es del 40%

40 / 100 = 0,40

Descuento = precio * decimal Descuento = 120 * 0,40 = 48

Jhon Eduard Bocanegra Ortiz

student•

Esta fue mi solución:

santiago GRENAT SANTIAGO

student•

<code> 
const input = document.getElementById("calculo")
const input1 = document.getElementById("calculo1")
const boton = document.getElementById("btn_calcular")
const resultdo1 = document.getElementById("resultado")

function btnonclick (e) {
    e.preventDefault();
   const value1= parseInt(input.value)
   const value2=parseInt(input1.value)
   const resultado=( value1*(100-value2))/100
   //(p.value*(100-d.value))/100
   resultdo1.innerText = "el resultado es:"+resultado;
}

const form = document.getElementById("form");
const escuchar= form.addEventListener('submit',btnonclick, )

Efrén Ruíz Rubio

student•

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)}`;
	});
});

Jose Castillo

student•

HTML

<h2>Calculemos porcentajes de descuentos con JS</h2>
    <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>

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";
    }
     
}

Juan Diego Cabrera Remírez

student•

Preview

Mi codigo 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>Calculando porcentajes</title>
  <link rel="stylesheet" href="../styles/porcentaje.css">
</head>
<body>
  <section>
    <h2>Calcula tu proximo descuento</h2>
    <form>
      <label for="price">
        <span>Enter the price of the product</span>
        <input id="price" type="number">
      </label>
      <label for="discount">
        <span>Enter the product discount</span>
        <input id="discount" type="number">
      </label>
      <button>Calcular</button>
    </form>
    <div class="results">

    </div>
  </section>
  <script src="../js/porcentaje.js"></script>
</body>
</html>

Mi codigo JavaScript

const btn = document.querySelector('button')

btn.addEventListener('click', e => {
  e.preventDefault()
  const inputDiscount = document.querySelector('#discount').value
  const inputPrice = document.querySelector('#price').value

  if(inputPrice === '' || inputDiscount === '') {
    showResults('Revisa que los campos esten llenos')
  }
  else {
    const price = parseInt(inputPrice)
    const discount = parseInt(inputDiscount)

    const total = (price * (100 - discount)) / 100

    showResults(`${total}$`)
  }
})

function showResults(total) {
  const div = document.querySelector('.results')

  div.removeChild(div.firstChild)

  const p = document.createElement('p')
  p.innerText =  total
  
  div.appendChild(p)
}