Calculando descuentos con JavaScript

Clase 7 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Clase anteriorSiguiente clase

Juan Fernando Yepes Muñoz

student•

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

Juan David Reyes

student•

XD se ve que juan está como un poquillo cansado pero le agradecemos el esfuerzo

Carlos Andres Alavez Santiago

student•

Yo no soy compatible con su forma de enseñanza, con algunos alumnos uso ese tipo de forma de enseñar, pero yo no soy compatible, me cuesta, mi concentración se pierde, lo bonito es que haya diferentes maestros por que no todos aprendemos de igual manera

Paul Vazquez Cervantes

student•

Nestor Rios Garcia

student•

Muy fancy c:

Laura Roa

student•

:) 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">
        <h2>Coupons</h2>
        <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;
}

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

Orlando Rodriguez

student•

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

Sergio Alejandro Saldaña Rangel

student•

Gracias por el descuentazo! 😁

Gustavo Muñiz Barrios

student•

Esta es mi solución, esta sencilla pero funciona :) Repositorio: https://github.com/GustavoMunizBarrios/taller-math-js/tree/main/percentages

Miguel Negron Garcia

student•

Bien profesional, Esta bien bonito.

Fabian Camilo Huertas Suarez

student•

te quedo genial!

Sebastián Ricardo Ochoa Pete

student•

Mi reto:

Lucino Adan Pelcastre Roblero

student•

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

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

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

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

Yimi Alejandro Gaviria Escobar

student•

gracias a tu codigo conoci algo nuevo hoy, muchas gracias

Roberto Fernández Romero

student•

Aquí mi aporte, espero que les guste.

HTML:
JS:

Maria del Carmen Valero Carreño

student•

<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

Stivenson David Mejia Palacios

student•

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.

Juan Castro

teacher•

Me gusta ¿Lo tienes publicado en algún repo?

Stivenson David Mejia Palacios

student•

Claro que sí Profe Juanda :D. hace poco lo subí en github

Este es el link de la WEB https://stivensonmejia.github.io/Taller-JavaScript-Matematicas-Estadistica-Basica/

Este es el link del Codigo https://github.com/StivensonMejia/Taller-JavaScript-Matematicas-Estadistica-Basica

Ricardo Alfonso Chavez Vilcapoma

student•

Mi aporte:

Sebastián Caraballo Marzola

student•

![](

<body>
    <h1 class="title">Descuento de produtos</h2>
    <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>
        <h3>Precio descontado es de :</h3>
        <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>

Josue Cerron Tuesta

student•

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

Ivan Camilo Buitrago Buitrago

student•

grande Juan David!!

Héctor Galindo

student•

Mi solucion

Luis Miguel Rodriguez

student•

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

Irving Saenz

student•

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

Brandon Cortes Rivera

student•

La verdad no sé por qué me toma el valor del input sin llamarlo pero así quedo.

Juan Castro

teacher•

Tienes tu código en GitHub, Brandon? Se ve espectacular

Brandon Cortes Rivera

student•

Seguro esta es la liga

repositorio

Estefania Ballesteros

student•

Solución al reto:

Jesús Eduardo Vásquez Monsalve

student•

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

}

<!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">
        <h2>Coupons</h2>
        <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>

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

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

<!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</h6>
        <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>

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

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

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

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

<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

<body>
    <h1 class="title">Descuento de produtos</h2>
    <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>
        <h3>Precio descontado es de :</h3>
        <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>

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

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

}

Calculando descuentos con JavaScript

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Playground: Transforma Objetos en Arrays

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

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

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

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos