Ejercicio de crear cupones de descuento

En este caso yo evitaría usar el switch ya que este tendría que realizar muchos pasos para llegar a la condicional que queremos. Yo usaría un objeto de la siguiente manera:

const discounts = {
  platzivacation: 10,
  mothersday: 15,
  independenceday: 20,
  christmas: 50,
};

Luego pasaría el input de descuento a texto. Validaría de la siguiente manera el descuento que se quiere aplicar:

function percentage(price) {
  let total;
  const discountOnNumber = discounts[discount.value];

  if (!discountOnNumber) return "Discount cannot be found";

  total = Number((price * (100 - discountOnNumber)) / 100);

  return `$${total}`;
}

Podría validarse el tipo de dato de las variables para asegurar que son textos o números en caso de que se quiera aplicar un descuento en número directamente en vez de un cupón.

Esta fue mi solución, si me pueden hacer criticas seria genial

Hice el ejercicio de códigos de descuento de la siguente forma:

Pueden ver mi código aquí

Lo hice de dos maneras:
1. array de Objetos:

let promotion = [
    { 'Platzi Vacation': 15 },
    { 'Platzi Weekend': 30 },
    { 'Platzi New Year': 45 },
];

/**Promotion code */
btn.addEventListener('click', () => {
    if (!input1.value || !input2.value) {
        p.innerText = 'Please, insert values for both price and promotion code!';
    } else {
        if (promotion.flatMap(item => Object.keys(item)).includes(input2.value)) {
            let discount = (+input1.value * (100 - promotion.find(item => item[input2.value])[input2.value])) / 100;
            p.innerText = `You get a ${promotion.find(item => item[input2.value])[input2.value]}% off. Price with discount: $${discount}`;
        } else { p.innerText = 'There is no promotion with this code.'; }
    }

});

2. Objetos:

let promotion = {
    'Platzi Vacation': 15,
    'Platzi Weekend': 30,
    'Platzi New Year': 45,
};

/**Promotion code */
btn.addEventListener('click', () => {
    if (!input1.value || !input2.value) {
        p.innerText = 'Please, insert values for both price and promotion code!';
    } else {
        if (Object.keys(promotion).includes(input2.value)) {
            let discount = (+input1.value * (100 - promotion[input2.value])) / 100;
            p.innerText = `You get a ${promotion[input2.value]}% off. Price with discount: $${discount}`;
        } else { p.innerText = 'There is no promotion with this code.'; }
    }

});

Objetos con forEach

const inputPrice = document.querySelector('#price')
const inputCoupon = document.querySelector('#coupon')
const btn = document.querySelector('#calcular')
const pResult = document.querySelector('#result')

const coupons = [
  {
    name: 'Managua',
    discount: 15
  },
  {
    name: 'Sol',
    discount: 20
  }
]

btn.addEventListener('click', calcularPrecioConDescuento)

