No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Análisis: cómo calcular porcentajes y descuentos

10/24
Recursos

Aportes 95

Preguntas 8

Ordenar por:

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

Yo usando una buena “Regla de 3”…

No tiene nada que ver pero no sé si sepan que los porcentajes se pueden invertir 😃

Es lo mismo el 15% de 80 que el 80% de 15

La formula para hacerlo escalable, es decir para cualquier precio y cualquier descuento es:

(precio * (100 - descuento))/100

¿Cómo obtener el descuento con solo una multiplicación?

.
Woow, al ver esta clase me confundí, muchas operaciones. Lo mas importante que tienes que saber es que si hay un 25% de descuento, tu puedes multiplicar el precio original por 0.75 y así vas a obtener el precio después del descuento.
.
Esto funciona porque al multiplicar por 0.75, le estamos restando el 25% al valor inicial, sin embargo, necesitamos decirle a JavaScript que haga eso. Eso lo hacemos de la siguiente manera.

var descuentoPorcentaje = 25; // Medido en %
var precioInicial = 4827; // Precio antes del descuento


var decimal = descuentoPorcentaje / 100; //0.25
var precioDespuesDescuento = precioInicial * (1 - decimal);

En la variable descuentoPorcentaje por cualquier numero que quieras y siempre va a funcionar

Así quedo mi programa para calcular los descuentos 😄

Ejemplo practico 😃

¿Cuánto es el 12% de 333?
.
Solo debes hacer lo siguiente multiplicas el valor total por el porcentaje que te dieron en termino de decimales.
.

333 * 0.12 = 39.96

En este caso para la operación el 12% equivale lo mismo que multiplicar por 0.12
.
Y simplemente restas ese valor de la operación al valor inicial.
.

333 - 39.96 = 293.04  

.
293…04 seria el valor si un producto que vale 333 tienen un descuento del 12%. Y asi mismo con cualquier otro valor y porcentajes que te den. 😃

Para hacer una regla de tres, multiplicamos en diagonal y dividimos en horizontal
.

Recuerden 📌📌

Creo que cada vez me gusta mas este curso, de los mejores que tiene Platzi para los que iniciamos con JavaScript. 😃

Done 😎

También se puede hacer esto para calcular el descuento del precio: Precio/100 * (100 - Descuento)

Es otra manera matemática de hacerla 😌 .

Otra forma de hacerlo es

const Descuentodel15% = Precio*0.85

Mi aporte ya implementandolo en 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>Descuentos y porcentajes</title>
</head>
<body>
    <h1>Porcentajes y descuentos</h1>
    <section>
        <form action="">
            <h2>Se calculara el descuento indicado de un precio</h2>
            <fieldset>
                <label for="precio">Ingresa el precio</label>
                <input type="number" step="0.1" id="precio">
                <br><br>
                <label for="descuento">Ingresa el porcentaje de descuento (numero entero):</label>
                <input type="number" id="descuento">
                <br><br>
                <button type="button" onclick="calcular()">Calcular</button>
                <br><br>
                <h3 id="resultado"></h3>
            </fieldset>
        </form>
    </section>
    <script src="descuento.js"></script>
</body>
</html> 

descuento.js:

function calcularDescuento(precio, descuento) {
    let montoDescuento = precio * (descuento/100);
    return precio - montoDescuento;
}

// Interaccion con HTML
function calcular() {
    let precio = parseFloat(document.getElementById('precio').value);
    let descuento = parseFloat(document.getElementById('descuento').value);
    precioFinal = calcularDescuento(precio, descuento);
    document.getElementById('resultado').innerText = precioFinal;
}

O también de la siguiente manera:

120 * 0.85 = 102

Por ende, debemos restar 15 - 100, nos dará negativo, pero podemos usar valor absoluto para que sea indiferente la posición. Esto nos dará 85 y con dividirlo por 100 ya tenemos 0.85.

Con la anterior obtenemos el precio final, pero si queremos cuanto le quita al precio neto sería multiplicar 0.15 por 120, dándonos 18.

Me anime a hacer el taller de una vez, aun quiero ver como se muestran textos en el html desde javascript así que lo modificare.
Por el momento muestro el precio final con un alert 😅

LEs comparto el repositorio por si les sirve mi código: https://github.com/iJCode1/Curso-Practico-de-JavaScript

Resultado

dejo mi codigo

const calcular = (precio, descuento) => {
    let pagar = precio * ((100 - descuento) / 100) 
    console.log(pagar)
}

calcular(200, 10)

si usan Visual Studio con el short-cut Alt + L + O les abrira el documento HTLM en live server, asi es mas comodo y evitan tener que recargar la pag

