Cómo calcular porcentajes

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Contenido del curso

Introducción

1
¿Ya tomaste el Curso Práctico de JavaScript?
08:20 min

Matemáticas en JavaScript

Porcentajes

Estadística básica

Análisis de salarios

Próximos pasos

30
Toma el Taller Práctico de JavaScript: Videojuegos
04:27 min

Tomar examen

Cómo calcular porcentajes

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Comentarios98

Juan Fernando Yepes Muñoz

Estudiante

Hace 4 años

Sergio Alejandro Saldaña Rangel

Estudiante

Hace 4 años

Jefferson Valencia

Estudiante

Hace 4 años

Diego Vanegas

Estudiante

Hace 4 años

Hector Maluy Fernandez

Estudiante

Hace 4 años

Axel Enrique Galeed Gutierrez

Estudiante

Hace 4 años

Red Robles

Estudiante

Hace 2 años

Axel Enrique Galeed Gutierrez

Estudiante

Hace 2 años

Alejandro Manzo

Estudiante

Hace 4 años

Josue Cerron Tuesta

Estudiante

Hace 4 años

Daniel Jiménez Chaverri

Estudiante

Hace 4 años

Carlos Nicolas Gonzalez Cabrera

Estudiante

Hace 4 años

Andres Trujillo

Estudiante

Hace 4 años

Gustavo Liendo

Estudiante

Hace 4 años

Kimberlyn Serrano

Estudiante

Hace 4 años

Alejandro Ramos

Estudiante

Hace 3 años

Orlando Rodriguez

Estudiante

Hace 4 años

Stivenson David Mejia Palacios

Estudiante

Hace 3 años

silfredo mario

Estudiante

Hace 4 años

Jhon Eduard Bocanegra Ortiz

Estudiante

Hace 4 años

santiago GRENAT SANTIAGO

Estudiante

Hace 4 años

Efrén Ruíz Rubio

Estudiante

Hace 4 años

Jose Castillo

Estudiante

Hace 4 años

Juan Diego Cabrera Remírez

Estudiante

Hace 4 años

Funcionó 😂

Amé lo de aldulto independiente 😂

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
}

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>

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

Te quedó muy bien, buen trabajo!

@redworld22, muchas gracias. 😁

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

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

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

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

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
}

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

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

<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 "&#37"; " 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;
}

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 🤗

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

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

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

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

Esta fue mi solución:

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

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

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

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

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

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

Cómo calcular porcentajes

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Playground: Transforma Objetos en Arrays

Promedio Ponderado en JavaScript: Fórmulas y Casos de Uso

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos

Todos los cursos GRATIS