function calcularPrecioConDescuento () {
  const price = Number(inputPrice.value)
  const coupon = inputCoupon.value
  let newPrice

  if (!price || !coupon) {
    pResult.innerText = 'Por favor llena el formulario'
    return
  }

  coupons.forEach(item => {
    if (item.name === coupon) newPrice = (price * (100 - item.discount)) / 100
  })

  pResult.innerText = newPrice
    ? 'Precio con descuento es $' + newPrice
    : 'Cupon no es valido'
}```

😄 Estas clases hacen que vea lo mucho que he aprendidooo! No se si me fui muy lejos porque llegue a usar mapas pero me encanto la experiencia de tratar de hacer este ejercicio con arrays de objetos! Es la primera vez que programo algo así cualquier sugerencia de como podría hacerlo menos complejo es bien recibida 😃

//.....
const inputPrice = document.querySelector('#price');
const inputCoupon = document.querySelector('#coupon')
const btn = document.querySelector('#calculate');
const pResult = document.querySelector('#result')

btn.addEventListener('click', calculatePriceWithDiscount);

const coupons = [
    {name: 'summer', discount: 20},
    {name: 'fall', discount: 25},
    {name: 'winter', discount: 30},
]
coupons.push({name: 'spring', discount: 40}); // adding an object to the array of objects
coupons.push({name: 'pokemon', discount: 50}); // adding another object to the array of objects

console.log(coupons);

const arrayKeys = coupons.map((coupon) => coupon.name).flat();
console.log("Keys", arrayKeys); // creating an array with the names
const arrayValues = coupons.flatMap((coupon) => coupon.discount);
console.log("values", arrayValues); // creating an array with the values

function calculatePriceWithDiscount () {
    const price = Number(inputPrice.value);
    const coupon = inputCoupon.value;
    let discount;

   if(arrayKeys.includes(coupon)) {
    for(let i = 0; i < arrayKeys.length; i++) {
        //console.log(arrayKeys[i])
        if(arrayKeys[i] == coupon) {
            console.log(arrayKeys[i]);
            console.log(arrayValues[i]);
            discount = arrayValues[i]
        }
    }
} 
else {
    pResult.innerText = "The coupon is not valid"
    return;
   }

const newPrice = (price * (100 - discount)) / 100;

pResult.innerText = "The price with discount is $" + newPrice;

}

Aquí mi calculador de descuentos

Hola a todos, acá les comparto el reto de la clase. Los cupones se pueden ingrersar en JavaScript cambiando un objeto y automáticamente se muestran en la página (esto solamente con fines educativos):

Acá pueden ver la página desplegada en GitHub Pages y el código lo encuentran en mi repositorio. Saludos.

Antes del minuto 1:00

Me tardé varias horas, pero me gusto el resultado.

Aqui pueden ver mi código: Repositorio, commit: clase 8
Se acepta feedback. C:

Lo resolví con un switch el tema de los cupones:

Les comparto mi código.

https://wsquintero.github.io/EjerciciosMatematicas/.

Intenté que fuese un poco más iterable, para que no fuese los condicionales tan especificos.

Entonces creé un objeto con los cupones y sus respectivos porcentajes.

const cupones = {
  cupon1:20,
  cupon2:30,
  cupon3:50,
};

Despues me puse a la tarea de crear los condicionales ( que como les dije, me sacaron canas), no lograba entender muy bien como iterar el objeto para poder condicionarlo adecuadamente.

SIn embargo, encontré :

let claves =Object.keys(cupones);

Que me permitió volverlo iterable.

Ahí fue solo entender bien como filtrar con el método .find.

Les dejo mi solución:

const precio = document.querySelector(".precio").value;
const descuento = document.querySelector(".descuento");
const button =document.querySelector(".button");
const resultado =document.querySelector(".resultado");
const valor= document.createElement("p");
const formatterPeso = new Intl.NumberFormat('es-CO', {
  style: 'currency',
  currency: 'COP',
  minimumFractionDigits: 0
});
const cupones = {
  cupon1:20,
  cupon2:30,
  cupon3:50,
};

let claves =Object.keys(cupones);
let formula;

const addClassBlue= ()=> {
  valor.classList.add("valor");
  valor.classList.remove("valormal");
};
const removeClassBlue= ()=> {
  valor.classList.add("valormal");
  valor.classList.remove("valor");
};



button.addEventListener("click", mostrarResultado);



function mostrarResultado() {
    
    let b = claves.find(dis = (nombre) => {
        return nombre==descuento.value;
            } );  

    console.log(b==descuento.value)
if (b==descuento.value){
  formula = (Number(precio)* (100 - Number(cupones[descuento.value]) ) /100);
  resultado.appendChild(valor);
  valor.innerHTML="El valor final de tu compra es: "+formatterPeso.format(formula);
  addClassBlue();
  descuento.value="";
  

}else{
  resultado.appendChild(valor);
  valor.innerHTML="Por favor digita un cupon correcto";
  descuento.value="";
  removeClassBlue();

}
    
    
}
 

MI aporte aplicando cupones de descuento.

Este es mi aporte.

DEMO: https://jmanriquecha.github.io/javascript-math/caja.html
Code: https://github.com/jmanriquecha/javascript-math/tree/main

Realicé el reto sin eliminar la opción porcentaje de descuento, los cupones los validé creando un array con “llaves:valor”. En este caso, me preocupé por realizar las validaciones principales y solo permitiendo el porcentaje de descuento o el cupón.
Espero que esto les ayude.
El JS queda de la siguiente manera:

const btnDcto = document.querySelector('.btnDcto');
let precioValor=document.querySelector('.precioValor');
let resultado = document.querySelector('.resultado');

btnDcto.addEventListener('click',()=>{
  let precio = Number(document.querySelector('.precio').value);
  let dcto = Number(document.querySelector('.descto').value);
  const cupon = document.querySelector('.cupon').value.toUpperCase();
  let imprDcto = document.querySelector('.valorDcto');
  let porcentaje = (precio*(100-dcto))/100;
  const listaCupones=[{A1:10},{B1:20},{C1:30},{D1:40},{E1:50},{F1:60},{G1:70},{H1:80},{I1:90},{'J1':100}];

  if(cupon && !dcto){ //Validamos cupon true y dcto false.

      //Usamos una función flecha en el metodo find()como callback, es decir, asignamos un parametro a la funcion flecha para que retorne el valor, solo si este valor no es igual a undefined. Este parametro que retorna es la llave valor que encontró y se convierte en el valor de cuponValido.
    let cuponValido = listaCupones.find(obj => obj[cupon] !== undefined);
    console.log(cuponValido);
        if(cuponValido){ //Si es true, es decir, si encontró el valor en el array.


            //cuponValido[cupon] toma solo el valor de la llave valor obtenidos.
            let valorCupon = cuponValido[cupon];
            //Aplicamos el cupón de descuento.
            let dctoCupon = (precio*(100-valorCupon))/100;
            resultado.innerText =
            `Precio = ${precio}€.
            Cupón de Descuento = ${valorCupon}%.
            Precio final = ${dctoCupon}€.
            `
        }else{
            resultado.innerText=`¡Tu cupón no es valido! :(
            Por favor ingresa un cupón válido.`
        }
     }else if(dcto>=100){
         resultado.innerText=`¡Ya quisieras!
         El porcentaje no puede ser igual o mayor que el 100%.`
     }else if(dcto && cupon){
         resultado.innerText=`Lo sentimos.
         !Los cupones y descuentos no son acumulables¡`;
     }else if(dcto && !cupon){
        resultado.innerText =
        `Precio = ${precio}€.
        Descuento = ${dcto}%.
        Precio final = ${porcentaje}€.
        `
    }else{
        resultado.innerText=`¡Oh! lo sentimos :(
            ¡Debes llenar los dos campos con valore válidos para poder calcular un descuento!`
    }
})

El HTML quedaría así:

<!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>
</head>
<body>
    <label for="precio">Ingresa el precio del producto</label>
    <input type="text" class="precio"><br>
    <label for="descto">Ingresa el porcentaje de descuento</label>
    <input type="text" class="descto"><br>
    <label for="cupon">Ingresa el Cupón</label>
    <input type="text" class="cupon"><br>
    <button type="button" name="Enviar" class="btnDcto">Calcular</button>
  <div>
    <p class="resultado"></p>
  </div>
</body>
<script type="text/javascript" src="descuentos.js"></script>
</html>

Con esta clase le agregue un poco de dificultad al ejercicio y decidi que el usuario pudiera escoger si hacer descuento porcentual o por cupon

Por aca dejo el Javascript

Script 1

const inputproductvalue = document.querySelector('.hero__section__container__left__side--inputnumber')
const inputpercent = document.querySelector('.hero__section__container__left__side--inputpercent')
const submitbutton = document.querySelector('.hero__section__container__left__side--buttonsubmits')
const submitbuttoncoupon = document.querySelector('.hero__section__container__left__side--buttonsubmitcoupon')
const percentbutton = document.querySelector('.hero__section__container__buttonscontainer--percent')
const couponbutton = document.querySelector('.hero__section__container__buttonscontainer--coupon')
const containerbuttons = document.querySelector('.hero__section__container__buttonscontainer')
const returnbutton= document.querySelector('.hero__section__container__left__side--buttonreturn')
const returnbutton2 = document.querySelector('.hero__section__container__left__side--buttonreturn2')
const form1 = document.querySelector('.hero__section__container__left_side__formcontainer--form')
const textresult = document.querySelector('.hero__section__container__left__side__formcontainer--text')
const percentform = document.querySelector('.hero__section__container__left_side__formcontainer--form')
const couponform = document.querySelector('.hero__section__container__left_side__formcontainer2--form')
const errorcontainer = document.querySelector('.error__popup')
const errorclosecontainer= document.querySelector('.error__popup__buttoncontainer--closetext')
let productvalue1, productpercent1;
let productvalue2 , productcoupon;

const discountcoupons =[
  {coupon:"mothersday",discount:10},
  {coupon:"summer20",discount:20},
  {coupon:"weekends",discount:50},

]

percentbutton.addEventListener('click',openpercentform)
couponbutton.addEventListener('click',opencouponform)
form1.addEventListener('submit' , sumadeporcentaje)
returnbutton.addEventListener('click' , closeform)
returnbutton2.addEventListener('click',closeform)
couponform.addEventListener('submit',couponsdiscount)
errorclosecontainer.addEventListener('click',closepopup)

function closepopup(){
  errorcontainer.classList.remove('error__popup--display')
  errorcontainer.classList.add('error__container')
}

function closeform(event){
  event.preventDefault()
  percentform.classList.remove('hero__section__container__left_side__formcontainer--formdisplay')
  couponform.classList.remove('hero__section__container__left_side__formcontainer2--form--display')
  containerbuttons.classList.add('hero__section__container__buttonscontainer')
  containerbuttons.classList.remove('hero__section__container__buttonscontainer--hidden')
}

function opencouponform(){
  couponform.classList.toggle('hero__section__container__left_side__formcontainer2--form--display')
  percentform.classList.remove('hero__section__container__left_side__formcontainer--formdisplay')
  percentform.classList.add('hero__section__container__left_side__formcontainer--form')
  containerbuttons.classList.remove('hero__section__container__buttonscontainer')
  containerbuttons.classList.add('hero__section__container__buttonscontainer--hidden')
}

function openpercentform(){
 percentform.classList.add('hero__section__container__left_side__formcontainer--formdisplay') 
 containerbuttons.classList.remove('hero__section__container__buttonscontainer')
 containerbuttons.classList.add('hero__section__container__buttonscontainer--hidden')
 couponform.classList.remove('hero__section__container__left_side__formcontainer--formdisplay')
 couponform.classList.add('hero__section__container__left_side__formcontainer')
}


function sumadeporcentaje(event){

  if(sumadeporcentaje = true){

    console.log({event});
    
    // evitamos que la pagina se recargue cuando hagamos uso del formulario
    event.preventDefault()

    // establecemos nuestros parametros y usamos el console log para revisar si no tenemos ninguna falla y los valores se estan impriendo en consola correctamente
    productvalue1 = parseFloat(inputproductvalue.value);
    productpercent1 = parseFloat(inputpercent.value);
 
    // guardamos los valores para posteriormente mostrar el resultados en la otra pagina del html
    localStorage.setItem('productvalue' , inputproductvalue.value);
    localStorage.setItem('discountvalue' , inputpercent.value);
    console.log('Este es valor guardado en memoria' + ' ' + localStorage.getItem('productvalue'))
    console.log(localStorage.getItem('discountvalue'))
    
    // Esta formula nos va permitir saber el descuento del producto
    let total = ((productvalue1 * (100 - productpercent1)) / 100)
    console.log(total)

    localStorage.setItem('totalfinal' , total)
    console.log('Este es valor guardado en memoria del total' + ' ' + localStorage.getItem('totalfinal'))
    

    window.location.href = 'result.html';

  }



    
}




function couponsdiscount(event){
    event.preventDefault()
  
    const inputcoupon= document.querySelector('.hero__section__container__left__side--inputcoupon')
    const coupondiscountvalue = discountcoupons.find(couponObj => couponObj.coupon === inputcoupon.value.trim());
    const inputproductvalue2 = parseFloat(document.querySelector('.hero__section__container__left__side--inputnumber2').value);


    if(coupondiscountvalue){
    

    console.log('Este es valor guardado en memoria' + ' ' + localStorage.getItem('productvalue'))
    console.log(localStorage.getItem('coupondiscount'))
  
    let total = ((inputproductvalue2 * (100 - coupondiscountvalue.discount)) / 100)
    console.log(total)
    localStorage.setItem('totalcoupondiscount', total)
    console.log(localStorage.getItem('totalcoupondiscount'))
    
    localStorage.setItem('productvalue', inputproductvalue2);
    localStorage.setItem('coupondiscount', coupondiscountvalue.discount);
    window.location.href ='result2.html'
  
  
  
  } else{
    console.log('no funciona')
    errorcontainer.classList.toggle('error__popup--display')
  }
  

}

Script 2

const returnbutton = document.querySelector('.result__hero__leftcontainer--returnbutton')
const totalFinal = localStorage.getItem('totalfinal');
const discountvalue = localStorage.getItem('discountvalue');
const producttvalue = localStorage.getItem('productvalue');
const productvaluetext = document.querySelector('.resulthero__rightcontainer__titlerow1--productvaluetitle')
const productvaluefinaltext = document.querySelector('.resulthero__rightcontainer__titlerow2--productfinalvalue')
const productdiscountvaluetext = document.querySelector('.resulthero__rightcontainer__titlerow2--productdiscount')

returnbutton.addEventListener('click', pager)

function pager (){
  console.log(" esta funcionando")
  window.location.href = 'index.html';
}

productvaluetext.innerText = "$" + " " + producttvalue;
productvaluefinaltext.innerText = "$" + " " + totalFinal;
productdiscountvaluetext.innerText = "("+"%" + discountvalue + ")";

Script 3

const returnbutton = document.querySelector('.result__hero__leftcontainer--returnbutton');
const totalFinal = localStorage.getItem('totalcoupondiscount'); // Cambiado de 'totalcoupondiscount' a 'totalfinal'
const discountvalue = parseFloat(localStorage.getItem('coupondiscount')); // Corregido 'ParseFloat' a 'parseFloat'
const producttvalue = parseFloat(localStorage.getItem('productvalue')); // Corregido 'ParseFloat' a 'parseFloat'
const productvaluetext = document.querySelector('.resulthero__rightcontainer__titlerow1--productvaluetitle');
const productvaluefinaltext = document.querySelector('.resulthero__rightcontainer__titlerow2--productfinalvalue');
const productdiscountvaluetext = document.querySelector('.resulthero__rightcontainer__titlerow2--productdiscount');

returnbutton.addEventListener('click', pager);

console.log(totalFinal); // Verificar el valor de totalFinal
console.log(discountvalue); // Verificar el valor de discountvalue
console.log(producttvalue); // Verificar el valor de producttvalue

function pager() {
  console.log("Esta funcionando");
  window.location.href = 'index.html';
}

productvaluetext.innerText = "$" + " " + producttvalue;
productvaluefinaltext.innerText = "$" + " " + totalFinal;
productdiscountvaluetext.innerText = "(" + "%" + discountvalue + ")";

Lo hice con codigo sencillo de entender, aqui les dejo la vista de como quedo:

Aqui el codigo JS 😛

const precioInicialInput = document.querySelector('.costo-inicial');
const cuponPorcentajeInput = document.querySelector('.cupon-ingresado');
const botonCalculo = document.querySelector('.boton');
const pResult = document.querySelector('#result')
const coupons = {
    diaMadres: 50,
    valentin: 20,
    christmas: 30,
    blackFriday: 55,
}

botonCalculo.addEventListener('click', calcularPrecioFinal);

function calcularPrecioFinal(event){
    event.preventDefault();
    const cuponPorcentaje = coupons[cuponPorcentajeInput.value];
    console.log(cuponPorcentaje);
    const precioInicial = precioInicialInput.value
   
    console.log('prueba');

    if(!precioInicial || !cuponPorcentajeInput.value){
        pResult.innerText = "Ingresa los datos que se requieren para calcular el costo final que deseas"
        return;
    }
    if(!cuponPorcentaje){
        pResult.innerText = "el cupon que ingresaste es invalido, vuelve a ingresar el nombre del cupon (tener presente mayusculas y minusculas)"
        return;
    }
    
    const resta = (100 - cuponPorcentaje)
    const newPrice = (precioInicial * resta) / 100;
    pResult.innerText = 'El nuevo precio con descuento es $' + newPrice;
};

aqui el codigo HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>calculos a la mano</title>
    <link rel="stylesheet" type="text/css" href="descuento.css" />
  </head>
  <body class="body">
    <div class="div-general">
      <h1 class="titulo">Calcula el precio final</h1>
      <div class="texto">
      <p>
        Ingresando el costo inicial y el porcentaje de descuento al que aplique,
        descubriras el costo final a pagar.
      </p>
    </div>
      <div class="valores">
        <form class="form">
          <label>Costo Inicial:<input type="number" class="costo-inicial label" /></label>
          <br />
          <label>Cupon: <input type="text" class="cupon-ingresado label" /></label>
          <br />
          <button value="Submit" class="boton">Calcular</button
          ><br />
          <p id="result"> </p>
        </form>
      </div>
    </div>
  <script src="./descuento.js"></script>
  </body>
</html>

Y aqui el codigo CSS 😃

.body {
  background: radial-gradient(
    circle at 50% 50%,
    #88e5ff 0,
    #0cb5ed 50%,
    #0087cb 100%
  );
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.body,
.html {
  height: 100vh;
}

.div-general {
  background: white;
  opacity: 0.6;
  width: 50%;
  height: 63%;
  margin: 0 auto;
  text-align: center;
  padding: 18px;
  border-radius: 10%;
  font-size: 15px;
}

.titulo {
  color: black;
  padding-top: 16px;
}
.boton {
  margin-left: auto;
  margin-bottom: 30px;
  padding: 10px 15px;
  background-color: #00c9be;
  color: white;
  border-radius: 6px;
  border-color: #c8c6c4;
  cursor: pointer;
  font-size: 16px;
  margin-top: 30px;
}
.boton:hover {
  background-color: #00d1b7;
  transform: translateY(-2px);
}

.label {
  margin: 10px;
  border: none;
  background: #c8c6c4;
  padding: 7px;
}

.valores {
  margin: 5px;
}

.form {
  position: relative;
  padding: 13px;
  font-size: 20px;
}

#result {
  color: red;
  font-size: 1px;
}

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

En la clase anterior en el reto de hacer este ejercicio ya habia usado los objetos por que me parecieron mas organizados y faciles de usar que poner cada cupon directamente, asi me quedo usando switch:

Javascript:

function descuento_code(){
    const cupons_code = {
        NeWYear2023: 20,
        BlacKFriDay2023: 50,
        EnDyeAr2023: 60,
      };

      switch (input2_code.value){
        case 'NeWYear2023':
          result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code["NeWYear2023"]) / 100;
          break;
        case 'BlacKFriDay2023':
          result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code["BlacKFriDay2023"]) / 100;
          break;
        case 'EnDyeAr2023':
          result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code["EnDyeAr2023"]) / 100;
          break;
        default: 
          result_code.innerHTML = "Pon un codigo de descuento valido";
          return;
      }
      if (!input1_code.value || !input2_code.value){
        result_code.innerHTML = "Pon el precio y el codigo de descuento";
      } 
}

Lo pude hacer con un solo caso y con un if, asi:

un solo if:

function descuento_code(){
    const cupons_code = {
        NeWYear2023: 20,
        BlacKFriDay2023: 50,
        EnDyeAr2023: 60,
   };

         if (input2_code.value == input2_code.value){
        result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code[input2_code.value]) / 100;
      } 
}

Un solo caso:

function descuento_code(){
    const cupons_code = {
        NeWYear2023: 20,
        BlacKFriDay2023: 50,
        EnDyeAr2023: 60,
   };

 switch(input2_code.value){
        case input2_code.value:
          result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code[input2_code.value]) / 100;
          break;
      }
}

Para resolver los errores en cada ejercicio hize lo siguiente:

un solo if:

function descuento_code(){
    const cupons_code = {
        NeWYear2023: 20,
        BlacKFriDay2023: 50,
        EnDyeAr2023: 60,
   };

         if (input2_code.value == input2_code.value){
        result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code[input2_code.value]) / 100;
      } 

      if (!input1_code.value || !input2_code.value){
        result_code.innerHTML = "Pon el precio y el codigo de descuento";
      } else if (input2_code.value != "NeWYear2023" && input2_code.value != "BlacKFriDay2023" && input2_code.value != "EnDyeAr2023"){
        result_code.innerHTML = "Pon un codigo de descuento valido";
      } 
}

Un solo caso:

function descuento_code(){
    const cupons_code = {
        NeWYear2023: 20,
        BlacKFriDay2023: 50,
        EnDyeAr2023: 60,
   };

 switch(input2_code.value){
        case input2_code.value:
          result_code.innerHTML = Number(input1_code.value) * (100 - cupons_code[input2_code.value]) / 100;
          break;
      }

      if (!input1_code.value || !input2_code.value){
        result_code.innerHTML = "Pon el precio y el codigo de descuento";
      } else if (input2_code.value != "NeWYear2023" && input2_code.value != "BlacKFriDay2023" && input2_code.value != "EnDyeAr2023"){
        result_code.innerHTML = "Pon un codigo de descuento valido";
      } 
}

function calculatePriceWithDiscount() {
  const price = Number(inputPrice.value);
  const coupon = inputCoupon.value;

  const coupons = {
    hopefully_nobody_uses_this_coupon: 100,
    who_says_no_to_a_coupon: 50,
    yes_this_is_a_coupon: 10,
  };

  if (!price || !coupon) {
    result.innerText = "Debes ingresar un precio y un cupón";
    return;
  }

  let discount;

  if (coupons[coupon]) {
    discount = coupons[coupon];
  } else {
    result.innerText = `El cupón ${coupon} no es válido`;
  }

  const newPrice = (price * (100 - discount)) / 100;

  result.innerText = `El precio con descuento es de $${newPrice}`;
}

Hola! me costó muchisimo Poder integrar un input extra que funcionase junto con el input de la clase anterior, NOTA: esto no lo han enseñado lo encontre en documentación aqui les dejo el codigo HTML CSS Y JS con comentarios
![](

HTML

<!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">
    <link rel="stylesheet" href="./maqueta2.css">
    <title>Cupones de descuento</title>
</head>
<body>
    <nav class="nav_container">
        <h2>Los mejores descuentos los encuentras aqui</h2>
    </nav>
    <main class="main_container">
        <aside class="aside_container">  <!-- este va del lado izquierdo y aqui ponemos los inputs -->
            <h3> calcule un descuento o coloque un cupon válido </h3>
            <label for="price">Precio base
                <input type="number" id="price" placeholder="precio del producto en MXN">
            </label>
            <label for="discount"> Introduzca un descuento
                <input type="number" name="" id="discount"  placeholder="0 a 70% de descuento">
            </label>
            <label for="coupon"> Introduzca su cupon
                <input type="text" name="" id="coupon" placeholder="pida un cupón">
            </label>
            <input type="button" value="calcular" id="calculate" class="button">
            <input type="button" value="cancelar" id="cancel" class="button">
        </aside>
        <section class="section_container">
            <!-- aqui vamos a poner el poderosisimo descuento con el div y una imagen -->
            <figure>
                <img src="./4.png" alt="" srcset="">
            </figure>
            <div class="alert">
                <p id="alert"></p>
                <p id="cancel__alert"></p>
            </div>
        </section>
    </main>
    <script src="./maqueta2.js"></script>
</body>
</html>

CSS
ESTE ES EL CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    height: 100vh;
    background-image: linear-gradient(205deg, #8affb1 0, #70f7b6 10%, #54e9b8 20%, #39d6b5 30%, #1ec0ad 40%, #08a79f 50%, #078e8f 60%, #0f797f 70%, #176872 80%, #1c5a66 90%, #1f4f5d 100%);
}

.nav_container {
    width: 90vw;
    height: 10%;
    text-align: center;
    margin: 0 auto;
    padding-top: 2rem;
}

.nav_container h2 {
    color: white;
    font-size: 2.4rem;
    font-weight: 600;
}

.main_container {
    width: 90vw;
    height: 80%;
    display: flex;
    align-self: center;
    justify-content: center;
    flex-direction: row;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.496);
    box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.aside_container {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.aside_container h3 {
    text-shadow: 0 0 2px black;
    font-size: 2rem;
    color: white;
    text-align: center;
    margin-top: 12px;
}

.aside_container label {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    text-align: center;
    font-size: 18px;
    text-shadow: 0 0 1px black;
    color: white;
    width: 60%;
    font-weight: 500;
}

.aside_container input {
    border-radius: 8px;
    box-shadow: none;
    border-color: transparent;
    margin-top: 4px;
    height: 22px;
}

.aside_container input::placeholder {
    text-align: center;
    color: rgba(0, 0, 0, 0.657);
    font-size: 12px;
    font-weight: 600;
}

.aside_container .button {
    margin-top: 18px;
    margin-bottom: 4px;
    width: 60%;
    height: 22px;
}

#calculate {
    background-color: rgb(0, 0, 163);
    color: white;
    font-size: 12px;
    font-weight: 800;
}

#cancel {
    
    font-weight: 800;
    border: 2px solid purple;
    font-size: 12px;
}

.section_container {
    width: 50%;
    font-display: flex;
    flex-direction: column;
}

.section_container figure {
    width: 50%;
    margin: 12px auto 0px auto;
}

.section_container img {
    width: 100%;
}

.section_container .alert {
    margin-top: 35px;
}

#alert {
    text-align: center;
    font-size: 34px;
    color: white;
    font-weight: 700;
}
#cancel__alert{
    text-align: center;
    font-size: 34px;
    color: rgb(196, 255, 196);
    font-weight: 700;
}

JAVASCRIPT LO DEJO EN COMENTARIOS

Tiene potencial de que se van a usar ciclos 🗿

mi solucion fue esta para el descuente

const btn = document.querySelector('#calcular');
const inputprecio = document.querySelector('#price');
const inputdescuento = document.querySelector('#discount');
const inputcoupon = document.querySelector('#coupon');
const pResult = document.querySelector('#result');

btn.addEventListener('click', calcularPrecioConDescuento);

function calcularPrecioConDescuento() {
    
    if (!inputprecio.value) {
        pResult.innerText ='Por favor ingresa el precio original';
        return;
    } 
    
    let descuento = 0;
    
    if (inputdescuento.value && !isNaN(Number(inputdescuento.value))) {
        descuento = Number(inputdescuento.value);
        if (descuento > 100) {
            pResult.innerText ='No te vamos a pagar';
            return;
        }
    } 
    
    if (inputcoupon.value === 'DESCUENTO20') {
        descuento = 20; // Aplicar descuento del 20%
    } else if (inputcoupon.value === 'DESCUENTO30') {
        descuento = 30; // Aplicar descuento del 30%
    }
    
    if (descuento === 0) {
        pResult.innerText ='Por favor ingresa un descuento o un cupón válido';
        return;
    }
    
    const newPrice = (Number(inputprecio.value)*(100-descuento))/100;
    
    pResult.innerText = 'El nuevo precio con descuento es $' + newPrice.toFixed(2);
}

en los if estan los dos cupones que puse

Si los cupones estan parametrizados en HTML como options dentro de un select

<code> 
const precioInput = document.getElementById("precio");
const descuentoSelect = document.getElementById("descuento");
const calcularButton = document.getElementById("calcular");
const precioFinalOutput = document.getElementById("precio-final");

calcularButton.addEventListener("click", function() {
  const precio = parseFloat(precioInput.value);
  const descuento = parseFloat(descuentoSelect.value);
  const precioFinal = precio * (1 - descuento);
  precioFinalOutput.innerText = `El precio final es: ${precioFinal.toFixed(2)}`;
});

RETO CUMPLIDO:

yo desde la otra clase lo hice así…

var getPrice
var getDesc
var resultado = document.getElementById('resul')
let coupons = [
    {name: "coupon1", discount:15},
    {name: "coupon2", discount:20},
    {name: "coupon3", discount:30}
]

function calculate
()
{
    var getPrice = document.getElementById('price')
    var getDesc = document.getElementById('desc')
    var price = parseInt(getPrice.value)
    var desc = getDesc.value
    let unvalid = 0
    for(let coupon of coupons){
        if(desc == coupon.name){
            var agh = (price*(100-coupon.discount)) / 100
            resultado.innerText=agh
            unvalid=1
        }
    }

    if(unvalid==0)
    { resultado.innerText="Cupón no valido" }
}

Mi solución:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Porcentajes</title>
  </head>
  <body>
    <h1>Cómo calcular precios con descuentos</h1>
    <div>
      <p>
        Calcula el porcentaje de descuento. Digita su precio y descuento
      </p>
      <label for="price">
        Precio
      </label>
      <input type="number" name="price" id="price" />
      <div class="cupones">
        <p>
          Escribe el descuento que tienes
        </p>
        <label for="discount">Descuento</label>
        <input type="text" name="discount" id="discount" />
        <button id="calcular">Calcular</button>
      </div>
      <div class="resultados">
        <p id="resultCupon"></p>
        <p id="result"></p>
      </div>
    </div>
    <script src="porcentajes.js"></script>
  </body>
</html>

Javascript:

const inputPrice = document.querySelector('#price')
const inputDiscount = document.querySelector('#discount')
const btn = document.querySelector('#calcular')
const pResult = document.querySelector('#result')
//Cupones
let arrayCuponesN = [
  { name: 'Cupon 1', discount: 25 },
  { name: 'Cupon 2', discount: 10 },
  { name: 'Cupon 3', discount: 40 },
]

btn.addEventListener('click', calcularPrecioConDescuento)

function calcularPrecioConDescuento() {
  const price = Number(inputPrice.value)
  const coupon = inputDiscount.value
  let discount

  if (!price || !coupon) {
    pResult.innerText = 'Por favor llena el formulario'
    return
  }

  for (let i = 0; i < arrayCuponesN.length; i++) {
    for (const key in arrayCuponesN[i]) {
      console.log('1', arrayCuponesN[i].name)
      let cupones = arrayCuponesN[i].name
      if (cupones == coupon) {
        discount = arrayCuponesN[i].discount
      }

    }
  }

  if (discount > 100) {
    pResult.innerText = 'El descuento no puede ser mayor a 100%'
    return
  }

  if(!discount){
    pResult.innerText = 'El cupon de descuento no existe'
    return
  }

  const newPrice = (price * (100 - discount)) / 100
  pResult.innerText = 'El nuevo precio con descuento es $' + newPrice
}

• He podido desarrollar 3 soluciones para la calculadora utilizando cupones de descuento
  

  

• Para las 3 soluciones se requiere crear un array cuyo contenido serán objetos (los cupones) con las propiedades “nombre de cupón” y “descuento asociado”
  

  

Calculadora de cupones utilizando el ciclo FOR

• Para un mayor detalle, mira el siguiente tutorial en el cual se ha explicado paso a paso el desarrollo de otros detalles de la calculadora.

• En la línea 96 del archivo JavaScript es en donde se incluirán las diferencias según la solución que se especifica.

• En esta primera solución utilicé el ciclo FOR para recorrer cada objeto del array.
  

  
  

  

Calculadora de cupones utilizando el método FILTER( )

• En esta segunda solución utilicé el método FILTER
  
  
  
  

Calculadora de cupones utilizando el método FIND( )

• En esta segunda solución utilicé el método FIND
  
  
  
  

Mi calculadora de cupones de descuento utilizando un array con objetos

_
Mira el tutorial AQUÍ

Mi Calculadora de cupones de descuento (%)🎫🎫🎫

• Demo 🎢 Calculadora de descuentos

• Repositorio📙📙: Proyecto en GitHub

• Resultado:
  

  

Hola.
Esta es mi solución

const precioOriginal = document.querySelector('#precio');
const cuponDescuento = document.querySelector('#cupon');
const btnDescuento = document.querySelector('#btn_descuento');
const precioFinal = document.querySelector('#precio_final');

let codigos = ['descuento10', 'descuento20', 'descuento30'];
let descuento = 0 ;

const calcularDescuento = () => {
    if(codigos.includes(cuponDescuento.value) == false) {
        precioFinal.innerText = 'El cupón de descuento no es válido o caducado';
        return;
    }
    switch(cuponDescuento.value) {
        case 'descuento10':
            descuento = (precioOriginal.value * (100 - 10))/100;
            break;
        case 'descuento20':
            descuento = (precioOriginal.value * (100 - 20))/100;
            break;
        case 'descuento30':
            descuento = (precioOriginal.value * (100 - 30))/100;
            break;
    }
    precioFinal.innerText = `El precio final es de $${descuento}`;
    
}
btnDescuento.addEventListener('click', calcularDescuento)

Esta vez, solucionado con objetos.

const precioOriginal = document.querySelector('#precio');
const cuponDescuento = document.querySelector('#cupon');
const btnDescuento = document.querySelector('#btn_descuento');
const precioFinal = document.querySelector('#precio_final');

let codigos = {'descuento10':10, 
                'descuento20':20, 
                'descuento30':30};

const calcularDescuento = () => {
    if(!precioOriginal.value || !cuponDescuento.value) {
        precioFinal.innerText = 'Debe ingresar los datos solicitados';
        return;
    }
    if(cuponDescuento.value in codigos == false) {
        precioFinal.innerText = 'El cupón de descuento no es válido o caducado';
        return;
    }

    precioFinal.innerText = `El precio final es de $${(precioOriginal.value * (100 - codigos[cuponDescuento.value]))/100}`;
    
}
btnDescuento.addEventListener('click', calcularDescuento)

En este caso utilice un array con objetos, y tambien se convierte a mayusculas la entrada del usuario, llegando al caso en que ingrese el cupón en minuscula

// cupones
let cupones =[
    {
     codigo: "ABCDE",
     porcentaje : 10
    },
    {
        codigo:  "FGHIJ",
        porcentaje : 15
    },
    {
        codigo:   "A1B2C3",
        porcentaje : 20
    },  
];

let custom = document.querySelector('.custom');
const btn= document.querySelector('.button')
btn.addEventListener('click',()=>{
    let customValue = (custom.value).toUpperCase();
    precio=parseInt(precioinicial.value);
    validar(customValue,precio)
});

function validar (codigo,precio){
    if (!precio || !codigo ){
        error.innerText= "Completa todos los campos"
        return;
    } else{
        cupones.forEach(item=>{
            if(codigo !== item.codigo){
                error.innerText= "Codigo invalido";
            } else{
                
                let calcularDescuento=(precio * (100 - item.porcentaje)) / 100
                console.log(calcularDescuento);
                descuento.innerHTML = "Su nuevo precio con el descuento de " + item.porcentaje + "% es $" + calcularDescuento;
                totalAhorro.innerHTML = "Su ahorro fue de: $" +(precio-calcularDescuento);
                return;
            }
        });
    } 
} 

Ahí mi solución usando clases y arrays.

const Bt_descuento= document.getElementById("calculador");
const parrafo_resultado= document.getElementById("resultado");
const PrecioOriginal= document.getElementById("precio");
const CuponDescuento= document.getElementById("cupon");

class Cupones {
    constructor(NombreCupon,PorcentajeDescuento){
        this.NombreCupon= NombreCupon;
        this.PorcentajeDescuento= PorcentajeDescuento;
    }
}
let G19= new Cupones ("G19",50);
let A19= new Cupones ("A19",10);
let B19= new Cupones ("B19",20);
let C19= new Cupones ("C19",25);
let D19= new Cupones ("D19",30);

let ArrayDeCupones= [];
ArrayDeCupones.push(G19,A19,B19,C19,D19);
console.log(ArrayDeCupones);

Bt_descuento.addEventListener("click", function(){
    let Cupon= CuponDescuento.value.toUpperCase();
    Number(PrecioOriginal.value);
    let Discount;
    let PrecioTotal;
    for (let i = 0; i < ArrayDeCupones.length; i++) {
        if (ArrayDeCupones[i].NombreCupon==Cupon) {
            Discount= ArrayDeCupones[i].PorcentajeDescuento;
            PrecioTotal= (PrecioOriginal.value*(100 - Discount))/100;
            parrafo_resultado.innerHTML= `El precio resultante con el cupón ya aplicado es: ${PrecioTotal}$`;
            return;
        }
    }
    parrafo_resultado.innerHTML= `Ingresa un nombre válido`;
})

Aqui les dejo mi solucion:
con el array:

const cupones =[
  {
    cuponName:"b31",
    descuento:10,
    usado:false,
  },
  {
    cuponName:"b32",
    descuento:20,
    usado:false,
  },
  {
    cuponName:"b33",
    descuento:30,
    usado:false,
  },
  {
    cuponName:"b34",
    descuento:40,
    usado:false,
  },
  {
    cuponName:"b35",
    descuento:50,
    usado:false,
  },
  {
    cuponName:"b36",
    descuento:60,
    usado:false,
  },
  {
    cuponName:"b37",
    descuento:70,
    usado:false,
  },
]

valide los cupones y si estaban usados o no, el punto de las variables es detectar el error y mandar un mensaje correspondiente al mismo.

function buscarCupon(precio,cupon){
  let cuponEncontrado = false;
  let cuponUsado = false;
  let porcentaje = null;
  cupones.forEach(element => {
    if(element.cuponName === cupon && cuponEncontrado === false){
      if(element.usado === false){
        element.usado = true;
        porcentaje = element.descuento;
        cuponEncontrado = true
        cuponUsado = false
      }else{
        cuponUsado =true
      }
    }
  });
  if(cuponEncontrado === true){
    if(porcentaje !== null){
      if(cuponUsado === false){
        let descuento = precio * (100 - porcentaje) / 100;
        resultado.textContent = `USASTE EL CUPON! :D tu descuento es de ${descuento}$`;
        console.log(cupones);
        return descuento;
      }else{
        resultado.textContent = `el cupon ya fue usado`;
      }
    }else if(porcentaje < 100 && porcentaje > 0){
      resultado.textContent = `El cupon no es valido`;
    }
  }else{
    resultado.textContent = `El cupon no existe`;
  }
}

Mi solución.

https://wsquintero.github.io/EjerciciosMatematicas/descuentocupon/cupon.html

const precio = document.querySelector(".precio");
const descuento = document.querySelector(".descuento");
const button =document.querySelector(".button");
const resultado =document.querySelector(".resultado");
const valor= document.createElement("p");
const formatterPeso = new Intl.NumberFormat('es-CO', {
  style: 'currency',
  currency: 'COP',
  minimumFractionDigits: 0
});
const cupones = {
  cupon1:20,
  cupon2:30,
  cupon3:50,
};

let claves =Object.keys(cupones);
let formula;

const addClassBlue= ()=> {
  valor.classList.add("valor");
  valor.classList.remove("valormal");
};
const removeClassBlue= ()=> {
  valor.classList.add("valormal");
  valor.classList.remove("valor");
};



button.addEventListener("click", mostrarResultado);





function mostrarResultado() {
 
    let b = claves.find(dis = (nombre) => {

      return nombre==descuento.value;

    } );  

    console.log(b==descuento.value)
if (b==descuento.value){
  formula = (Number(precio.value)* (100 - Number(cupones[descuento.value]) ) /100);
  resultado.appendChild(valor);
  valor.innerHTML="El valor final de tu compra es: "+formatterPeso.format(formula);
  addClassBlue();
  descuento.value="";
  precio.value = "";
}else{
  resultado.appendChild(valor);
  valor.innerHTML="Por favor digita un cupon correcto";
  descuento.value="";
  precio.value = "";
  removeClassBlue();

};
   
if (formula == 0){
  location.reload();
}
    
}

Lo que yo hice fue hacer un sencillo array colocando los nombres de los cupones y en el siguiente índice su descuento, luego hago una condicional utilizando la función .indexOf esta te devuelve el índice del elemento que estas buscando y si no existe te retorna un -1. Entonces si pasa la condicional significa que el cupón es valido, luego guardo el índice en una variable y al descuento le doy el valor de index+1 que es donde se encuentra el porcentaje de descuento.

const Cupones = ['Cupon123', 10, 'Navidad', 50, 'Mx', 16];

 function calcularDescuento(){
   var precio = Number(InputPrecio.value);
   var Cupon = String(InputCupon.value);
   var descuento = 0;
   var index;
   if (Cupones.indexOf(Cupon) >= 0){
     index = Cupones.indexOf(Cupon);
     console.log(index);
     descuento = Cupones[index+1];
   }else{
     h2.innerHTML = 'El cupón no es válido';
     return precio;
   }
   var precioFinal = ( precio * (100 - descuento) ) / 100;
   h2.innerHTML = 'El precio final es:' + precioFinal;
   console.log(precioFinal);
 }

Quise hacerlo en el inspector antes de querer implementarlo

solamente al final añadiria un condicional que valide que descuento sea mayor que 0 para poder aplicar el descuento

Creo que si me funciona por que puedo adivinar, pero, ¿Alguien sabría decirme porque no me imprime el mensaje, y se reinicia la pagina?
Saludos!!

Espero que les sirva, si hay correcciones quedo abierto.

const inputPriceProduct = document.querySelector('#priceCoupon');
const inputPriceCoupon = document.querySelector('#coupon');
const btnCoupon = document.querySelector('#btnCalcCoupon');
const pResultCoupon = document.querySelector('#pPriceCoupon');

const coupons = [
	{ name: 'MH20', discount: 20 },
	{ name: 'MH30', discount: 30 },
	{ name: 'MH40', discount: 40 },
	{ name: 'MH50', discount: 50 },
];

btnCoupon.addEventListener('click', () => {
	pResultCoupon.innerText = 'Cupón inválido!! Precio: $' + inputPriceProduct.value;
            
	coupons.forEach(element => {
		if ( element.name === inputPriceCoupon.value ) {
			pResultCoupon.innerText = 'Precio con descuento: $' + inputPriceProduct.value * (100 - element.discount) / 100;
		};                
	});            
});

Aqui va mi solucion al reto, quise hacerlo primero con foreach pero me tope con un error, asi que cambie a find.

const monto = document.querySelector("#monto");
const cupon = document.querySelector("#cupon");
const total = document.querySelector("#total");
const btnCalcular = document.querySelector("#calcular");
btnCalcular.addEventListener("click", calcularDescuento);

class Coupons {
  constructor(call, valor) {
    this.call = call;
    this.valor = valor;
  }
}

const Disc30 = new Coupons("Disc30", 30);
const Disc25 = new Coupons("Disc25", 25);
const Disc20 = new Coupons("Disc20", 20);
const Disc15 = new Coupons("Disc15", 15);

let couponsColection = [];

couponsColection.push(Disc30,Disc25,Disc20,Disc15);

function calcularDescuento() {
  let price = monto.value;
  let inputCoupon = cupon.value;

  const elementFound = couponsColection.find(coup => coup.call === inputCoupon)
  console.log(elementFound)
  if (elementFound) {
    let finalPrice = (price * (100 - elementFound.valor)) / 100;
      total.innerHTML = `
      Tu producto tenia un precio de $${price}, pero con el super descuento de ${elementFound.call}, pagaras $${finalPrice}, Felicidades, te estas ahorrando $${price - finalPrice}
      `;
  } else {
    total.innerHTML = `
        El cupon ingresado no es valido, por favor, verifica e intenta nuevamente.
        `;
  }
}

const cupones = [
    {
        cupon: "golden",
        descuento: 50
    },
    {
        cupon: "platinum",
        descuento: 30
    },
    {
        cupon: "friend",
        descuento: 20
    }
]
function calcularPrecioDescuento (){
    const precio    =   Number(inputPrice.value); 
    const coupon =   inputCoupon.value;
    if (!precio || !coupon){
        pResult.innerText = 'Por favor llenar el formulario';
        return;
    }
    let descuento 
    for (let i= 0; i < cupones.length; i++) {
        if (coupon == cupones[i].cupon){
            descuento = cupones[i].descuento;
        } 
        console.log(descuento);
    }

    if(descuento){
        const newPrice = ( precio * (100 - descuento) )/100;
        pResult.innerText = 'El nuevo precio es $' + newPrice;
    } else{
        pResult.innerText = 'Cupón no válido';
    }
    
}

Otro reto emocionante, asì lo resolvi yo, les dejo el codigo por si quieren mirar…

deje el html del ejercicio anterior y agrege un radio button para escoger cuando aplicar un cupon y cuando aplicar un descuento directamente, este es el resultado

<!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>
  <div class="calcDescuento">
    <label for="precio">Ingresa el precio del Producto</label>
    <input id="precio" type="number" class="input precio">
    
    
    <div class="radioOpciones">
      <label for="precio">Tengo un cupon</label>
      <input type="radio" name="cuponOnOff" id="cuponOn">
    </div>
    
    <div class="radioOpciones">
    <label class="labelPrecio" for="precio">Aplica un descuento</label>
    <input type="radio" name="cuponOnOff" id="descuentoOn" checked>
    </div>

    <label class="labelDescuento" for="descuento">Ingresa el descuento a aplicar</label>
    <input id="descuento" type="number" class="input descuento">

    
    <button id="btnCalc" >Calcular Descuento</button>

    <label for="montoTotal">Total a pagar por el producto</label>
    <input id="montoTotal" type="text" class="input montoTotal" readonly>
  </div>
  
</body>
</html>

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-weight: bold;
  }

  .calcDescuento {

    width: 300px;
    height: auto;
    padding: 20px;

    border: 1px solid seagreen;
    display: flex;
    flex-direction: column;
  }

  .input {

    width: 250px;
    height: 30px;

    margin: 10px auto 20px;
    border-radius: 8px;

    font-size: 18px;

  }
  
  .calcDescuento button {

    width: 250px;
    height: 40px;
    background-color: rgb(90, 200, 90);

    border-style: none;
    border-radius: 8px;

    margin-bottom: 20px;

  }

  .radioOpciones{
    display: flex;
    align-items: center;

    margin-bottom: 10px; 
  }

  .radioOpciones input {

    margin-left: 10px;
  }

     const labelPrecio = document.querySelector('.labelPrecio');
    const labelDescuento = document.querySelector('.labelDescuento');

    const precioProduct = document.querySelector('#precio');
    const descuentoAplicado = document.querySelector('#descuento');
    const btnCalc = document.querySelector('#btnCalc');
    const montoTotal = document.querySelector('#montoTotal');
    const cuponOn = document.querySelector('#cuponOn');
    const descuentoOn = document.querySelector('#descuentoOn');

    const cuponesDescuento = {

      promoAmarillo: 10,
      promoNaranja: 15,
      promoAzul: 25,
      promoVerde: 30,
      promoPlata: 50,
    }

    let precio;
    let cupon;
    let descuento;
     
    cuponOn.addEventListener('click', () => {

      labelDescuento.innerText='Ingresa el cupon de Descuento';
      descuentoAplicado.setAttribute('type', 'text');          
    })

    descuentoOn.addEventListener('click', () => {

      labelDescuento.innerText='Ingresa el descuento a aplicar';
      descuentoAplicado.setAttribute('type', 'number');
    })

   
    function calcDescuento() {

      precio = precioProduct.value;
      descuento =  descuentoAplicado.value;

       for (let key in cuponesDescuento ) {

        cupon = cuponesDescuento[descuento];        
       
      }

      if(cupon) {

        const result = ( precio * ( 100 - cupon) ) / 100 ;

        montoTotal.value=result;    

        return;
      } 

      else if(descuento) {
        
        const result = ( precio * ( 100 - descuento) ) / 100 ;

        montoTotal.value=result;
      
        return;

      }

    }

    btnCalc.addEventListener('click', calcDescuento);
   

Yo lo solucione con un if/else y un array cn objetos, lo realice de está forma:

aca mi imagen aunque no pude hacerlos funcionar con un value en el input radio.

const coursePrice = document.querySelector('#Form-store');
const discount1 = document.querySelector('#Descuento1').value;
const discount2 = document.querySelector('#Descuento2').value;
const discount3 = document.querySelector('#Descuento3').value;
const resultWithCouponApplied = document.querySelector('#display-price1');

const btn = document.querySelector('#Buy-button--store');
var p =document.getElementById("displayPrice2");
var text = p.textContent;
var number = Number(text);

btn.addEventListener('click', calculatePriceWithSelectedCoupon, calculationFormula);

function calculatePriceWithSelectedCoupon () {
    console.log("Hello")
    // const displayOValue = .value = Number(displayPrice2);

    // document.write(number);

    if(discount1.checked) { 
        const dDiscount1 = 15;
        calculationFormula(number, dDiscount1, "Descuento1");
    } else if(discount2.checked) {
        const dDiscount2 = 20;
        calculationFormula(number, dDiscount2, "Descuento2");
    } else if(discount3.checked) {
        const dDiscount3 = 35;
        calculationFormula(number, dDiscount3, "Descuento3");
    }
}
    

function calculationFormula (number, percentage, couponName) {
    const newPrice = (number * ((100 - percentage)/100));
    resultWithCouponApplied.innerText = "$" + newPrice;
    console.log(newPrice + "is ???" + couponName);
}

Reto logrado

Lo logré gracias por mostrarme otra manera lo pude adaptar a mi pagina

Si alguien quiere entrar a la tienda el primer código es:
“Hello2000” sin las comillas
y es segundo solo mi nombre.

https://g-code7.github.io/curly-octo-meme/tienda2.html

Mi codigo me quedo de la siguiente manera…

Este es el objeto que utilice.

Y como lo procese para evaluar si existe o no y obviamente la operacion.

Creamos el array con objetos ya que cada objeto será un cupón, luego usamos la función find()

const cupones = [{cupon: 'aaa', discount : 3},{cupon: 'bbb', discount : 60},{cupon: 'ccc', discount : 30},{cupon: 'ddd', discount : 99}];
const calcularBtn = document.querySelector("#calcular");
const result = document.querySelector("#result");

calcularBtn.addEventListener('click', aplicarCupon);

function aplicarCupon(){

    const price = document.querySelector("#price").value;
    const cupon = document.querySelector("#cupon").value;
    let discount = 0;
    
    cupones.find(object =>{

        if(object.cupon === cupon){
            console.log(object);
            discount = object.discount;
        }
    
    });

    console.log('discount', discount);
    const newPrice = (price * (100 - discount)) / 100;
    result.innerText  = `El cupon ${cupon} tiene un descuento del ${discount}%. Su nuevo precio es de ${newPrice}`;

}

Usé un arreglo de cupones y le asigné un límite de descuento a cada uno, usé el metodo some() para validar el cupón, aunque no se si es válido usarlo así.

<!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>Cupones de descuento</title>
</head>
<body>
    
    <h1>Cupones de descuento</h1>
    <section>
        <h2>Ingresa tu cupon</h2>
        <form>
            <label for="precioCompleto">Ingresa el precio del producto
                <input type="number" name="fullPrice" id="fullPrice" />
            </label><br><br>
            <label for="porcentajeDescuento">Ingresa tu cupón
                <input type="text" name="coupon" id="coupon" maxlength="7" />
            </label><br><br>

            <input type="button" name="sendDiscount" id="sendDiscount" value="Calcular">
        </form>
        <p id="discountResult"></p>
    </section>

    <script src="./descuentos-cupones.js"></script>
</body>
</html>

const coupons = [
    ['coupon1', 25, 50000],
    ['coupon2', 15, 40000],
    ['coupon3', 30, 50000],
    ['coupon4', 10, 60000],
];

const inputFullPrice = document.querySelector('#fullPrice');
const inputCoupon = document.querySelector('#coupon');
const inputResultContainer = document.querySelector('#discountResult');
    
const btn = document.querySelector('#sendDiscount');
btn.addEventListener('click', calculateCouponDiscount);

function calculateCouponDiscount() {
    const coupon = inputCoupon.value;
    const fullPrice = Number(inputFullPrice.value);
    let message = '';
    let couponValidated = false;
    let discountRate = 0;
    let discountLimit = 0;

    if(!fullPrice || !coupon) {
        message = 'Debes escribir el precio del producto y el porcentaje de descuento a aplicar';
    } else {
        couponValidated = coupons.some( item => {
            if (item[0] === coupon) {
                discountRate = item[1];
                discountLimit = item[2];
                return true;
            }
        });

        if(discountRate > 100) {
            message = 'El porcentaje de descuento debe ser menor o igual al 100%';
        } else {
            const discount = (fullPrice * discountRate) / 100;

            if( discount > discountLimit ) {
                message = 'Tu cupón es del '+ discountRate +'% y tiene un límite de $'+ discountLimit +', el precio aplicando el descuento es $'+ (fullPrice - discountLimit) +' Se aplicó tu cuón hasta el límite.';
            }
            else {
                message = 'Tu cupón es del '+ discountRate +'% y tiene un límite de $'+ discountLimit +', el precio aplicando el descuento es $'+ (fullPrice - discount);
            }
        }
    }

    inputResultContainer.innerText = message;
}

Yo lo que hice para que no me quedara tan grande el codigo fue crear un array con los cupones y otro con los descuentos para luego crear un ciclo for que recorra todos los valores de los cupones y lo compare con el valor de inputDiscount el cual lo hice un un datalist para que el usuario vea sus cupones espero que les sirva : )

const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const discountButton = document.querySelector('.discount-button');
const pResult =  document.querySelector('.result');

discountButton.addEventListener('click', calcularMonto);

function calcularMonto() {
  const price = inputPrice.value;
  const discount = inputDiscount.value;

  if (!price || !discount) {
    alert('You have to complete both boxes');
  }
  else {
    calcularPorcentaje ();
  }

  function calcularPorcentaje () {
    const voucherArray = [
      'voucher %5',
      'voucher %10',
      'voucher %15',
      'voucher %20',
      'voucher %25',
      'voucher %30',
      'voucher %40',
      'voucher %50',
      'voucher %60',
    ];
  
    const discountArray = [
      5,
      10,
      15,
      20,
      25,
      30,
      40,
      50,
      60,
    ]

    for(let i = 0; voucherArray.length > i;i++) {
      if (voucherArray[i] == inputDiscount.value) {
        let result = ( price * (100 - discountArray[i])) / 100;
        pResult.innerText = '$' + result;
      }
    }
  }
}

Yo lo hice así, use la función filter:

codigo js

const btn = document.getElementById("calcular");
const inputPrice = document.getElementById("price");
const inputDiscount = document.getElementById("discount");
const outputNewPrice = document.getElementById("result");
const listOfCupon = [
    {discount: "ASD123", valor : 10 },
    {discount: "ASD456", valor: 15 },
    {discount: "ASD789", valor: 20 },
    {discount: "QWE123", valor: 25 },
    {discount: "QWE456", valor: 30 }, 
    {discount: "QWE789", valor: 35 },

];

btn.addEventListener("click", calcularPrecioConDescuento);

function calcularPrecioConDescuento(){
    const price =inputPrice.value;
    const cuponList = listOfCupon.filter(function(articulo){
        return articulo.discount ==  inputDiscount.value;
    });

    if(cuponList.length > 0){
        const discount =cuponList[0].valor;
        if (!price || !discount){
            outputNewPrice.innerText = "";
            outputNewPrice.innerText = "Ingresa los datos correspondientes al precio o al descuento";
        }else{
    
            if(discount>100){
                outputNewPrice.innerText = "";
                outputNewPrice.innerText = "El descuento no puede ser mayor que cien";
            }else{
                outputNewPrice.innerText = "";
                const newPrice = ((price*(100-discount))/100);
                outputNewPrice.innerText = String (newPrice);
            }
            
        }
    }else{
        outputNewPrice.innerText = "";
        outputNewPrice.innerText = "El codigo no existe";
    }
    
    
}

Solución al reto, pero con método includesdel prototipo array:

const priceInput = document.querySelector("#price");
const discountInput = document.querySelector("#discount");
const couponInput = document.querySelector("#coupon");
const calcDiscountBtn = document.querySelector("#calcDiscount");
const couponText = document.querySelector("#couponText");
const resultPrice = document.querySelector("#resultPrice");

calcDiscountBtn.addEventListener("click", calcPriceWithDiscount);

function calcPriceWithDiscount() {
  // C=P - (PD/100)
  const price = parseInt(priceInput.value);
  const discount = parseInt(discountInput.value);
  const coupon = couponInput.value;
  const offerCoupons = ["OFFER2022", "SUMMER2022", "WINTER2022"];
  const discountCoupon = 20;
  let newPrice;

  if (!discount || !price) {
    resultPrice.innerText =
      "Llena los campos de precio y descuesto para calcular el precio final";
    return;
  }
  if (discount > 100) {
    resultPrice.innerText = "No se puede calcular ese descuento";
    return;
  }
  if (coupon) {
    const isValidCoupon = offerCoupons.includes(coupon);

    if (isValidCoupon) {
      newPrice = price - (price * (discount + discountCoupon)) / 100;
      couponText.innerText = "Cupon validado";
      return (resultPrice.innerText = `El nuevo precio con descuento es ${newPrice}`);
    }
    couponText.innerText = "Cupon no valido";
  } else {
    couponText.innerText = "";
  }

  newPrice = price - (price * discount) / 100;
  resultPrice.innerText = `El nuevo precio con descuento es ${newPrice}`;
}

Les comparto mi resultado, lo resolví con un array de objetos que luego recorrí con un for

    let allCoupons = [ {description: 'holidays', discount: 15},
        {description: 'firstpurchase', discount: 25},
        {description: 'blackfriday', discount: 30},
        {description: 'supersales', discount: 40}
    ];

    for (let i = 0; i < allCoupons.length; i++) {
            coupon == allCoupons[i].description ? (
            newPrice = (price * (100 - allCoupons[i].discount)) / 100,
            pResult.innerText = 'El nuevo precio con descuento es $' + newPrice,
            i += allCoupons.length
        ) : pResult.innerText = 'El cupón no es válido';
    }

no creo que sea la mejor opción, (estoy repitiendo codigo) pero es la mas sensilla que encontre.

<code> 
const precio= document.getElementById("precio");
const btn20= document.getElementById("btn20");
const btn30= document.getElementById("btn30");
const btn40= document.getElementById("btn40");
const resultado=document.getElementById("resultado");

btn20.addEventListener("click",descuento20)

function descuento20 (e){
    e.preventDefault()
    const inputprice= precio.value
    const resultado1 = inputprice*(100-20)/100
    return resultado.innerText= "el precio con descuento es "+resultado1

};

btn30.addEventListener("click",descuento30)

function descuento30 (e){
    e.preventDefault()
    const inputprice= precio.value
    const resultado1 = inputprice*(100-30)/100
    return resultado.innerText= "el precio con descuento es "+resultado1

};


btn40.addEventListener("click",descuento40)

function descuento40 (e){
    e.preventDefault()
    const inputprice= precio.value
    const resultado1 = inputprice*(100-40)/100
    return resultado.innerText= "el precio con descuento es "+resultado1

};

Reto con Objetos

const form = document.querySelector('#form');
const precioDelArticulo = document.querySelector('#price');
const inputCoupon = document.querySelector('#coupon');
const btn = document.querySelector('.button-calculator');
const pResult = document.querySelector('.result');

form.addEventListener('submit', calcularInputs);


const couponsObject = {
    YardSale: 50,
    YardSale_barato: 30,
    YardSale_plateado: 20,
    Shh: 40,
    Pipo: 15,
};

function calcularInputs (event) {
    event.preventDefault();
    const price = Number(precioDelArticulo.value);
    const coupon = inputCoupon.value;

    if (!price || !coupon) {
        pResult.innerText = 'Rellene los campos, por favor';
        return;
    };

    for (event in couponsObject) {
        if (coupon == event) {
            const newPrice = (price * (100 - couponsObject[event])) / 100;
            pResult.classList.remove('warning');
            pResult.classList.add('border');
            pResult.innerText = `Con el cupón ${event} obtienes un %${couponsObject[event]} de descuento, aplicando
            esto el nuevo precio es de: $${newPrice}`;

            return;
        };
    };
    pResult.classList.remove('border');
    pResult.classList.add('warning');
    pResult.innerText = `El cupón que ingreso no existe`;
};

Les comparto mi solución al reto.

Dejo mi código!

'use strict';
function makeDiscount(price, discount) {
    const priceWithoutDiscount = (price * discount) / 100;
    const priceWithDiscount = price - priceWithoutDiscount;
    return priceWithDiscount
}

function calcDiscount() {
    const inputPrice = parseFloat(price.value);
    const inputDiscount = parseFloat(discount.value);
    let priceWithDiscount = inputPrice;

    priceWithDiscount = makeDiscount(inputPrice, inputDiscount);
    if (searchCoupon !== undefined) {
        priceWithDiscount = makeDiscount(priceWithDiscount, searchCoupon.discount)

        const paragraph = document.createElement("span");
        paragraph.innerHTML = `- Aplicando descuento extra ${searchCoupon.discount}% por cupón`;
        document.body.appendChild(paragraph);
    }
    textResult.innerHTML = `El nuevo precio con descuento es: $${priceWithDiscount} `;
}


const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
const discountCoupon = document.querySelector('#discountCoupon');
const btnCalcDiscount = document.querySelector('#calcDiscount');
const textResult = document.querySelector('#result');

btnCalcDiscount.addEventListener('click', calcDiscount);


const coupons = [
    { name: "ACERPLUSCOUPON", discount: 15 },
    { name: "PLATZISUMMER", discount: 20 },
    { name: "MANDARINAS", discount: 50 },
]
const searchCoupon = coupons.find(function (coupon) {
    return coupon.name == discountCoupon.value;
});

Yo lo hice con un array de objetos:

const btn = document.querySelector("#btnClick");
const result = document.querySelector("#result");
const inputPrice = document.querySelector("#price");
const inputDiscount = document.querySelector("#discount");

result.innerText = `Precio con descuento: ${100}`;

const coupon = [
	{ couponName: "PLTZ2022", discount: 20 },
	{ couponName: "MASTER2022", discount: 85 },
];

const calculateDiscount = (price, discount) => {
	return (price * (100 - discount)) / 100;
};

btn.addEventListener("click", () => {
	discount = coupon.filter((el) => el.couponName === inputDiscount.value);
	if (discount.length) {
		result.innerText = `Precio con el cupón ${
			discount[0].couponName
		}: ${calculateDiscount(inputPrice.value, discount[0].discount)}`;
	}
});

Hola les dejo mi codigo

<!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>
    <style>
        label {
            display: flex;
        }
        button {
            display: flex;
        }
    </style>
</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>

    <label for="cupon">Tienes un cupon?, ingresalo para realizar un descuento especial</label>
    <input id="coupon" type="text">
    <button id="couponBtn">Validar cupón</button>

    <p id="result"></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 coupon = document.querySelector("#coupon");
const couponBtn = document.querySelector("#couponBtn");

btn.addEventListener("click", calcularPrecioConDescuento);
couponBtn.addEventListener("click", cuponDescuento);

function calcularPrecioConDescuento(price, discount) {
//   const price = Number(inputPrice.value);
//   const discount = Number(inputDiscount.value);

  if (!price || !discount) {
    console.log(price, discount);
    pResult.innerText = "Por favor llena el formulario";
    return;
  }

  if (discount > 100) {
    pResult.innerText = "No puede ser mayor a 100%";
    return;
  }
  const newPrice = (price * (100 - discount)) / 100;

  pResult.innerText = "El nuevo precio con descuento es $" + newPrice;
}

const cupones = [
  { clave: "BASICO", valor: 15 },
  { clave: "MEDIO", valor: 30 },
  { clave: "SUPER", valor: 50 },
];

function cuponDescuento() {
  const inputCoupon = coupon.value;
  const price = Number(inputPrice.value);

  const validation = cupones.map(function (cupones) {
    switch (inputCoupon) {
      case "BASICO":
        calcularPrecioConDescuento(price, 15)
        break;
      case "MEDIO":
        calcularPrecioConDescuento(price, 30)
        break;
      case "SUPER":
        calcularPrecioConDescuento(price, 50)
        break;
      default:
        console.log("NO EXISTE EL CUPON");
        break;
    }
  });
}

Aquí esta mi solución, lo hice pensando en obtener el descuento correspondiente en una sola línea de código.

function priceDiscount() {
    const price = parseInt(priceInput.value);
    const coupon = couponInput.value;

    if(!price || !coupon) {
        pResult.innerText = "Porfavor llena el formulario";
        return;
    }

    try {
        const discount = coupons.find((ticket) => ticket[coupon])[coupon]; // Posible typeError
        const newPrice = (price * (100 - discount)) / 100;
        pResult.innerText = "El nuevo precio con descuento es: $" + newPrice;
    }catch(TypeError) {
        pResult.innerText = "Porfavor, ingresa un cupon valido.";
    }

}

const button = document.getElementById("calcular");
const priceInput = document.getElementById("price");
const couponInput = document.getElementById("coupon");
const pResult = document.getElementById("result");

button.addEventListener("click", () => priceDiscount());

const coupons = [
    {"BLACKFRIDAY": 45},
    {"CHRISTMAS": 30},
    {"STUDENT": 15}
]

This is my solution, applying discount by value and coupon.

// ( P * ( 100 - d) ) / 100

const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const inputCoupon = document.querySelector('#coupon');
const calcDiscount = document.querySelector('#calcDiscount')
const applyCoupon = document.querySelector('#applyCoupon')
const result = document.querySelector('#result')

calcDiscount.addEventListener('click', finalPrice);
applyCoupon.addEventListener('click', finalPriceCoupon);

function finalPrice(){
    const price = Number(inputPrice.value);
    const discount = Number(inputDiscount.value);

    if(!price || !discount){
        result.innerHTML = 'Price and Discount is out range of values, please verify it and try again'
        return
    }
    if(discount > 100){
        result.innerHTML = 'Discount of ' + discount + '% is out range of discounts, please verify it and try again'
        return
    }
    if(price <= 0){
        result.innerHTML = 'Price ' + price + ' is out range of prices, please verify it and try again'
        return
    }
    
    const finalPrice = ( price * ( 100 - discount ) ) / 100;
    inputPrice.value = '';
    inputDiscount.value = '';
    result.innerHTML = 'Price with discount: $' + finalPrice 
};


function finalPriceCoupon(){
    const price = Number(inputPrice.value);
    const coupon = inputCoupon.value;
    let discount;

    if(coupon === 'ABC'){
        discount = 30
    } else if (coupon === 'DEF'){
        discount = 45
    } else {
        discount = 0
    }

    if(!price || !discount){
        result.innerHTML = 'Price and Discount is out range of values, please verify it and try again'
        return
    }
    if(discount > 100){
        result.innerHTML = 'Discount of ' + discount + '% is out range of discounts, please verify it and try again'
        return
    }
    if(price <= 0){
        result.innerHTML = 'Price ' + price + ' is out range of prices, please verify it and try again'
        return
    }
    
    const finalPrice = ( price * ( 100 - discount ) ) / 100;
    inputPrice.value = '';
    inputCoupon.value = '';
    result.innerHTML = 'Price with discount: $' + finalPrice 
};

use el for junto con if para buscar en el arreglo, también podría servir un array.forEach o usar un for…in:

for (i = 0; i < arrayUObjecto.length ; i++) {

    if(arrayUObjecto[i].cupon === inputCoupon) {

        discount = arrayUObjecto[i].descuento;

    } else if(i = arrayUObjecto.length) {

        pResult.innerText = 'El cupón no es válido';

    } else if(discount) {

        i = arrayUObjecto.length;
        
    }
  }
 

esta es la forma que tendría el array:

const arrayUObjecto = [{cupon: x, descuento: y}, ..., {}] ;

🟢💻 Comparto mi solución al reto:
Utilicé un objeto llamado discoutns para poder agregar todos los descuentos que se requieran y una sola condicional para validarlos.

const inputPrice = document.getElementById('price')
const inputCoupon = document.getElementById('coupon')
const btnCalculate = document.getElementById('calculate')
const result = document.getElementById('result')

btnCalculate.addEventListener('click', () => {
  const price = Number(inputPrice.value)
  const coupon = inputCoupon.value
  const discounts = {
    plaztiDay: 15,
    platziGroup: 10,
    platziChristmas: 20,
    platziConf: 12
  }
  if (!price || !coupon) {
    result.innerHTML = 'Por favor llena el formulario'
  } else {
    if (coupon in discounts) {
      const discountPercentage = discounts[coupon]
        result.innerHTML = `El precio con descuento es ${(price * (100 - discountPercentage) / 100)}`
    } else {
      result.innerHTML = `El cupon que escribiste no es válido. El precio total sigue siendo: ${price}`
    }
  }
})

He aqui mi solucion escalable con un objeto y un condicional que evalua si lo ingresado en cupon está dentro de cupones, se aplica el descuento correspondiente luego de calcular el mismo

function aplicarCupon() {

    let cupones = {
        '30Descuento' : 30,
        '35Descuento' : 35,
        '40Descuento' : 40,
        '45Descuento' : 45
    }

    let precio = parseFloat(document.getElementById('valor').value);
    let cupon = document.getElementById('valorCupon').value;

    if (cupon in cupones){
        let descuento = cupones[cupon];
        let nuevoPrecio = precio * (100 - descuento) / 100;
        document.getElementById('valor-final').innerHTML = formatoPesos.format(nuevoPrecio.toFixed(2));
    }else{
        alert("No se ha encontrado este cupón, intenta con otro.");
    }
}

asi realice el reto propuesto un ciclo for para que recorra todo el objeto

   let cupones = {
    platzi: 30,
    one: 20,
    theBest:50,
    rich: 70
   }


   for (key in cupones) {
     if(cupon == key) {
        let discount
        discount = cupones[key]
        const precioTotal = (valor * (100 - discount)) / 100
        precioTotalCompra.innerText = 'el total de su compra es: $' + precioTotal
     } else (
        precioTotalCompra.innerText = '!CUPON NO VALIDO¡'
        
     )

   }

Esta fue mi solucion, cree un objeto con los cupones y lo recorrí conun for of… no se si sea la manera correcta, si alguien me podria aconsejar una mejor manera de hacerlo sera bienvenido…

Gracias comunidad 😃

let precio = document.getElementById("precio");
let descuento = document.getElementById("descuento");
const botonCalcular = document.getElementById("botonCalcular");
contenedorResultado = document.getElementById("contenedorResultado");

botonCalcular.addEventListener('click', calcularDescuento);

let cupones = {
    DESCUENTO10: 10,
    DESCUENTO20: 20,
    DESCUENTO40: 40,
}

function calcularDescuento(){
    event.preventDefault();


    for(const [key, value] of Object.entries(cupones)){
        if(descuento.value == key){

            let totalDescuento = (parseFloat(precio.value) * (100 - value))/100;
            
            contenedorResultado.innerText = "ganaste un "+ value +"%"+ " de descuento el precio a pagar es de: "  + totalDescuento;
    
            return
        }
      }
    if(descuento.value !== cupones){
        contenedorResultado.innerText = "ingrese un cupon valido";
    }
    
}

Una buena forma de trabajar con esto es con selects:

<!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>
    
    <form id="form" action="">
        <label for="money__input">Put the price in USD</label>
        <input id="money__input" name="money__input" type="number" placeholder="20USD">

        <label for="discount__input">Select a discount</label>
        <select id="discount__select" name="select">
            <option value="1">15%</option>
            <option value="2" selected>30%</option>
            <option value="3">50%</option>
        </select>

        <!-- <input id="discount__input" name="discount__input" placeholder="15%"> -->

        <button id="discount__send" type="submit">Calc discount</button>
    </form>

    <p id="money__outcome"></p>

    <script src="./discount.js"></script>

</body>
</html>

Con su respectivo JS:

const discounts = [15,30,50];

const form = document.querySelector('#form');
// const discount__input = document.querySelector('#discount__input');
const discount__select = document.querySelector('#discount__select');
const money__input = document.querySelector('#money__input');

form.addEventListener('submit', (e) => {
    
    e.preventDefault();

    const old_price = money__input.value;
    let discount_value = discount__select.value;

    discount = discounts[discount_value-1];

    if(old_price > 0) {

        new_price = old_price * (1 - (discount/100));

        const money__outcome = document.querySelector('#money__outcome');
        money__outcome.innerHTML = new_price;

    }else{

        money__outcome.innerHTML = "Uno o varios de los valores no son correctos";

    }
})

Yo lo hice con un array de objetos

const button = document.querySelector("#calcular");
const inputPrecio = document.getElementById("precio");
const inputDescuento = document.getElementById("descuento");
const pResultado = document.getElementById("resultado");

const cupones = [
  {
    nombre: "ABC123",
    value: 20,
  },
  {
    nombre: "ZXC098",
    value: 35,
  },
  {
    nombre: "DEF456",
    value: 70,
  },
];

function precioConDescuento() {
  const precio = inputPrecio.value;
  const descuento = inputDescuento.value;

  const discount = cupones.find((element) => descuento === element.nombre);

  if (precio == "") {
    pResultado.innerText = "Por favor ingresa el precio";
    return;
  }
  if (descuento == "") {
    pResultado.innerText = `Tu precio con descuento es: ${precio}`;
  } else if (discount == undefined) {
    pResultado.innerText = "El cupon que ingresaste no es valido";
  } else {
    pResultado.innerText = `Tu precio con descuento es: ${
      (precio * (100 - discount.value)) / 100
    }`;
  }
}

button.addEventListener("click", precioConDescuento);

const coupons = [
    {name:'asd',discount:50},
    {name:'aaa',discount:30},
    {name:'sss',discount:80},
    {name:'ddd',discount:60},
    {name:'fff',discount:10},
]
const findCoupon = (couponList,couponName) => {
    const couponFound = couponList.find(coupon => coupon.name === couponName);
    return couponFound? couponFound.discount: NaN;
}

Acá les dejo mi solución por si les ayuda un poco, sería genial si pueden darme algunos buenos consejos. Si desean probarlo pueden usar los siguientes cupones que realicé que son TACHIRAFOREVER, DESCUENTO9310, VIPTACHIRA. Lo realicé por medio de un objeto, ya que me parece la manera más optima en este momento.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deportivo Tachira - Tienda Oficial</title>
    <link rel="shortcut icon" href="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/4818.png" type="image/x-icon">
    <link rel="stylesheet" href="cupones.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="producto"><div class="imagen"><img src="D_NQ_NP_782024-MLV54945874652_042023-O.png"></div>
    <div class="informacion">
        <p class="price">100$</p>
        <p>¡Celebra el espíritu invicto del fútbol venezolano con la camiseta del Deportivo Táchira Fútbol Club, el orgullo de toda una nación futbolera! Esta icónica camiseta no solo es un pedazo de tela, sino una manifestación palpable de la pasión y el éxito que este equipo ha traído a Venezuela.
        </p>
        <p>Con su diseño audaz en los colores distintivos del equipo, el amarillo y negro resplandecen con gloria y determinación. La camiseta del Deportivo Táchira no solo es una prenda deportiva, sino un símbolo de resiliencia y triunfo en los campos de juego.</p>

        <label for="cupon">Cupon</label>
        <input id="cupon" type="text">

        <button id="calcular">Calcular descuento</button>
        <button id="pagar">Comprar</button>
        <p class="descuento"></p>
        <span class="precio"></span>
        <script src="cupon.js"></script></div>   </div>
</body>
</html>

const cuponInput = document.querySelector('#cupon');
const calcularEnviar = document.querySelector('#calcular');
const cuponResultado = document.querySelector('.descuento');
const precioDescuento = document.querySelector('.precio');
var precioProducto = 100;
var cupones = {
    TACHIRAFOREVER: 20,
    DESCUENTO9310: 10,
    VIPTACHIRA: 40,
}

function calcularDescuento() {
    let cuponData = cuponInput.value;
    if (!cuponData){
        cuponResultado.innerText = 'No has colocado nada.';
    } else {
        var descuento = cupones[cuponData]
        precioDescuento.innerText ='Total a pagar $' +  precioProducto * (100 - descuento) / 100;
    } 
}
calcularEnviar.addEventListener('click', calcularDescuento);

h1 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
.imagen {
    display: flex;
    width: 50%;
    overflow: hidden;
}
.imagen img {
    width: 100%;
    object-fit: contain;
    height: 500px;
}
.informacion {
    width: 50%;
    flex-direction: column;
}
.producto {
    display: flex;
}

label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
}

input {
    width: 40%;
    margin-bottom: 10px;
    display: block;
    border-radius: 10px;
    height: 35px;
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
}

button {
    padding: 10px 20px 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    border: none;
    background-color: black;
    color: white;
    border-radius: 10px;
    font-weight: 500;
}
#pagar {
    background-color: yellow;
    color: black;
}
.informacion p {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    max-width: 600px;
}

.informacion .price {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 40px;
}
span {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
}

Mi solucion con array

let cuponera = [{cupon:'DIEZDESC', desc:10}, {cupon:'CINCUENTADESC', desc:50}, {cupon:'TRIENTADESC', desc:30}];

const calcularPrecioConCupon = () => {
    const price = Number(inputPriceCupon.value);
    const cupon = inputCupon.value;

    
    if(price === 0 || !cupon) {
        pResultCupon.innerText = 'Favor de llenar el formulario';
        return; //Para salir de la funcion si se cumple este condicional
    }

    for(i=0; i<cuponera.length; i++){
        if(cuponera[i].cupon==cupon){
            let NewPrice = (price*(100-cuponera[i].desc))/100;
            pResultCupon.innerText = 'El nuevo precio con descueto es: $' + NewPrice;
            return 
        }
        
    }

    pResultCupon.innerText = 'Ingrese cupon valido';

}

Hola, compañeros en este caso, para mi solución acerca de reducir el número de condicionales en este código hice uso de los objetos quedando de la siguiente manera;

<code> 
const inputPrice = document.querySelector('#price');
const inputDiscount = document.querySelector('#discount');
const btn = document.querySelector('#calcular');
const pResult = document.querySelector('#result');

let cupons = {
    abc: 50,
    qwr: 10,
    zxc: 20,
};

btn.addEventListener('click', applyDiscount);
// (P * (100 - D)) / 100

function applyDiscount() {
    let price = Number(inputPrice.value);
    let cupon = inputDiscount.value;

    for (let key in cupons) {
        console.log(key, cupons[key]);
        if (cupon == key) {
            let discount = cupons[key];
            let newPrice = (price * (100 - discount)) / 100;
            pResult.innerText = `Cupon del ${cupons[key]}%. El nuevo precio es: $` + newPrice;
            return
        } else {
            pResult.innerText = 'Cupon no valido';
        }
    }
}

const discounts = [
    {
        name: 'platzivacation',
        discount : 15
      },
     {
       name: 'mothersday',
        discount:85
     } ,
    {
        name:'independenceday',
        discount: 90
       
    },
    {
        name:'christmas',
        discount: 30
    }
]

let btnCalcularDescuento = document.querySelector("#btnCalcular");
let inputValuePrice = document.getElementById("price");
let inputValuesText = document.querySelector('#valueInput');
let inputDiscount = document.querySelector('#discount');

btnCalcularDescuento.addEventListener('click',capturarPrecio);

function capturarPrecio (){
  
    let precio = parseInt(inputValuePrice.value);
    const cuponValido =  discounts.find(item => item.name === inputDiscount.value);
    if(cuponValido != undefined){
        const priceCuponValido = Number(precio)*(100-cuponValido.discount) / 100;

        inputValuesText.innerHTML = 'con el cupon de descuento, total compra es ' `$${priceCuponValido}`
    }else{
        inputValuesText.innerHTML = 'Descuento no valido' 
    }

    
}

Mi aporte de mi resultado.

Es parecido al que se hace mención en la clase 😃

const couponPrice = document.querySelector('#coupon-price');
const couponName = document.querySelector('#coupon-name');
const btnCoupon = document.querySelector('#coupon-calc');
const couponResult = document.querySelector('#coupon-result');

const couponList = {
    platzi2023: 15,
    frontendMentor2023: 10,
    miduDev2023: 10
};

btnCoupon.addEventListener('click',()=>{
    const couponPriceCoersion = Number(couponPrice.value);
    if(!couponPriceCoersion || !couponName.value){
        couponResult.innerText = 'Por favor revisa tus datos';
        return;
    }
    if(couponList[couponName.value]){
        const discountCoupon = couponList[couponName.value];
        couponResult.innerText = (couponPriceCoersion*(100-discountCoupon))/100;
    }
});

Yo lo solucioné de esta manera, se acepta feedback

const inputPrice = document.querySelector("#inputPrice")
const inputCoupon = document.querySelector("#coupon")
const priceWithDiscountice = document.querySelector(".precio-con-descuento")
const btnCalcular = document.querySelector(".btn-calcular")


function calcularDescuentos(){ 
    const price = parseInt(inputPrice.value);
    let coupon = inputCoupon.value;

    const discounts = {
        platzivacation: 10,
        mothersday: 15,
        independenceday: 20,
        christmas: 50,
      };
      
      
        for (discount in discounts){
        if (coupon != discount) priceWithDiscountice.innerText =  "Cupon de descuento invalido";
        else {
            let newPrice = (price * (100 - discounts[discount])) / 100;
            priceWithDiscountice.innerText = `precio despues del descuento: $` + newPrice
        };
      }
 
}

btnCalcular.addEventListener("click", calcularDescuentos)

Siguiendo un par de aportes llegue a una solucion usando un <select> tag con opciones dinamicas.

Primero creo un formulario con un input y el select

<h2>Precio con descuento</h2>
    <form>
      <p>precio</p>
      <input id="InputPrice" type="number" placeholder="Aca pone tu precio" />
      <p>descuento</p>
      <select id="selectCoupons"></select>
      <button id="buttonCalcular">CALCULAR</button>
    </form>
    <p id="ResultP"></p>

Luego en discount.js:

// creamos el objeto que tendria los descuentos y luego agregamos las opciones al <select>
 const discounts = {
  diaDeLaIndependencia: 15,
  blackFriday: 30,
  diaDeLaMadre: 25,
  diaDelPadre: 20,
  navidad: 10,
};

for (cupon in discounts) {
  const option = document.createElement("option");
  option.value = discounts[cupon];
  option.textContent = cupon;
  selectCupones.appendChild(option);
}

y por ultimo tenemos las funciones de calcular los descuentos y lo agregamos como evento al boton

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 priceValue = Number(inputPrice.value);
  const discountValue = selectCupones.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();
});

Estoy orgulloso de esto jaja

Mi forma de resolverlo fue haciendo un objeto con los cupones y reutilizar el mismo codigo

function calcularPrecioConDescuento() {
    // formula (Precio * (100 - Descuento) / 100)

    let cupones  = {
        cupon1: 25,
        oferta: 30,
        descue: 70,
        ahorro: 40,
        promo5: 15,
    }
    
    const cupon = inputCupon.value
    const discount = Number(cupones[cupon])
    const price = Number(inputPrice.value);

    if (!cupon || !discount) {
        pResult.innerText = '¡Cupon incorrecto!'
        return
    }

    if (!price || !discount) {
        pResult.innerText = '¡Por favor llena el formulario!'
        return
    }

    if (discount > 100) {
        pResult.innerText = '¡No se puede aplicar ese descuento, intente de nuevo!'
        return
    }


    const newPrice = (price * (100 - discount)) / 100;

    pDiscount.innerText = 'El descuento fue del ' + discount + '%'

    pResult.innerText = 'El nuevo precio con descuento es $' + newPrice;
}

Esta fue mi manera de hacerlo con objetos

const precio = document.querySelector('#precio')
const descuento = document.querySelector('#descuento')
const total = document.querySelector('#total')
const cupon = document.querySelector('#cupon')

let cuponesValidos = {
    Platzi: 10, 
    Alonso: 20,
    SoyCupon: 30
}

function calcularDescuentoCupon(){
    if (cuponesValidos.hasOwnProperty(cupon.value)){
        total.innerText = "Utilizaste el descuento ( " +cupon.value +" )" + " Con un descuento de ( " +cuponesValidos[cupon.value]+"% ) El precio final es: "+precio.value * (cuponesValidos[cupon.value] * 0.010);
    }else{
        total.innerText = "Cupon no valido"
    }
}

Mi resultado de esta clase en repo y en web😊.

Se me ocurrió esta solución (muy manual 😃), una función por cada botón, ya que cada uno tiene diferentes descuentos, y que se ejecuten al escuchar evento de click:

El cupón de descuento debería ir en una lista desplegable 😉

Soy nuevo en JavaScript pero no quería quedarme sin hacerlo. Lo presento de la siguiente manera, lo más ordenado que pude, aunque creo que obviamente se puede refactorizar:

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>Document</title>
</head>
<body>
    <div>
        <div>
            <p>Ingrese el precio:</p>
            <input type="text" name="precio" id="precio">
        </div>
        <div>
            <p>Ingrese el código promocional:</p>
            <input type="text" name="codigo" id="codigo">
        </div>
        <div>
            <input type="submit" value="Reclamar Descuento" onclick="calcularDescuento()">
        </div>
        <div id="resultado">
            <p>Haga clic en calcular para ver tu nuevo precio.</p>
        </div>
    </div>
    <script src="./math.js"></script>
</body>
</html>

JavaScript

function calcularDescuento() {

    const precio = document.querySelector('#precio').value;
    const codigo = document.querySelector('#codigo').value;
    const promo = {
        promo1: 15,
        promo2: 20,
        promo3: 25,
        promo4: 30,
        promo5: 50,
    };
    
    switch (true) {
            /* Validando condiciones del precio, si no está correcto, no procede */
        case isNaN(precio):
            alert('El precio no es un número, por favor intente nuevamente');
            break;
        case (precio === ""): 
            alert('El precio no puede estar vacío, por favor intente nuevamente');
            break;
        case (precio <=0) : 
            alert('El precio no puede ser igual o menor que 0.00, por favor intente nuevamente');
            break;
            /* Finaliza validación del precio, si está correcto, procede el cálculo */
        default:
            if (promo[codigo]) {
                /* Haciendo el descuento correspondiente al código */
                let descuento = (precio * (100 - promo[codigo])) / 100;
                document.querySelector('#resultado').innerHTML = '<p>Su descuento es del ' + promo[codigo] +'% y su nuevo precio es $'+ descuento.toFixed(2) + '</p>';
                            }
            else {
                /* Si el código no es correcto */
                document.querySelector('#resultado').innerHTML = '<p>El código ' + codigo + ' que ingresó no es válido</p>';
            }
        }       
}

Cualquier corrección u observación es bienvenida.

const cupones = {
    platzivacation: 10,
    mothersday: 15,
    independenceday: 20,
    christmas: 50,
};

function descuentos() {
  let descuento1;
  let valorPrecio = Number(precio.value);
  let valorDescuento = descuento.value;

  if (!valorPrecio || !valorDescuento) {
    !valorPrecio
      ? (precio.style.background = "red")
      : !valorDescuento
      ? (descuento.style.background = "red")
      : false;
      return
  }
  if (isNaN(Number(valorDescuento))) {
    descuento1 = (valorPrecio * (100 - cupones[valorDescuento])) / 100;
    if(isNaN(descuento1)){
        contenedorRes.innerHTML = "El valor del descuento no existe";
        return
    }
    contenedorRes.innerHTML = "El descuento es $" + descuento1;
  } else {
    descuento1 = (valorPrecio * (100 - valorDescuento)) / 100;
    contenedorRes.innerHTML = "El descuento es $" + descuento1;
  }
}

Hola compañeros, les comparto mi resultado antes de que Juan lo hiciera

<section class="coupon_descount">
            <div class="coupon_descount--info">
                <h2>SOLO POR HOY!!</h2>
                <h3>Puedes acceder a los siguientes cupones y averiguar en cuanto queda tu producto</h3>
                <ul>
                    <li>Con Miguel programo</li>
                    <li>Aprendo como loco</li>
                    <li>vamos a ser millonarios</li>
                </ul>
            </div>
            <form  class="coupon_descount-form" action="">
                <label for="coupon_descount--price">Ingresa el precio de tu producto</label>
                <input type="number" class="coupon_descount--price">

                <label for="coupon_descount-coupon">Ingresa tu cupón</label>
                <input type="text" placeholder="coupon" class="coupon_descount-coupon">
                

                <input type="button" class="coupon_descount--button boton" value="Calcular">
                <p class="resultado_coupon"></p>


            </form>
            
        </section>





<code> 
const cupon_precio = document.querySelector('.coupon_descount--price');
const cupon_descount = document.querySelector('.coupon_descount-coupon');
const cupon_boton = document.querySelector('.coupon_descount--button');
const cupon_result = document.querySelector ('.resultado_coupon');

cupon_boton.addEventListener('click', calcular_precio_nuevo);

function calcular_precio_nuevo(){
    const precioC = Number(cupon_precio.value);
    const cuponC = cupon_descount.value;

    const price1=((precioC*(100-25))/100);
    const price2=((precioC*(100-50))/100);
    const price3=((precioC*(100-75))/100);

    if (cuponC == "Con Miguel programo"){
        cupon_result.innerText = 'Felicidades! Tu descuento es del 25%, el nuevo precio de tu producto es de'+ ' ' + '$' + price1;
        return;
    }else if(cuponC == "Aprendo como loco"){
        cupon_result.innerText = 'Felicidades! Tu descuento es del 50%, el nuevo precio de tu producto es de'+ ' ' + '$' + price2;
        return;
    }else if(cuponC == "vamos a ser millonarios"){
        cupon_result.innerText = 'Felicidades! Tu descuento es del 75%, el nuevo precio de tu producto es de' + ' ' + '$' +price3;
        return;
    }else{
        cupon_result.innerText = 'Asegurate de estar escribiendo bien tu cupón'
    }

}

Minuto 5:50

Like si entendiste por qué si se dejó poner el ‘e’.

yo lo que hice fue tomar el proyecto del curso practico de js y agregarle la funcion de cupones de descuento, los cupones de descuento son abcd, bcde, cdef y tienen un numero limitado de usos por compra, e hice que los cupones fueran objetos con varias propiedades para automatizar la generación de nuevos cupones https://github.com/Razec2112/curso-frontend-developer-js-practico

Mi Solución:

<!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>Coupon</title>
</head>
<body>
    <h1>Get a discount with your coupon 🔥😃</h1>

    <p>This iten is $12, 345.00 🎃</p>

    <label for="coupon">Enter your coupon!! 👇</label><br>
    <input type="text" class="coupon" id="coupon"><br>
    <button class="buy">Buy now!</button>

    <p class="pay"></p>

    <script src="./main.js"></script>
</body>
</html>

const coupon = document.querySelector('.coupon');
const buy = document.querySelector('.buy');
const pay = document.querySelector('.pay');

const coupon_list = {
    coupon_one: 'white',
    coupon_two: 'purple',
    coupon_three: 'black'
};

buy.addEventListener('click', discount);

function discount(){
    for(let item in coupon_list){
        if(coupon.value === coupon_list[item]){
            pay.innerText = coupon.value + coupon_list[item];
            if(coupon.value === 'white'){   
                pay.innerText = `Congratulation 😎 You have a 50% of Discount: $${12345 * 0.5}`;
            } else if (coupon.value === 'purple'){
                pay.innerText = `Congratulation 😎 You have a 25% of Discount: $${12345 * 0.75}`;
            }else {
                pay.innerText = `Congratulations 😎 You have a 12% Discount: $${12345 * 0.88}`;
            }
        }else if (coupon.value != "white" && coupon.value != "purple" && coupon.value != "black") {
            pay.innerText = `Try again 🤠`;
        }
        console.log(item, ":", coupon_list[item]);
    }
}


// Otra forma sin objeto y sin for in
/* function discount(){
    if (coupon.value != "white" && coupon.value != "purple" && coupon.value != "black"){
        pay.innerText = `Try again 🤠`;
    }else {
        if(coupon.value === 'white'){   
            pay.innerText = `Congratulation 😎 You have a 50% of Discount: $${12345 * 0.5}`;
        } else if (coupon.value === 'purple'){
            pay.innerText = `Congratulation 😎 You have a 25% of Discount: $${12345 * 0.75}`;
        }else {
            pay.innerText = `Congratulations 😎 You have a 12% Discount: $${12345 * 0.88}`;
        }
    }
} */

const valorProducto = document.querySelector(".valorP");
const valorPorsentaje = document.querySelector(".valorPt");
const valorR = document.querySelector(".resultado")
const calcular = document.querySelector(".calcular");
calcular.addEventListener(“click”, restarPorsentajeP);
const cupones = {
‘cuponSangel’: 10,
‘cuponRM’: 20,
‘cuponSA’: 15,
‘cuponSL’: 5,
‘cuponLK’: 3,
}
function restarPorsentajeP (){
const a = parseInt(valorProducto.value);
const nombreCupon = valorPorsentaje.value;
const b = cupones[nombreCupon];
if(!a){
valorR.innerText = oye lo siento no puedo darte un calculo sin tu darme los que vamos a decontar de tu producto :,(
}else if(!b){
valorR.innerText = oye este cupon a expirado o no existe
}else if(b > 40){
valorR.innerText = oye lo siento no podemos hacer un descueto que sea mayor a 40 amigo
}else{
const resultado = (a * (100 - b)) / 100;
valorR.innerText = oye amigo el descuento que se te a dado por tu cupon de ${nombreCupon} es de: $${resultado};
}
delete cupones[nombreCupon];
}
este a sido mi código la verdad ya lo había echo antes de ver este parte del curso y me sorprendio y psss estoy feliz que lo hice de una manera parecida

jajaja me encanta su inglés ajajaj

Reto cumplido con Objeto

Linkaso de codepen

En este caso evaluo que tipo de suscripcion es y que cupon es el que se tiene para el descuento.
Aca dejo como se ve, falta darle mas estilos.

Y aca esta el codigo con JS

Yo lo logre de esta forma:

const inputPrice = document.getElementById('price');
const inputCoupon = document.getElementById('coupon');
const btn = document.getElementById('calc');
const result = document.getElementById('result');

const coupon = {
  spring : 10,
  summer : 15,
  autumn : 20,
  winter : 25,
}

btn.addEventListener('click', discountCalc);

function discountCalc() {
  const price = Number(inputPrice.value);
  let discount;

  inputCoupon.value = inputCoupon.value.toLowerCase();

  if (price != 0 && Object.getOwnPropertyNames(coupon).includes(inputCoupon.value)) {
    discount = coupon[inputCoupon.value];
    const newPrice = (price * (100 - discount) / 100);
    result.innerText = 'Nuevo precio: $' + newPrice;
    console.log('Proceso exitoso');
    return

  } else if (Object.getOwnPropertyNames(coupon).includes(inputCoupon.value) == false) {
    result.innerText = 'Cupón incorrecto, prueba con otro cupón'
    return

  } else {
    result.innerText = 'Has ingresado un valor errado'
  }
}

Esta fus mi solucion con 3 tipos de membresia y 2 tipos de cupones

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;

}