No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Calculando descuentos con JavaScript

7/30
Recursos

Aportes 84

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

No quiero sonar explotador pero por favor pongan a Juan David a hacer todos los cursos jajajajaj, explica muy bien!!

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

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

Mi reto:

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

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

Comparto mi soluci贸n, reutilice un poco el codigo del reto anterior sin embargo cree unas nuevas constantes locales para alli guardar el 鈥淐odigo 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.

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

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

Al final me fui por las ramas y termine haciendo un mini e-comerce con la fake api de platzi jasjajs
Repo
deploy

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 (%)馃帿馃帿馃帿

Resultado:

Hola a todos, ac谩 les comparto el reto de la clase ya desplegada en GitHub Pages:

<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 (%)

 <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 鈥榓rrow 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(鈥榢eydown鈥) 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 鈥渇alse鈥

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

![](

Es sorprendente como este tipo de ejercicios te ayudan a evolucionar.!!!

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