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

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