No quiero sonar explotador pero por favor pongan a Juan David a hacer todos los cursos jajajajaj, explica muy bien!!
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
Reto: calcula otros tipos de promedio
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
Reto: extiende tu análisis salarial
Próximos pasos
Toma el Taller Práctico de JavaScript: Videojuegos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Calculando descuentos con JavaScript
7/30Recursos
Aportes 84
Preguntas 6
Ordenar por:
😃 Ame esta clase siento que estoy aprendiendo mucho! Esta es la solución al reto! Use radio buttons y aplique algo de css!
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">
<link rel="stylesheet" href="./styles.css">
<title>Coupons</title>
</head>
<body>
<div class="container">
<h1>Coupons</h1>
<section class="price-input">
<label for="course-price">Please enter the price of the course you want to take: </label>
<input id="course-price"type="number">
</section>
<form class="coupons">
<p>Which coupon would you like to apply?</p>
<label for="summer-coupon">
<input id="summer-coupon" type="radio" name="coupon">
Summer Coupon 20% Discount.
</label>
<label for="fall-coupon">
<input id="fall-coupon" type="radio" name="coupon">
Fall Coupon 25% Discount.
</label>
<label for="winter-coupon">
<input id="winter-coupon" type="radio" name="coupon">
Winter Coupon 30% Discount.
</label>
</form>
<button id="calculatePriceBtn" type="button">Calculate Discount</button>
<p id="priceWithDiscount">Price with selected discount:</p>
</div>
<script src="./coupons.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
font-size: 60px;
margin: 20px;
}
p {
padding: 20px 0 20px 0;
}
.container {
display: flex;
flex-direction: column;
padding: 20px;
margin: 20px;
width: 100%;
height: 400px;
}
.price-input {
display: flex;
}
#course-price {
width: 300px;
margin: 0 20px 0 20px;
}
.coupons {
display: flex;
flex-direction: column;
margin: 20px;
padding: 20px;
}
.coupons label {
padding: 10px;
}
button {
width: 200px;
margin: 0 0 20px 50px;
padding: 10px;
border-radius: 8px;
border: 2px solid purple;
background-color: bisque;
cursor: pointer;
}
button:hover {
border: 2px solid teal;
background-color: papayawhip;
}
JS
const coursePrice = document.querySelector('#course-price');
const summerCoupon = document.querySelector('#summer-coupon');
const fallCoupon = document.querySelector('#fall-coupon');
const winterCoupon = document.querySelector('#winter-coupon');
const resultWithCouponApplied = document.querySelector('#priceWithDiscount');
const btn = document.querySelector('#calculatePriceBtn');
btn.addEventListener('click', calculatePriceWithSelectedCoupon);
function calculatePriceWithSelectedCoupon () {
console.log("Hello")
const userInput = Number(coursePrice.value);
if(summerCoupon.checked) { // I can also use document.getElementById('summer-coupon').checked
const summerDiscount = 20;
calculationFormula(userInput, summerDiscount, "summer");
} else if(fallCoupon.checked) {
const fallDiscount = 25;
calculationFormula(userInput, fallDiscount, "fall");
} else if(winterCoupon.checked) {
const winterDiscount = 30;
calculationFormula(userInput, winterDiscount, "winter");
}
}
function calculationFormula (userInput, percentage, couponName) {
const newPrice = (userInput * (100 - percentage)) / 100;
resultWithCouponApplied.innerText = "The price with the " + couponName + " discount coupon is: $" + newPrice;
}
Para ustedes que son los mejores estudiantes de Platzi.
Les regalo dos cupones ZNK123 y ABC345
(copiar cupón sin espacios).
https://orlando0x.github.io/MatematicasEstadisticaConJavascript/retoPorcentajeCupones.html
Esta es mi solución, esta sencilla pero funciona 😃
Repositorio: https://github.com/GustavoMunizBarrios/taller-math-js/tree/main/percentages
Mi reto:
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</title>
<link rel="stylesheet" href="./css/discounts.css" />
</head>
<body>
<main>
<a class="linkHome" href="/">Regresar</a>
<section class="card__container">
<h5 class="main--title">Descuentos</h5>
<form action="">
<input type="number" id="price" autofocus />
<label class="price" for="price"
><span class="label-text">Precio</span></label
>
<input type="number" id="discount" maxlength="2" />
<label class="discount" for="discount"
><span class="label-text">Descuento</span></label
>
<div id="couponSection" style="display: none">
<input
autocomplete="off"
type="text"
id="couponId"
autofocus
/><label class="coupon" for="couponId">
<span class="label-text">CUPON</span>
</label>
</div>
<button id="toggleButton" type="button">
Dame un clic para cambiar tu cupon!!!
</button>
<div id="emptyValue"></div>
<div class="table">
<div class="table--container">
<div id="Pprice"></div>
<div id="Pdiscount"></div>
<div id="Pcoupon"></div>
<div id="resultDiscount"></div>
</div>
</div>
<div>
<p></p>
<p></p>
</div>
</form>
</section>
</main>
<script src="./js/index.js"></script>
<script src="./js/showInputSection.js"></script>
<script src="./js/couponReader.js"></script>
<script src="./DB/Coupons.js"></script>
</body>
</html>
js
const couponReader = () => {
const inputCouponValue = couponId.value;
const couponValue = coupons.map((item) => {
// console.log(item.coupon);
if (item.coupon === inputCouponValue) {
return item.discount;
}
});
let strWithoutComma = couponValue.join('');
const match = couponValue.filter((item) => item !== undefined);
const inputPrice = parseFloat(price.value);
const couponCalculate = (inputPrice * (100 - match)) / 100;
if (match.length > 0) {
console.log('Hay match', match[0]);
console.log({ couponCalculate });
Pcoupon.innerHTML = `
<div class="table--content">
<p>Cupon utilizado</p>
<p>${!inputCouponValue == '' ? inputCouponValue : '0'}</p>
</div>`;
Pdiscount.innerHTML = `
<div class="table--content">
<p>Descuento</p>
<p>${!strWithoutComma == '' ? strWithoutComma : '0'}%</p>
</div>`;
resultDiscount.innerHTML = `
<div class="table--content">
<p>Precio Total</p>
<p>$${!couponCalculate == '' ? couponCalculate : '0'}</p>
</div>`;
console.log(parseFloat(couponValue));
} else {
console.log('no hay match');
}
console.log(inputCouponValue);
};
couponId.addEventListener('input', couponReader);
js
const coupons = [
{ coupon: 'FEBRERO-2023', discount: 20 },
{ coupon: 'MARZO-2023', discount: 30 },
{ coupon: 'ABRIL-2023', discount: 40 },
{ coupon: 'MAYO-2023', discount: 50 },
{ coupon: 'JUNIO-2023', discount: 80 },
{ coupon: 'JULIO-2023', discount: 90 },
];
js
const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
const resultDiscount = document.querySelector('#resultDiscount');
const emptyValue = document.querySelector('#emptyValue');
const Pprice = document.querySelector('#Pprice');
const Pdiscount = document.querySelector('#Pdiscount');
const couponId = document.querySelector('#couponId');
const calculateDiscount = () => {
const inputPrice = parseFloat(price.value);
const inputDiscount = parseFloat(discount.value);
if (inputPrice <= 0 || inputPrice == '') {
emptyValue.innerHTML =
'<p class="message">Ingrese el precio y el descuento(no mayor a 100%) en los campos correspondientes 😊</p>';
return;
}
if (inputDiscount > 100) {
emptyValue.innerHTML =
'<p class="message">Ingrese el precio y el descuento(no mayor a 100%) en los campos correspondientes 😊</p>';
return;
}
const calculate = (inputPrice * (100 - inputDiscount)) / 100;
Pprice.innerHTML = `
<div class="table--content">
<p>Precio</p>
<p>$${!inputPrice == '' ? inputPrice : '0'}</p>
</div>`;
Pdiscount.innerHTML = `
<div class="table--content">
<p>Descuento</p>
<p>${!inputDiscount == '' ? inputDiscount : '0'}%</p>
</div>`;
resultDiscount.innerHTML = `
<div class="table--content">
<p>Precio Total</p>
<p>$${!calculate == '' ? calculate : '0'}</p>
</div>`;
};
price.addEventListener('input', calculateDiscount);
discount.addEventListener('input', calculateDiscount);
css
body {
height: 100vh;
background-image: url('../../../assets/bgClr.jpg');
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
overflow-y: hidden;
}
main {
display: grid;
place-content: center;
height: 100vh;
}
.linkHome {
position: absolute;
top: 5vh;
left: 5vw;
color: #fff;
font-size: 25px;
}
.card__container {
position: relative;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
width: 740px;
/* max-width: 360px; */
height: 590px;
background: linear-gradient(
109.56deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 126.32%
);
border-radius: 30px;
color: #fff;
font-size: 18px;
box-shadow: 0 20px 100px rgba(255, 255, 255, 0.19),
0 20px 100px rgba(255, 255, 255, 0.23);
backdrop-filter: blur(30px);
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.main--title {
position: absolute;
top: 0;
font-size: 30px;
font-weight: 600;
font-family: Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 25px;
}
form {
position: relative;
width: 80%;
margin-top: 80px;
}
textarea {
resize: none;
}
input,
textarea {
width: 100%;
margin: 15px 0;
padding: 8px;
background: transparent;
border: 0;
box-sizing: border-box;
color: inherit;
}
input:focus,
textarea:focus {
outline: 0;
}
label {
position: absolute;
left: 0;
width: 100%;
}
label::before,
label::after {
content: ' ';
position: absolute;
height: 2.25em;
width: 5%;
border-width: 1px;
border-style: solid;
pointer-events: none;
transition: 0.75s;
z-index: 1;
}
label::before {
border-right: 0;
}
label::after {
right: 0;
border-left: 0;
}
.label-text {
position: absolute;
right: 0;
display: block;
padding: 0.5em 1em;
background: linear-gradient(
109.56deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 126.32%
);
transition: 0.5s;
}
.label-text::after {
content: ' ';
display: block;
border-top: 1px solid;
transition: 0.5s;
}
input:focus + label::before,
input:focus + label::after {
width: 50%;
}
input:focus + label .label-text {
transform: translate3d(100%, 0, 0);
}
input:focus + label .label-text::after {
width: 1em;
transform: translate3d(-100%, -0.75em, 0);
}
#price {
color: #dbcdd9;
}
#discount {
color: #bcafd1;
}
#couponId:focus + label::before,
#couponId:focus + label::after,
#discount:focus + label::before,
#discount:focus + label::after,
#price:focus + label::before,
#price:focus + label::after {
border-color: #fff;
}
.price {
color: #fff;
top: 0.5em;
}
.coupon::before,
.coupon::after,
.discount::before,
.discount::after,
.price::before,
.price::after {
border-color: rgba(219, 205, 217, 0.3);
top: 0;
}
.discount {
color: #fff;
top: 3.85em;
}
.coupon {
top: 7.18em;
}
.couponSection input {
padding: 5px;
}
.table {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: flex-end;
/* height: 100%; */
}
.table--container {
display: flex;
flex-direction: column;
}
.table--content {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.message {
position: absolute;
}
#toggleButton {
position: relative;
width: 100%;
margin: 15px 0;
padding: 8px 0;
background: transparent;
color: #dfa6b9;
border: 1px solid;
font-size: bold;
font-size: 18px;
transition: 0.3s;
}
#toggleButton:hover {
background: rgba(233, 22, 93, 0.2);
}
@media (min-width: 660px) and (max-width: 856px) {
body {
max-width: calc(100% - 12em);
}
}
Aquí mi aporte, espero que les guste.
-
HTML:
-
JS:
<const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const btn = document.querySelector('#calcular');
btn.addEventListener('click', calcularPrecioConDescuento);
const pResult = document.querySelector('#result');
function calcularPrecioConDescuento(precio, descuento) {
const price = parseInt(inputPrice.value);
const discount = parseInt(inputDiscount.value);
if(!price || !discount){
pResult.innerHTML = 'Por favor llena el formulario';
return;
}
if(discount > 100) {
pResult.innerHTML = 'Ajá, ya quisieras';
return;
}
const newPrice = price * (100 - discount) / 100;
pResult.innerHTML = 'El nuevo precio con desceunto es $ ' + newPrice;
}>
Me parece que este profesor es el mejor explicando, gracias
Comparto mi solución, reutilice un poco el codigo del reto anterior sin embargo cree unas nuevas constantes locales para alli guardar el “Codigo del Cupon” y así preguntarle a javaScript si el cupón que se ingresó en el input es el mimo que tenemos en la variable del cupón.
Mi aporte:
![](
<body>
<h1 class="title">Descuento de produtos</h1>
<div>
<img src="./img/OFERTAS.jpg" alt="">
</div>
<section>
<label for="price">Precio del producto</label>
<input type="number" class="price">
<label for="percentage">Descuento de producto porcentaje</label>
<input type="number" class="percentage">
<span>%🤪👀</span>
<label for="Cupon">Cupon</label>
<input type="text" class="nameCupon">
<button class="Calculate">Calcular</button>
</section>
<main>
<h2>Precio descontado es de :</h2>
<p class="result"></p>
<p>$</p>
</main>
<script>
const price = document.querySelector('.price');
const percentage = document.querySelector('.percentage');
const result = document.querySelector('.result')
const buttonCalculate = document.querySelector('.Calculate')
//sacar porcentaje
const inputCupon = document.querySelector('.nameCupon')
const arrayCupones = [
{name:'DEVERANO', descuento : 15},
{name:'FINDELOKOS', descuento : 55},
{name:'CYBERLUNES', descuento : 35},
{name:'CASIREGALADO', descuento : 90}
]
function discount (thePrice, thePercentage, cupon){
if (cupon == ''){
let operation = (parseInt(thePrice) * (100 - parseInt(thePercentage))) / 100
result.textContent = operation;
}else{
let nCupon = cupon;
let tipoCupon = arrayCupones.filter(function (name) {
return name.name == nCupon
})
let descuentoCupon = tipoCupon[0].descuento
let operation = (parseInt(thePrice) * (100 - descuentoCupon)) / 100
result.textContent = operation;
}
}
buttonCalculate.addEventListener('click', function () {
discount(price.value, percentage.value, inputCupon.value)
})
</script>
</body>
Mi aporte:
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');
input1.setAttribute('placeholder', 'Insert the price');
input1.setAttribute('required', "");
/* Creating a label and an input. */
const label2 = document.createElement('label');
label2.innerHTML = '<b>Promotion code:</b> ';
const input2 = document.createElement('input');
input2.setAttribute('type', 'text');
input2.setAttribute('placeholder', 'Insert code');
const btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.innerText = 'Get Discount';
const p = document.createElement('p');
btn.addEventListener('click', () => {
if (input2.value === '15Platzi') {
let discount = (+input1.value * (100 - parseInt(input2.value))) / 100;
p.innerText = `You get a 15% off. Price with discount: $${discount}`;
} else if (input2.value === '30Platzi') {
let discount = (+input1.value * (100 - parseInt(input2.value))) / 100;
p.innerText = `You get a 15% off. Price with discount: $${discount}`;
} else { p.innerText = 'There is no promotion with this code.'; }
});
app.appendChild(label1);
label1.appendChild(input1);
app.appendChild(label2);
label2.appendChild(input2);
app.appendChild(btn);
app.appendChild(br);
app.appendChild(p);
grande Juan David!!
Mi solucion
la clase pasada, lo realicé sin validaciones y quedó así:
con lo visto en esta clase agregué varias cositas, un boton custom y las validaciones, como no se pueden subir gifs, comparto link, para auquel que desee ver
¡Hola!
¿Qué tal les quedaron sus descuentos usando el DOM?
Lo que hice fue aplicarlo al total de una compra. El usuario ingresa un código válido y se le aplica el descuento.
La verdad no sé por qué me toma el valor del input sin llamarlo pero así quedo.
Solución al reto:
Hola! por acá dejo lo que hice
<code>
const inputPrice = document.querySelector("#price");
const inputDiscount = document.querySelector('#discount');
const calcBtn = document.querySelector(".btn-calc");
const result = document.querySelector(".result");
const clean = document.querySelector(".clean");
function calcDiscount(event){
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
if( !price || !discount){
result.innerText = "Por favor digita el valor y descuento";
result.classList.remove("inactive");
event.preventDefault();
return;
}
if(discount > 100){
result.classList.remove("inactive");
event.preventDefault();
result.innerText = "Los descuentos no pueden ser mayor al 100%!";
inputDiscount.style.color = "red";
return;
}
result.classList.remove("inactive");
clean.classList.remove('inactive');
event.preventDefault();
let finalPrice = (price * (100 - discount))/100;
return result.textContent = "El precio con descuento es de: $" + finalPrice;
}
function cleanAll(){
result.classList.add("inactive");
clean.classList.add('inactive');
inputPrice.value = "";
inputDiscount.value = "";
}
Hola Compañeros, yo ya había echo el curso anterior hace poco y pues lo que hice fue regresar a ese código y mejorarlo con lo que hemos aprendido: puse un par de event Listeners y le puse estilos.
Espero les guste :3
<!DOCTYPE html>
<html lang="es">
<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 descuentos</title>
</head>
<body>
<h1>Descuentos y Porcentajes</h1>
<section>
<h2>Descuento sencillo</h2>
<form>
<label for="precioCompleto">Ingresa el precio del producto
<input type="number" name="fullPrice" id="fullPrice" max="100" />
</label><br><br>
<label for="porcentajeDescuento">Ingresa el procentaje de descuento
<input type="number" name="discountRate" id="discountRate" />
</label><br><br>
<input type="button" name="sendDiscount" id="sendDiscount" value="Calcular">
</form>
<p id="discountResult"></p>
</section>
<script src="./descuentos.js">
</script>
</body>
</html>
const inputFullPrice = document.querySelector('#fullPrice');
const inputDiscountRate = document.querySelector('#discountRate');
const inputResultContainer = document.querySelector('#discountResult');
const btn = document.querySelector('#sendDiscount');
btn.addEventListener('click', calculateDiscount);
function calculateDiscount() {
const fullPrice = Number(inputFullPrice.value);
const discountRate = Number(inputDiscountRate.value);
let message = '';
if(!fullPrice || !discountRate) {
message = 'Debes escribir el precio del producto y el porcentaje de descuento a aplicar';
} else {
if(discountRate > 100) {
message = 'El porcentaje de descuento debe ser menor al 100%';
} else {
discount = (fullPrice * (100 - discountRate))/100;
message = 'El precio aplicando el descuento es $'+ discount;
}
}
inputResultContainer.innerText = message;
}
Comparto mi solución 😊
https://daddriel.github.io/discount-calculator/
Esta fue mi manera de hacerlo, lo hice con eventos onblur. estos sirven para cuando el usuario deja de seleccionar el input, por eso no es necesario un boton.
Y en el JS utilicé otra formula
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Porcentajes</h1>
<label for="precio">Precio</label>
<input onblur="calcularDescuento()" type="number" id="precio">
<br>
<br>
<label for="descuento">descuento</label>
<input onblur="calcularDescuento()" type="number" id="descuento">
<p id="total"></p>
<hr>
<script src="/js/porcentajes.js"></script>
</body>
</html>
JS
const precio = document.querySelector('#precio')
const descuento = document.querySelector('#descuento')
const total = document.querySelector('#total')
function calcularDescuento(){
if (precio.value != "" && descuento.value != "" && Number(descuento.value<100)){
total.innerHTML = "El descuento es de :" + precio.value * (descuento.value * 0.010);
}
}
Esta es mi solucion:
function calcularDescuento(precio, descuento) {
if (descuento >= 100) {
alert("El descuento no puede ser mayor o igual a 100%");
return;
}
const porcentajePrecioConDescuento = 100 - descuento;
const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
return precioConDescuento;
}
function onClickButtonPriceDiscount() {
const inputPrice = document.getElementById("InputPrice");
const inputDiscount = document.getElementById("InputDiscount");
const resultP = document.getElementById("ResultP");
const priceValue = inputPrice.value;
const discountValue = inputDiscount.value;
if (!priceValue || !discountValue) {
alert("Por favor ingrese los valores");
return;
}
const precioConDescuento = calcularDescuento(priceValue, discountValue);
if (!precioConDescuento) {
return;
}
resultP.innerText = `El precio con descuento son: $${precioConDescuento}`;
}
document.getElementById("buttonCalcular").addEventListener("click", (event) => {
event.preventDefault();
onClickButtonPriceDiscount();
});
Bastante parecido a lo que hace el profe pero a mi manera
function calcularPrecioConDescuento() {
const price = Number(inputPrice.value);
const discount = inputDiscount.value;
if (!price) {
pResult.innerText = "Por favor ingrese el precio del producto";
return;
}
if (discount === "") {
pResult.innerText = `El precio del producto seleccionado es : $${price}`
} else {
let cuponValido = false; // Añadir una variable para rastrear si se ha encontrado un cupón válido
for (let cupon in cuponesDescuento) {
if (cupon == discount) {
cuponValido = true; // Marcar que se ha encontrado un cupón válido
const newPrice = (price * (100 - cuponesDescuento[cupon])) / 100;
pResult.innerText = `El precio del producto seleccionado con el descuento es : $${newPrice}`
break; // Salir del bucle tan pronto como se encuentre una coincidencia
}
}
// Verificar después del bucle si se ha encontrado un cupón válido
if (!cuponValido) {
pResult.innerText = `El cupón ingresado no es válido, el precio se mantiene en : $${price}`;
}
}
}```
Asi me quedo a mi 😃
Yo estaba usando Number() pero con N minúscula, con razón me arrojaba error y me pasé a usar parseInt() que también sirvió 😬
Mi solución:
Al añadir los condicionales vistos en la clase, mi calculadora de descuentos quedo de la siguiente manera:
vaya, interesante los condicionales que se ponen para recibir los datos correctos xd
Este fue el codigo que yo hice, antes de ver la clase:
const P = document.getElementById('price');
const D = document.getElementById('discount');
const btn = document.getElementById('calcular');
const resultado = document.getElementById('result');
btn.addEventListener("click", porcentaje);
function porcentaje() {
if (D.value < 101 && D.value > -1) {
let precioFinal = P.value - (P.value * (D.value/100));
resultado.innerText = "El precio con descuento es de: " + precioFinal + "$";
}
else {
resultado.innerText = "There was a mistake :c";
}
}
Reto cumplido 🚀
Aprovechen los bonos descuentos!!!
Linkaso: https://codepen.io/franmore
BONOS:
- 10% de Descuento --> platzi10
- 20% de Descuento --> platzi20
- 30% de Descuento --> platzi30
- 40% de Descuento --> platzi40
- 50% de Descuento --> platzi50
- 60% de Descuento --> platzi60
- 70% de Descuento --> platzi70
- 80% de Descuento --> platzi80
- 90% de Descuento --> platzi90
Mi Calculadora de cupones de descuento (%)🎫🎫🎫
-
Demo 🎢 Calculadora de descuentos
-
Repositorio📙📙: Proyecto en GitHub
Resultado:
Hola a todos, acá les comparto el reto de la clase ya desplegada en GitHub Pages:
- Acá pueden ver la página.
- Acá pueden ver el código en GitHub
<h1>Hola buen día, aprovecha el día de descuento</h1>
<input type="number" name="" id="price" placeholder="ingresa el valor del producto">
<input type="text" name="" id="cupon" placeholder="ingresa el cupón">
<button class="btn">Enviar</button>
<h1 class="priceCupon"></h1>
JS
const inputPrice = document.querySelector('#price')
const btn = document.querySelector('.btn')
const inputCupon = document.querySelector('#cupon');
const res = document.querySelector('.priceCupon');
btn.addEventListener('click', calcularCupon);
function calcularCupon () {
let precio = parseInt(inputPrice.value);
let cupon = inputCupon.value;
let descuento30 = 30;
let descuento50 = 50;
let total;
if(!precio || !cupon) {
res.innerHTML = 'Llena el formulario!!'
return
}
switch(cupon) {
case 'BIEN100':
total = precio * (100 - descuento30) / 100
res.innerHTML = `El cupón es de 30% de descuento y el total con descuento es: ${total}`;
break;
case 'BIEN50':
total = precio * (100 - descuento50) / 100;
res.innerHTML = `El cupón es de 50% descuento y el total con descuento es: ${total}`
break;
default:
res.innerHTML = 'Descuento no válido'
}
}
Mi Calculadora de Descuentos (%)
-
Repositorio: Proyecto en GitHub
-
Slides con proceso:
<h2>Calcular descuentos</h2>
<input type="number" id="precio" placeholder="Ingrese el precio">
<input type="number" id="descuento" placeholder="Ingrese el descuento">
<button id="btnCalcular">Calcular</button>
<p id="resultado"></p>
<p id="ganancia"></p>
const precio = document.querySelector('#precio')
const descuento = document.querySelector('#descuento')
const pResult = document.querySelector('#resultado')
const btn = document.querySelector('#btnCalcular')
const ganancia = document.querySelector('#ganancia')
function descontar (e){
// console.log(e);
e.preventDefault();
const result = (parseInt(precio.value )* (100 - parseInt(descuento.value))/100);
pResult.innerText = "El valor a pagar es de $"+result;
// console.log(precio.value)
ganancia.innerText = 'Se ahorro $'+(parseInt(precio.value)-result);
}
btn.addEventListener('click', descontar);
No sabía que tenía que hacer primero el curso práctico de JavaScript, con razón desde cierto punto no entendía muy bien que era lo que estaba haciendo. Jajajajja… Atrapadaaaa jajajajja.
let price = document.getElementById('price');
let cupon20 = document.getElementById('cupon20');
let cupon25 = document.getElementById('cupon25');
let cupon30 = document.getElementById('cupon30');
let totalPrice = document.getElementById('totalPrice');
let calculatePrice = (price,discount) =>{
if(price.value == '' || price.value <= 0){
return;
}
return price * ( 100 - discount ) / 100;
}
document.addEventListener('click', e=>{
if(e.target.matches('input#cupon20')) {
totalPrice.textContent = "";
totalPrice.textContent = calculatePrice(price.value, 20);
}
if(e.target.matches('input#cupon25')) {
totalPrice.textContent = "";
totalPrice.textContent = calculatePrice(price.value, 25);
}
if(e.target.matches('input#cupon30')) {
totalPrice.textContent = "";
totalPrice.textContent = calculatePrice(price.value, 30);
}
})
quise poner en practica algunas cosas que ya hemos estado viendo durante clases pasadas y hice este intento de replica de un producto en venta de Amazon.
aquí esta en github pages:
https://jorgecamper0.github.io/Replica-amazon/TiendaPorcentaje.html
Me hubiera gustado hacerlo responsive pero ya era mucho trabajo por que lo empecé así y lo deje por la paz.
Este es el repositorio : https://github.com/jorgecamper0/Replica-amazon
<const inputPrecio = document.querySelector('#precio-sin');
const inputDescuento = document.querySelector('#input-descuento');
const buttonDescuento = document.querySelector('#calcular-descuento');
const nuevoPrecio = document.querySelector('#nuevo-precio');
buttonDescuento.addEventListener('click',calcularDescuentos);
function calcularDescuentos() {
let precio = Number(inputPrecio.value);
let descuento = Number(inputDescuento.value);
if(descuento >= precio) {
alert('No se puede igualar o sobrepasar el descuento al precio');
nuevoPrecio.innerText = ' ';
return;
}
let operacion = (precio * (100 - descuento)) / 100;
nuevoPrecio.innerText = 'El precio con descuento del'+ ' ' + descuento + '%' + ' ' + 'es de' + ' ' + '$' + operacion;
}
console.group('calcular-descuento');
function calcularDescuento(precio,descuento) {
return (precio * (100-descuento)) / 100;
}
console.log({calcularDescuento})
console.groupEnd('calcular-descuento');>
Este es mi aporte
const btn = document.querySelector('#calcular');
const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const inputDiscountCoupon = document.querySelector('#discount-coupon')
const pResult = document.querySelector('#result');
btn.addEventListener('click', calcularPrecioConDescuento);
function calcularPrecioConDescuento() {
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
const coupon = inputDiscountCoupon.value;
let newPrice = 0;
if (!price && !discount && !coupon) {
pResult.innerText = 'Hay que llenar el formulario (el campo precio y alguno de los otros dos)';
// return;
} else if (price && discount > 0) {
if (discount > 100) {
pResult.innerText = 'Ajá, ya quisieras, no te vamos a dar plata, PAGA!';
// return;
} else {
console.log(price, discount);
newPrice = (price * (100 - discount)) / 100;
pResult.innerText = 'El nuevo precio con descuento es $' + newPrice;
}
} else {
if (coupon == "findeaño50Platzi") {
newPrice = (price * (100 - 50)) / 100;
} else if (coupon == "findeaño30Platzi") {
newPrice = (price * (100 - 30)) / 100;
} else if (coupon == "findeaño25Platzi") {
newPrice = (price * (100 - 25)) / 100;
} else {
pResult.innerText = 'Ese cupon no lo tenemos';
return;
}
pResult.innerText = 'El nuevo precio con descuento es $' + newPrice;
}
le agrego tu ahorro es:
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>Cómo calcular precios con descuentos</title>
</head>
<body>
<h1>Cómo calcular precios con descuentos</h1>
<label for="price">Precio original de tu producto:</label>
<input id="price" type="number" />
<label for="discount">Descuento de tu producto:</label>
<input id="discount" type="number" />
<button id="calcular">Calcular descuento</button>
<p id="result"></p>
<p id="ahorro"></p>
<script src="./descuentos.js"></script>
</body>
</html>
js
const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const btn = document.querySelector('#calcular');
const pResult = document.querySelector('#result');
const vAhorro = document.querySelector('#ahorro');
btn.addEventListener('click', calcularPrecioDescuesto);
function calcularPrecioDescuesto() {
// (P * (100 -D)) / 100
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
if (!price || !discount) {
pResult.innerText = 'Por favor llena el formulario.';
return;
}
if (discount > 100) {
pResult.innerText = '% no válido, cambia el porcentaje.';
return;
}
if (discount == 100) {
pResult.innerText = '% no válido, cambia el porcentaje.';
return;
}
const newPrice = (price * (100 - discount)) / 100;
pResult.innerText = 'El nuevo precio con descuento es $' + newPrice;
function calcularAhorro (){
// (precio - newPrice)
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
const newPrice = (price * (100 - discount)) / 100;
}
const ahorro = (price - newPrice);
vAhorro.innerText = 'Tu ahorro es $' + ahorro;
}
que sabroso es ver estas clases y ya entender todo!!! despues de 45 dias estudiando en platzi ya entiendo hasta este nivel!
Codigo JS utilizando objetos
const price = document.querySelector("#price");
const discount = document.querySelector("#discount");
const btn = document.querySelector("btnCalcular")
const result = document.querySelector('.result')
const formDescuentos = document.querySelector("#formDescuentos");
formDescuentos.addEventListener('submit', calcularDescuentos);
function calcularDescuentos(event){
event.preventDefault();
const couponsAvailables = {
PLATZICONF: 30,
PLATZIFEST: 25,
PLATZIDAY: 20,
ALEXDEV2808: 35,
'PLAT21PLUS': 40
}
const couponInput = discount.value
const applyDiscount = couponsAvailables[couponInput];
if(!price.value || !discount.value){
result.innerText = "Por favor escribe los valores correspondientes!"
return;
}
if(!applyDiscount){
result.innerText = "El cupon que escribiste no existe!"
return;
}
const finalResult = (parseFloat(price.value ) * (100 - parseFloat(applyDiscount))) / 100;
result.innerText = "Precio con Descuento: " + finalResult.toFixed(2);
}
Convertir string a número parseInt() o parseFloat()…😃
function calcularPorcentaje(price, discount) {
if(Number(price) && Number(discount) && discount <= 100) {
const descuento = (price*discount)/100;
return {
descuento,
total: price - descuento,
}
} else {
return "Verifique los datos";
}
}
Reto cumplido:
Aquí se ve otra manera de realizar parseInt(x) con otra sintaxis, la cuál sería Number(x)
<!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>Document</title>
</head>
<body>
<h1>Calcular precios con descuento</h1>
<label for="precio">Precio</label>
<input type="number" id="precio">
<label for="descuento">Descuento</label>
<input type="number" id="descuento">
<button onclick="descuentoPrecio()">Aplicar descuento</button>
<p id="resultado"></p>
<script src="./main.js"></script>
</body>
</html>
function descuentoPrecio() {
const precio = document.querySelector(`#precio`).value;
const descuento = document.querySelector(`#descuento`).value;
const resultado = document.querySelector(`#resultado`);
if (!precio || !descuento) {
resultado.innerHTML = `Por favor, llena el formulario`;
return;
}
if (descuento > 100) {
return resultado.innerHTML = `ya quisieras`;
} else {
const resultadoDescuento = (precio * (100 - descuento)) / 100;
resultado.innerHTML = `El precio con descuento es $` + resultadoDescuento;
}
}```
Aquí les dejo mi aporte.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Aqui estare provando como hacer una pagina de descuentos">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina de descuento</title>
</head>
<body>
<h1>Cómo calcular precios con descuentos</h1>
<label for="price">Nombre del cupon</label>
<input id="price" type="text" />
<button id="calcular">Calcular descuento</button>
<p id="result"></p>
<script src="./cupon.js"></script>
</body>
</html>
<code>
JavaScript
const btn = document.querySelector('#calcular');
const inputPrice = document.querySelector('#price');
const pResult = document.querySelector('#result');
btn.addEventListener('click', calcularPrecioConDescuento);
function calcularPrecioConDescuento(){
const price = inputPrice.value;
if(price == "mario"){
const newPrice = (300 * (100 - 30)) / 100;
pResult.innerText = 'Usastes el cupon mario tu nuevo precio es $' + newPrice;
return;
}
if(price == "platzi"){
const newPrice = (300 * (100 - 50)) / 100;
pResult.innerText = 'Usastes el cupon platzi tu nuevo precio es $' + newPrice;
return;
}
}
<code>
Reto solucionado implemente tanto cupones como productos para que lo visualicen de forma facil solo tienen que ponerlo directo en el inspector y veran el resultado
```js
const COUPONS = {
'NewClient': { discount: 15, use: 7 },
'Welcome2024': { discount: 20, use: 1 },
'SummerFest': { discount: 10, use: 5 },
'WinterDeal': { discount: 25, use: 3 },
'WeekendSale': { discount: 30, use: 2 },
'NightShopping': { discount: 40, use: 1 },
'MoneySavingMonday': { discount: 10, use: 10 },
'ShopAnniversary': { discount: 50, use: 1 },
'FriendsDiscount': { discount: 15, use: 4 },
'HappyHourSale': { discount: 35, use: 2 }
}
const PRODUCTS = {
'SmartphoneX': { price: 799, quantity: 50 },
'LaptopPro': { price: 1200, quantity: 30 },
'HeadphonesBT': { price: 150, quantity: 100 },
'SmartWatch2024': { price: 250, quantity: 40 },
'Tablet8Inch': { price: 300, quantity: 60 },
'WirelessCharger': { price: 50, quantity: 150 },
'BluetoothSpeaker': { price: 100, quantity: 80 },
'ExternalHardDrive1TB': { price: 120, quantity: 70 },
'USBTypeCCable': { price: 15, quantity: 200 },
'ErgonomicKeyboard': { price: 80, quantity: 90 }
};
const purchase1 = [
{ productName: 'SmartphoneX', quantity: 1 },
{ productName: 'HeadphonesBT', quantity: 2 },
{ productName: 'USBTypeCCable', quantity: 3 }
];
const purchase2 = [
{ productName: 'LaptopPro', quantity: 1 },
{ productName: 'BluetoothSpeaker', quantity: 2 },
{ productName: 'WirelessCharger', quantity: 1 }
];
const purchase3 = [
{ productName: 'Tablet8Inch', quantity: 1 },
{ productName: 'ErgonomicKeyboard', quantity: 1 },
{ productName: 'ExternalHardDrive1TB', quantity: 2 }
];
class User {
constructor({
name,
cash,
age,
shopping = []
}) {
this.name = name;
this.cash = cash;
this.age = age;
this.shopping = shopping
}
validateCoupons(coupon) {
const discount = []
coupon.forEach((element) => {
if (COUPONS[element] !== undefined) {
if (COUPONS[element].use > 0) {
discount.push(COUPONS[element].discount)
COUPONS[element].use--
}
}
})
return discount
}
shoppingProducts(products, coupons) {
const shoppingCard = []
let total = 0
products.forEach((element) => {
if (!!PRODUCTS[element.productName]) {
if (PRODUCTS[element.productName].quantity > element.quantity) {
PRODUCTS[element.productName].quantity -= element.quantity;
shoppingCard.push({
name : element.productName,
price: PRODUCTS[element.productName].price * element.quantity,
quantity: element.quantity
})
}
}
})
this.validateCoupons(coupons).forEach((discount, index) => {
const newPrice = ((shoppingCard[index].price * (100 - discount)) / 100)
shoppingCard[index].price = newPrice
})
shoppingCard.forEach(({price}) => total+= price)
this.cash = this.cash - total
this.shopping.push({item : shoppingCard, total: total})
}
viewShoppings() {
return this.shopping
}
viewCahs() {
return this.cash
}
}
const juan = new User({ name: 'Juan' , cash: 10000, age: 19})
juan.shoppingProducts(purchase1, ['NewClient', 'ShopAnniversary'])
console.log(juan.viewShoppings())
console.log(juan.viewCahs())
juan.shoppingProducts(purchase2, ['MoneySavingMonday', 'WeekendSale' , 'WeekendSale'])
console.log(juan.viewShoppings())
console.log(juan.viewCahs())
```
```js
const btn = document.getElementById('calcular');
btn.addEventListener('click', calcularNuevoPrecio);
function calcularNuevoPrecio(){
let precio = document.getElementById('price').value
let descuento= document.getElementById('discount').value
let precioDescuento = (precio * (100 - descuento))/100
let parrafo = document.getElementById('result')
parrafo.textContent = `El precio con descuento es ${precioDescuento}`
console.log(precioDescuento)
return precioDescuento;
}
```const btn = *document*.getElementById('calcular');btn.addEventListener('click', calcularNuevoPrecio);
function calcularNuevoPrecio(){ let precio = *document*.getElementById('price').value let descuento= *document*.getElementById('discount').value let precioDescuento = (precio \* (100 - descuento))/100 let parrafo = *document*.getElementById('result') parrafo.textContent = `El precio con descuento es ${precioDescuento}` *console*.log(precioDescuento) return precioDescuento;
}
🟢💻Hola Platzinautas
Les comparto mi solución utilizando ‘arrow functions’ para que el código sea más óptimo y elegante:
const inputPrice = document.getElementById('price')
const inputDiscount = document.getElementById('discount')
const btnCalculate = document.getElementById('calculate')
const result = document.getElementById('result')
btnCalculate.addEventListener('click', () => {
const price = Number(inputPrice.value)
const discount = Number(inputDiscount.value)
if (!price || !discount) {
result.innerHTML = 'Por favor llena el formulario'
} else if (discount > 100) {
result.innerHTML = 'Error en el porcentaje de descuento'
} else {
result.innerHTML = `El precio con descuento es ${(price * (100 - discount) / 100)}`
}
})
Aprendí a programar en 1990, pero ahora en 2022 a 2023, y 2024, Platzi me ha llevado a recibir una actualización monumental.
Los problemas siguen siendo los mismos, lo que ha cambiado son los "dialectos" informáticos.
A diferencia de los jóvenes, no tengo prisa (les deseo mucha fuerza, padawans).
La informática siempre será bien pagada, porque a la gente, a la plebe, no le gusta la matemática.
Durante la pandemia, aprendí dos idiomas difíciles. Cuando tuve que elaborar diccionarios, hacer consultas desde mi teléfono, pensar en bases de datos, y en la gamificación, allí Platzi fue la solución.
Gracias Javascript.
const calculateDiscount = (price, percentage) => (price * (100 - percentage)) / 100
const validateDiscount = (price, percentage) => {
const validatedPercentage = ( !isNaN(percentage) && percentage >= 0 && percentage <= 100)
const validatedPrice = (!isNaN(price) && price >= 0)
return (validatedPrice && validatedPercentage)
}
const price = document.querySelector('#price__input');
const percentage = document.querySelector('#percentage__input');
const button = document.querySelector('.discount-calculator__button')
const output = document.querySelector('.discount-calculator__output');
const pDiscount = document.createElement('p');
button.addEventListener('click',()=>{
const priceValue = parseInt(price.value);
const percentageValue = parseInt(percentage.value)
pDiscount.textContent = validateDiscount(priceValue, percentageValue)
? `El descuento producto con el descuento incluido cuesta : ${calculateDiscount(priceValue, percentageValue)}$`
: `Porfavor ingresa un numero valido`
output.appendChild(pDiscount);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculate prices with discounts</title>
</head>
<body>
<h1>Calculate prices with discounts</h1>
<label for="price">Original price:</label>
<input id="price" type="number" >
<br/>
<label for="discount">Discount:</label>
<input id="discount" type="number" >
<br/>
<button id="btn-Discount">Calculate Discount</button>
<p id="result"></p>
<script src="descuentos.js"></script>
</body>
</html>
// javascript
const btn = document.querySelector('#btn-Discount');
const priceInput = document.querySelector('#price');
const discountInput = document.querySelector('#discount');
const result = document.querySelector('#result');
btn.addEventListener('click', priceWithDiscount);
function priceWithDiscount(){
const price = Number(priceInput.value);
const discount = Number(discountInput.value);
if(! price || ! discount){return result.innerHTML = `Fields are required`}
if (discount == 100) {return result.innerHTML = `Free Product`};
if (discount > 100) {return result.innerHTML = `Error the discount cannot be greater than 100%`};
const priceDiscount = (price*(100 - discount))/100;
result.innerHTML = `final price: ${priceDiscount}`;
}
¡La clase fue espectacular! 👨🏻💻🤓 Presento mi código en el que añadí el evento addEventListener(‘keydown’) para que al hacer clic en la tecla Enter, el botón Calcular funcione automáticamente.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descuentos</title>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
}
.input-container input {
margin: 5px;
color: burlywood;
border-radius: 5px;
border: 1.5px solid #ccc;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 2.5vh;
}
</style>
</head>
<body>
<h1 style="color:cadetblue; text-align:center">Descuentos en JavaScript</h1>
<p style="text-align:center">Por favor, inserta el precio del producto y el descuento</p>
<div class="center">
<div class="input-container">
<input id="precio" type="text" placeholder="Inserta el precio">
<input id="descuento" type="text" placeholder="Inserta el descuento">
</div>
</div>
<div class="center">
<button class="button">Calcular</button>
</div>
<p id="resultado" style="text-align: center; color:chocolate"></p>
<script src="./descuentos.js"></script>
</body>
</html>
Código JavaScript
const precioInput = document.querySelector("#precio");
const descuentoInput = document.querySelector("#descuento");
const resultadoInput = document.querySelector("#resultado");
const boton = document.querySelector(".button");
boton.addEventListener('click', calcularPorcentaje);
function calcularPorcentaje(){
const precio = parseFloat(precioInput.value);
const descuento = parseFloat(descuentoInput.value);
if (!precio || !descuento) {
resultadoInput.innerText = 'Por favor, inserta un precio y el valor del descuento.Gracias'
} else if (descuento > 100){
resultadoInput.innerText = 'El valor del descuento no puede ser mayor al 100%.'
} else {
const r = (precio * (100 - descuento))/100;
resultadoInput.innerText = 'El precio del producto con el descuento es S/.' + r;
}
}
document.addEventListener('keydown', function(evento){
if (evento.key === 'Enter'){
evento.preventDefault();
document.querySelector('.button').click();
calcularPorcentaje();
}
});
Esta es mi función:
const calculatePriceWithDiscount = () => {
const vprice = Number(price.value);
const vdiscount = Number(discount.value);
if(!vprice || 0){
result.innerText = `Not exists value of price, please insert it`;
}else if(!vdiscount || 0){
result.innerText = `Not exists value of discount, please insert it`;
}else if(vdiscount >= 100) {
result.innerText = `Discount not >= 100`;
}else{
const newPrice = (vprice * (100 - vdiscount)) / 100;
result.innerText = `The new price with discount is ${newPrice}$`;
}
};
adjunto capture del archivo js.
adjuntaré el repo en github para compartir con la clase al finalizar el curso y así mismo aprender de las correcciones.
sigamos !
realicé un servidor con express para el form de descuento. No coloqué botones, el descuento se aplica al accionar la tecla enter. El input donde se muestra los resultados posee el atributo disabled por defecto, luego se cambia al presionar enter a “false”
La fórmula que yo usé fue :
monto.value - (( porcentaje.value/100 ) * ( monto.value))
Otra forma de limitar el porcentaje de 0 -> 100% es configurando los atributos del input porcentaje para que permita modificar los valores de este elemento, únicamente , con el spinner y sin permitir el ingreso manual por teclado.
<input placeholder="Ingrese descuento" id="discount" type="number" min="0" max="100" onkeydown="return false">
Este es mi codigo en html
Y este es mi codigo en js
Vista principal
Ojito con dejar el formulario vacío
Por fin algo coherente
Para el Don comedias
Incorpore un input (con su label) para el factor cupon y modifique la funcion de calculo de descuento para incorporar el factor de los cupones, los cuales se encuentran hardcodeados en una lista de arrays, si el cupon insertado coincide con alguno de la lista se aplica el descuento correspondiente. Sigo tratando de entender como podria convertir el array en una lista de objetos y asi no tener que aplicar el valor de descuento del cupon de manera manual para cada caso.
listaDeCupones = ["PLATZI2021", "PLATZI2023", "PLATZIDUO"]
function couponValue (hasCoupon) {
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
if (hasCoupon == "PLATZI2021") {
pResult.innerText = 'Tu cupon expiró, intentalo otra vez con otro!'
return
} else if (hasCoupon == "PLATZI2023") {
const newPrice = (price * (100 - (discount + 15))) / 100;
pResult.innerText = 'Disfruta de un 15% adicional por tu cupon.' +' El nuevo precio con descuento es $' + newPrice;
} else if (hasCoupon == "PLATZIDUO") {
const newPrice = (price * (100 - (discount + 20))) / 100;
pResult.innerText = 'Disfruta de un 20% adicional por tu cupon.' +' El nuevo precio con descuento es $' + newPrice;
} else if (hasCoupon == undefined || !hasCoupon){
const newPrice = (price * (100 - discount)) / 100;
pResult.innerText = 'Tu cupon no coincide con los cupones vigentes, pero aun puedes disfrutar de un descuento.' +' El nuevo precio con descuento es $' + newPrice;
console.log(newPrice)
return
}
}
function calcularPrecioConDescuento() {
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
const coupon = (inputCoupon.value.toUpperCase());
const hasCoupon = listaDeCupones.find(element => element === coupon);
if (!price || !discount) {
pResult.innerText = 'CHANCLA por favor llena el formulario';
return;
} else if (discount >= 100) {
pResult.innerText = 'Ajá, ya quisieras, no te vamos dar plata, PAGA!';
return;
} else couponValue (hasCoupon)
}
Yo lo realicé de la sigueinte forma, les comparto una captura y el codigo en JavaScript
const precioProducto = document.querySelector(".price");
const descuento = document.querySelector(".descuento");
const btnDescuento = document.querySelector(".botonDescuento");
const limpiarBtn = document.querySelector(".btnLimpiar");
const dcto = document.querySelector(".valordescuento");
let resultadoFinal = "";
btnDescuento.addEventListener("click", calcularDescuento);
limpiarBtn.addEventListener("click", fnLimpiar);
function fnLimpiar() {
precioProducto.value = "";
descuento.value = "";
resultadoFinal = "";
dcto.innerHTML = "";
}
function calcularDescuento() {
switch (true) {
case precioProducto.value == 0 || descuento.value == 0:
alert(
"Debes colocar un valor mayor a 0 en el precio del producto y en el descuento"
);
break;
case descuento.value > 90:
alert("el descuento debe ser entre 1% y 90%");
break;
case resultadoFinal === "":
let resulDcto = Math.floor(
(precioProducto.value * (100 - descuento.value)) / 100
);
resultadoFinal = resulDcto;
if (resultadoFinal === 0) {
alert("No pueden haber servicios costo 0, Lo siento :(");
20;
} else {
const discountValue = document.createElement("p");
discountValue.innerText =
"El Valor final de tu servicio es de $ " + resultadoFinal;
dcto.append(discountValue);
}
break;
default:
alert(
"ya tienes un descuento, si quieres otro debes agregar nuevos valores"
);
break;
}
}
Puse 3 tipos de Membresia con 2 tipos de descuento
// Membresia: Expert, Amateur, Beginner
// Cupon: gold y silver
const btn = document.querySelector('#calcular');
const inputPrice = document.querySelector('#membresia');
const inputDiscount = document.querySelector('#discount');
const pResult = document.querySelector('#result');
btn.addEventListener('click', calcularPrecio);
function calcularPrecio() {
const tipodeMembresia = inputPrice.value;
const cupon = String(inputDiscount.value);
switch (tipodeMembresia) {
case 'Expert':
price = 1000;
break;
case 'Amateur':
price = 800;
break;
case 'Beginner':
price = 600;
break;
default:
return pResult.innerText = 'Escoja que tipo de Membresia requiere';
}
switch (cupon) {
case 'gold':
discount = 50;
break;
case 'silver':
discount = 25;
break;
default:
return pResult.innerText = 'El tipo de cupon no es valido vualva a intentar';
}
const newPrice = (price * (100 - discount)) / 100;
pResult.innerText = 'el nuevo precio con descuento es ' + newPrice;
}
Hola! He refactorizado un poquito mi aporte anterior, gracias a las propuestas del profe (explicas genial). Eso sí, he decidido seguir con la opción de dejar limpia la función manejadora del evento y repartir lo demás en funciones (como ya lo tenía), ¡ah! y he optado por utilizar if y else if en lugar de dos if separados a la hora de añadir los condicionales que comenta Juan David. ¡Gracias!
'use strict';
const priceInput = document.querySelector('.price');
const discountInput = document.querySelector('.discount');
const priceResult = document.querySelector('.price-result');
const calculateBtn = document.querySelector('.calculate-btn');
// fórmula (p * (100 - d)) / 100
function calculateDiscount() {
const priceValue = parseInt(priceInput.value);
const discountValue = parseInt(discountInput.value);
if (!priceValue || !discountValue) {
return 'Por favor, rellena todos los campos del formulario';
} else if (discountValue > 100) {
return 'Recuerda que el descuento debe ser menor de 100';
} else {
const totalDiscount = (priceValue * (100 - discountValue)) / 100;
return 'El precio con descuento es: ' + totalDiscount + '€';
}
}
function paintHTML(result) {
priceResult.innerHTML = result;
}
function handleClick(event) {
event.preventDefault();
const result = calculateDiscount();
paintHTML(result);
}
calculateBtn.addEventListener('click', handleClick);
JS
<
const valorPrecio = document.querySelector('#ingreso-precio')
const valorDescuento = document.querySelector('#ingreso-descuento')
const borrarDatos = document.querySelector('#reiniciar')
const btnCalculo = document.querySelector('#calcular')
const actualizarPrecio = document.querySelector('#nuevoPrecio')
btnCalculo.addEventListener('click', calcularPrecioConDescuento)
borrarDatos.addEventListener('click', reiniciarCalculadora)
function calcularPrecioConDescuento() {
precio = valorPrecio.value
descuento = valorDescuento.value
if (precio > 0 && descuento > 0) {
if (descuento < 80 && precio !== descuento) {
nuevoPrecio = (precio * (100 - descuento)) / 100
actualizarPrecio.innerHTML = nuevoPrecio
return;
}
else {actualizarPrecio.innerHTML = 'Error'}
}
else {actualizarPrecio.innerHTML = 'Error'}
}
function reiniciarCalculadora() {
actualizarPrecio.innerHTML = ''
}
>
HTML
<
<div class="container">
<h1>Calculadora de precios con descuentos</h1>
<div class="calculadora-entrada">
<label>Ingrese el precio del producto</label>
<input type="number" id="ingreso-precio">
<label>Ingrese el valor del descuento</label>
<input type="number" id="ingreso-descuento">
<div id='nuevoPrecio'>
</div>
<div class="contenedor-boton">
<button type="reset" id="reiniciar">Reiniciar</button>
<button type="submit" id="calcular">Calcular</button>
</div>
</div>
</div>
>
CSS
<
body {
margin: 0;
font-family: sans-serif;
font-size: 85%;
}
.container {
width: 100%;
height: 100vh;
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(44,43,88,0.7875525210084033) 43%, rgba(173,70,184,1) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.calculadora-entrada {
width: 500px;
height: 450px;
background-color: #d0d0d0;
border-radius: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
gap: 20px;
padding: 10px;
margin-top: 20px;
}
h1 {
color: #fff;
}
input {
border-radius: 5px;
padding: 10px 15px;
border: 1px solid #b3b3b3;
}
label {
display: flex;
align-items: center;
font-weight: 700;
}
.contenedor-boton {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 10px;
margin-top: 30px;
}
button {
padding: 10px 20px;
border: 0;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
}
#nuevoPrecio {
height: 40px;
width: 100px;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
button:hover {
background-color: #aeacd1;
border: 1px solid grey;
font-weight: 700;
}
>
Mi aporte:
const btnCalcular = document.querySelector('.btn');
btnCalcular.addEventListener('click',calcularDescuento);
function calcularDescuento(){
const importe = document.querySelector('#importe');
const descuento = document.querySelector('#descuento');
const resultado = document.querySelector('.resultado');
console.log(descuento);
if(descuento.value > 100){
alert('El descuento no puede ser mayor al 100%');
descuento.value = '';
}else{
const calculo = importe.value * (descuento.value/100);
resultado.innerText = `Con el descuento de ${descuento.value}% pagara $${importe.value - calculo} ahorrando un total de $${calculo}`;
}
}
Yo lo habia echo medio aprecido, solo q no puse el return, y retruque con el else del if, ya q la condicion venia en negacion.
const boton = document.querySelector("#calcular");
const inputPrice = document.querySelector("#price");
const inputDiscount = document.querySelector("#discount");
const pResult = document.querySelector("#result");
console.log(boton);
console.log(inputPrice);
console.log(inputDiscount);
console.log(pResult);
boton.addEventListener('click', calcularPrecioConDescuento);
function calcularPrecioConDescuento(){
// (P *(100 -D)) /100
const price = Number(inputPrice.value);
const discount = Number(inputDiscount.value);
if(!price || !discount ){
pResult.innerHTML =` Por favor ingresa un valor en el formulario`
}else{
const newPrice = (price * (100 - discount)) / 100;
pResult.innerHTML =`El precio con descuento es de $${newPrice}`;
}
if (discount > 100){
pResult.innerHTML =`No se puede dar un descuento de esta magnitud`;
}
}
Pause el video y lo mejore 😃
Siento que estoy aprendiendo mucho 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?