Cada vez me gusta mas JS

mi funtion arrow quedo asi

const discount = ( price, descuento ) => (price * (100 - descuento)) / 100

La función desde Typescript 🙂

function descuento(precio: number, desc: number): string {
  return `El precio con descuento es de: ${precio * (100 - desc) / 100}`;
}

En vez de buscar la ruta y pegarla en el navegador tienen 2 opciones :

*Ir a la carpeta del archivo y darle doble click al archivo HTML.

*descargar la extension en vscode “Live Server” y darle click derecho al archivo html en vscode “Open with live server” lo que les permite editar el codigo en vivo.

Para crear archivos con extensiones distintas pero de igual nombre por la Terminal

touch NAME.{EXTENSION1,EXTENSION2}
//Example
touch descuentos.{html,js}

La infaltable regla de 3

P * ( PRECIO - DESCUENTO) /100

Here we go guys!!! I have a lot of discounts 🤑💲

Pienso que podemos realizarlo de manera más sencilla asi:

Sabemos que si esta dentro de parentesis, se ejecuta PRIMERO esa operación, entonces (100 - descuento) * Precio / 100 nos dará el precio

Primero preguntamos al usuario el precio y el descuento.
Después le mostramos el precio final 😄

//Calcular descuento
var precio = prompt("¿Qué precio tiene el artículo?");
var descuento = prompt("¿Qué descuento tiene el artículo?");

function calcularDescuento (precio, descuento) {
  var precioFinal = precio - (precio * (descuento / 100));
  return `El precio final aplicándole el descuento es de ${precioFinal}€`
};

calcularDescuento (precio, descuento);

function getPriceWithDiscount(price, discount){
    let toSub = price * (discount /100)
    let finalPrice = price - toSub;
    return finalPrice;
}

Pues yo siempr he hecho asi jeje

precioFinal = precio - (descuentoEnPorcentaje) x precio

precioFinal = 120$ - (15/100)*120$ = 102$

Una forma sencilla de hacerlo 😄

const descuentosMachine = (precio,descuento) => (precio *(100 - descuento))/100
console.log(descuentosMachine(100,15))

Podemos crear una función flecha que resuelve este problema en tan solo una línea de código

const discountPrice = (price, discount) => (price * (100 - discount)) / 100;
console.log(discountPrice(120, 15));

10. Análisis: cómo calcular porcentajes y descuentos

En este taller se creará un programa que realiza descuento a productos a facturar.

Análisis para realizar programa de porcentajes y descuentos

  • Primer paso: definir las fórmulas de los porcentajes y descuentos
  • Segundo paso: implementar la fórmula en JavaScript
  • Tercer paso: crear funciones
  • Cuarto paso: integrar JS con HTML

Definiendo fórmulas de porcentajes y descuento

La formula para hacerlo escalable, es decir para cualquier precio y cualquier descuento es:


const _PORCENTAJE_TOTAL_ = 100;
const _PORCENTAJE_DESCUENTO_ = 15;

let precio_producto = 100;
let precio_con_descuento = 0;

precio_con_descuento =
	(precio_producto * (_PORCENTAJE_TOTAL_ - _PORCENTAJE_DESCUENTO_)) / 100;

console.log(`${precio_producto}`);
console.log(`${precio_con_descuento}`);

Se me ocurre utilizar esta funcion por asi decirlo
x = producto - (producto*0.descuento)

les comparto como me quedo

function descuentoPorcentaje(descuento){
    return descuento /100;
}

function descuentototal(precio,descuento){
    const valordescuento = precio * descuento;
    return precio - valordescuento ;
}


function calcularDescuento(){
    const result = document.getElementById("answer");

    const input = document.getElementById("precio");
    const precio = input.value;

    const input1 = document.getElementById("descuento");
    const descuento = input1.value;

    const descto = descuentoPorcentaje (descuento);
    
    const descuentoFinal = descuentototal (precio, descto );
    result.innerText = `El precio del producto aplicado el descuento es: ${descuentoFinal}`

Una vez se tenga la formula de cada caso, pej: el triangulo isocele o en este caso calcular el descuento pues se traduce a codigo y listo.
(precio * (100 - descuento))/100

$120 * 0.15 = $18 (descuento obtenido)
$120 * 0.85 = $102 (neto a abonar)

Me resultó siempre más sencillo así. Espero que le sirva a alguien!

asi me quedo hasta figuras geometricas

var precioCompra = 100;

var porcDto = 15;

function desc () {
var res = (precioCompra * porcDto);
return precioCompra - res/100;
}

desc();

Lo hice así sencillo… espero le guste a alguien

<!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=“styleDesc.css”>
<title>Calculador de descuentos</title>

</head>

<body>
<header>
<h1>Precios</h1>
</header>
<div class=“container”>
<form>
<label></label>
<div>Productos</div>
<input type=“text” id=“li”>
<div>Precio</div>
<input type=“number” id=“price”>
<div>Descuento</div>
<input type=“number” name=“porc” id=“desc”>
<div>Total</div>
<input type=“button” id=“button” value=“Aplicar”>
<input type=“text” name=“total” id=“total”>
</form>
</div>

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

</body>

</html>


.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

const price = document.getElementById(‘price’);
const desc = document.getElementById(‘desc’);
const total = document.getElementById(‘total’);
const button = document.getElementById(‘button’);

function parseNum§ {
var entero = parseInt(p.value);
return entero;
}

parseNum(price);

function descu() {
var res = (parseNum(price) * parseNum(desc) / 100);
return (parseNum(price) - res);
}

button.addEventListener(‘click’, () => {

if (parseNum(price) == "" || parseNum(desc) == "") {
    total.value = "Sin datos"
} else {

    total.value = descu();
}

})

Hice esta pequeña función para calcular el monto del descuento y el monto total a pagar teniendo como parámetros descuento y precio. 🤓

// calcula el monto de descuento 
const montoDescuento = (descuento, precio) => ( descuento/100 ) * precio
// calcula el monto que vas a pagar "precio - descuento"
const descuentoTotalPago = (descuento, precio) => precio - (( descuento/100 ) * precio)
// Tambien podemos combinar funciones
const descuento = ( descuento, precio ) => precio - ( montoDescuento( descuento, precio ))

![](

Este por este dividido este xd

Bueno tambien hay otras formas de hacerlo.

Como multiplicar el valor original por el porcentaje que queremos saber.
Ejemplo:
120 * 0,85 = 102

o

85/100*120= 102

El de abajo es literalmente lo de arriba pero con un paso más.

A veces hay que idear el problema y pensar como realizarlo. Eso es lo genial de Javascript y que cada uno tiene una forma diferente de hacerlo 😃

Aca un ejemlo 😃

var d= prompt("¿Cual es su descuento?")
var base= prompt("¿Cual es el precio del producto?")

function descuento(descuento){
  const resta= (100 - descuento)/100;
  const desc= resta * base;

  return console.log(desc)
}

descuento(d)

Y asi me traeria el resultado 😛

Está es la manera de como realice la función

function calcularDescuentos(precio, descuento){
    let precioFinal = precio * ((100 - descuento) / 100);
    return precioFinal;
}

touch documentos.{html,js}
Para crear los archivos en un solo comando

Para los que quieren saber de donde sale la formula:
Partiendo de la rela de 3, si el precio es $120 y deseo saber cuando queda con el descuento del 15% entonces:

pero, por que 85 ?
como el porcentaje es 15% y quiero quitarselo al precio, entonces

reemplazando por letras para hacerlo mas generico quedaria asi

Y ya para los que les gusta un poco mas las matematicas y lo quieren en su minima expresion:

Usando los valores decimales es mas facil 😃

function discount25 (price){

    let total = Math.abs((price * 0.25) - price) ;

    return total;

}

También pueden optar esta fórmula más rápida de descuento: var precioConDescuento = precioNormal * (1 - d/100);

Aporto la forma más fácil que yo conozco de calcular el porcentaje sin mucho calculo y es simplemente:

total = 100 - (100 * 0.15) 

donde 100 es el precio, y el 0.15 el descuento, si es 20% sería 0.2, si es 35% sería 0.35 y asi sucesivamente
Y si quieren saber solo cuanto es el descuento simplemente

descuento = 100 * 0.15 // el resultado será 15

Me parece mucho mas sencillo verlo así:

Si ud va a sacar el 20% de un valor, simplemente debe multiplicar el valor por 0.80, si va a sacar el 15% de un valor pues multiplica el valor por 0.75…

Ejemplo: sacar el 35% de 130:

130*0.65 = 84.5

Para abrir los archivos de manera más rapida, van a la parte izquierda en VSC | Explorer
seleccionan el archivo que quieren abrir y le dán click derecho y
Reveal in Explorer
O tambien pueden oprimir Shift + Alt + R

yo haciendolo:

PrecioTotal:120$-(120*0.15)=102$

:
XDDD

Les comparto otra forma de hacerlo y lo explico brevemente:

Primero dividimos entre 100 el porcentaje del descuento
//Con esto obtendremos un decimal por ejemplo: 0,15, si este numero lo multiplicamos por un numero sacaremos el 15% de ese numero.
Luego ese resultado le restamos con 1
//Al hacer esto nos dara el numero menos el porcentaje del descuento osea, el precio final a pagar.
Por ultimo se multiplica por el precio en negativo para que el resultado sea positivo.
// - x - = +

function Formuladesc(Porc, precio){
    const Porcent= Porc / 100 - 1;
    const preciofinal = Porcent * (-precio);
    return preciofinal
    
}
function CalcPrec(){
    const inputP = document.getElementById("Precio")
    const valueP = inputP.value
    const inputD = document.getElementById("desc")
    const valueD = inputD.value;

    const Preciof = Formuladesc(valueD,valueP);

}

funciona!! se es una pavada para muchos, pero por poco que sea es bueno aprender

function aplicarDescuento(precio, descuento) {
    const precioFinal = (precio * (100 - descuento)) /100;
    return ` aplicando descuentos  del ${descuento}% el precio final es de $${precioFinal} `
}
aplicarDescuento(120, 15);

Una forma rápida de hacer esto es multiplicando por valores inferiores a 1; como los porcentajes los podemos ver como número entre 0,0 y 1,0; de manera tal que 10% será 0,1; 18% será 0.18; 33.33% será 0,3333 y así con los demás valores

function descuento(precio, descuento){
return precio *(100 - descuento) /100
}

Para dar un salto de linea en HTML ocupa:

<br>

al ponerla al final de tu línea, el siguiente elemento se coloca abajo

una forma de hacerlo tambien es precio-(precio*(descuento/100)) para cualquier descuento de l vida

// calcular porcentajes

function calcularPorcentaje (precio, descuento){
  const finalPrice = precio / 100 * descuento;
  console.log(finalPrice + '$')
}

calcularPorcentaje (350, 25);

//87.5$

creo que la formula no es la correcta la regla de 3 para hallar el porcentaje seria precio*descuento/100
para descontar a precio solo seria restar el descuento-precio

osea ((precio*descuento)/100)-precio

Soy el unico que le sacaba el 1% a todo y ya despues multiplicaba XD?

Mas fácil, imposible! 🙃🙃🙃

por favor dinos ya cuando saldrá DUNE

Porciento, es la cantidad que tenemos de algo por cada 100 unidades, por eso se divide entre 100 en la formula de esta clase

Para calcular el porcentaje de algo sólo multiplicas el valor por el porcentaje dividido 100 ejemplo:

Precio = 120;
descuento = 15%;
120*0.15 = 18 (aquí tenemos el descuento)

¿De donde salió el 0,15? (Funciona con cualquier %)
es el 15% dividido 100 = 0.15

Una vez tenemos el descuento lo restamos al precio inicial. Teniendo ambos valores podemos indicar al usuario cuánto pagará y también cuánto se está ahorrando.
El producto valía = 120;
con 15% descuento para 18 menos;
total a pagar= 102;

Pueden usar un live-server para que puedan abrir los docs directos desde la consola. desde la terminal instalan
npm install -g live-server

ya instalado solo usan este comando en la consola,

live-server --open=rutaDelArchivo/index.html

así cuando hacen cambios, se actualiza automáticamente la pestaña

function calcularPrecioConDescuento(precio, descuento) {
    return precio - ( precio * (descuento/100));
}

siempre será bueno saber la forma larga y explicita de hacer las cosas…
aqui el desuento es el 15%
100 = (100 * ((100-15)/100)) = 85
precio = (precio * (100-descuento)/100)

y la forma mas secilla
100 = 100 * (0.85) = 85
precio = precio * (0.85)

la conclusión es que el 0.85 viene de la primera formula solo que ya de manera lógica se puede asumir que si tienes 15 por ciento de descuento es equivalente a multiplicar por 0.85…

Con este curso, me tuve que meter más a Git ya lo había dejado de lado.

Pienso escribir así el descuento

<code> 
 const desct= 50
 const price= 1200 //precio
 const fact= 0.01*desct
 const total= price - (price*fact) 
// 1200 - (0.01*50)

Una forma con la que me queda mas claro es primero dividir el precio entre 100 y el resultado es 1% del total, con ese resultado solo multiplicamos por el porcentaje que queramos saber y ya👍

A mi me funciona muy bien esto también…

const InputPrice = document.getElementById("InputPrice").value;

En vez de …

const InputPrice = document.getElementById("InputPrice");
  const priceValue = InputPrice.value;

si asistí a primaria mano, no es necesario tanta explicación, ofende

Los conceptos me quedaron claros y con la práctica ni que decir. Juan David Castro explicas muy bien.

Para los que se les dificulta pueden utilizar la formula.

x(1-%).
Donde:
x = Precio Original
% = El porcentaje en centésimas.

Pd: Para los que no entendieron el %, imaginen que quieren obtener el 17% de un producto de Q90, pues utilizan la formular de esta Manera: 90(1-0.17) = Q74,7.

Profe quiero tener tu cerebro, sos re bocho!

Otra forma:
(-descuento / 100) * precio + precio

Ha sido una explicación tan LARGAAAA y simple, que me he sentido hasta un poco insultado 😦.

por aquí les dejo mi forma de calcular el isósceles a ver qué tal me comentan por favor var l1 = 6; var l2 = 6; var b = 8; function isoseles(l1, l2, b) { if (l1 == l2) { lados = l1; altura = (l1 * l1) - (b * b) / 4; altura = Math.sqrt(altura); } else { altura = console.log("las medidas no corresponden a un isoseles"); } return altura; }

no funciona mi platzi, puedo entrar y mirar todas las paginas pero los videos no se reproducen

const calcOffer = (price, discount) => price / 100 * (100 - discount)

muy buena clase aplica conocimientos de html css y java ❤️

Vamos con este nuevo reto

Únicamente aplicar la Regla de 3, matemática básica

Es más directo si aplicamos la formula de esta manera:

(15 * 120) / 100 nos dirá cuanto es el 15% de 120 que es 18.

Para mayor facilidad de compresión pueden leerlo como: el 15% de 120 / 100 es: 18

BUena clase

Lo resolvi de esta manera

function discountPrice(price, discount){
    return price * (discount/100); //Se divide en 100 para pasar el descuento a porcentaje
}

function finalPrice(price, discount){
    return price*((100-discount)/100); //Hago una resta de 100 - el descuento para 
                                       //invertir el porcentaje y dejar el porcentaje 
                                       //restante del precio inicial
}


//Aquí interactuamos con el html

function calculateDiscount(){
    const inputDiscount = document.getElementById("InputDiscount");
    const valueDiscount = inputDiscount.value;

    const inputPrice = document.getElementById("InputPrice");
    const valuePrice = inputPrice.value;

    const discount = discountPrice(valuePrice, valueDiscount);
    const discountRes = document.getElementById("dResult");
    discountRes.innerHTML = discount.toFixed(2) + "$";

    const price = finalPrice(valuePrice, valueDiscount);
    const priceRes = document.getElementById("pfResult");
    priceRes.innerHTML = price.toFixed(2) + "$";
}

Un tip para esto, también es multiplicar X * 0.Y, y nos dará la cantidad que tenemos que descontar.
ej:
120 * 0.15 = 18
120 - 18 = 102 -> Pagamos 102 😄

Esto nos puede ser útil para mostrarle al cliente cuanto se ahorrara y mostrarle su precio final 😄

y mi codigo js fue:

function precioFinal(precio, porcentajeDescuento){
    const preciofinal = (precio * (100 - porcentajeDescuento))/100;
    return preciofinal;
}

function precioResultante() {
    const labelprecio = document.getElementById("Precio");
    const labeldescuento = document.getElementById("Descuento");

    const precio = Number(labelprecio.value);
    const descuento = Number(labeldescuento.value);
    const textoRespuesta = document.getElementById("respuesta");
    textoRespuesta.textContent = "El precio final a pagar es de " + precioFinal(precio, descuento) + " Euros";
} 

Los que saben la regla de 3 dominan el mundo !!! jejejejeej

En resumen, la fórmula que está aplicando en el ejemplo del producto cuyo valor es 120, para sacar el 15% de lo que se tendría que pagar es:

120 - (120 * 0.15) = 102

const d10 = document.getElementById("input1");
const d2 = document.getElementById("input2");

function alo (){
   
    const q = d10.value;
    const x = d2.value;
    const price = q;
    const discounts= x;
    const operation = price * (100 - discounts) / 100;
    alert("El precion inicial es " + price + " con el descuento queda en " + operation + " lo que significa que has recibo un " + discounts+ "% de descuento.");
}
function a (q, w) {
  const price = q;
  const consta= 100;
  const desc = w;
  const result = price * (consta - desc / 100;
  console.log(result);

}
a ();
<form>
            <label for="InputPrice">Escribe el precio de tu producto: $</label>
            <input id="InputPrice" type="number" /><br>

            <label for="InputDiscount">Escribe el descuento de tu producto: %</label>
            <input id="InputDiscount" type="number" />

Sencillo, pero reto cumplido!!!

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>Porcentajes y descuentos</title>
</head>
<body>
        <h1>
            Porcentajes y descuentos
        </h1>
    
    <script src="/descuentos.js"></script>
</body>
</html>