No tienes acceso a esta clase

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

Cupones de descuento

8/30
Recursos

Aportes 105

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

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

});

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

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'
}```

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

}
    
    
}
 

Realic茅 el reto sin eliminar la opci贸n porcentaje de descuento, los cupones los valid茅 creando un array con 鈥渓laves: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 鈥渘ombre de cup贸n鈥 y 鈥渄escuento 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 (%)馃帿馃帿馃帿

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:
鈥淗ello2000鈥 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鈥n:

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

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 鈥榚鈥.

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(鈥渃lick鈥, restarPorsentajeP);
const cupones = {
鈥榗uponSangel鈥: 10,
鈥榗uponRM鈥: 20,
鈥榗uponSA鈥: 15,
鈥榗uponSL鈥: 5,
鈥榗uponLK鈥: 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;

}


Es confusa la consigna, Cup贸n de descuento deber铆a llamarse 鈥楴ombre Cupon鈥 ya que no queda claro en un principio si ya tenemos los valores de descuento o si lo deber铆amos agregar nosotros, es confuso el ejercicio en si, es decir si est谩n explicando que debemos aplicar buenas practicas para la compresi贸n de c贸digo no solo para nosotros sino que para una pr贸xima persona que pueda trabajar sobre este, me parece incongruente que se planteen este tipo de actividades tan confusas. -1

Asi va quedando mi reto:


Estos son los cupones validos:

  • DHG-2023
  • BDG-2023
  • VVH-2023
  • ATU-2023

Y por aqui la demo en Codepen: Aplicar descuentos

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

const coupons = [
	{ name: 'GMD20', discount: 40 },
	{ name: 'GMD30', discount: 60 },
	{ name: 'GMD40', discount: 80 },
	{ name: 'GMD50', discount: 100 },
];

btnCoupon.addEventListener('click', () => {
	pResultCoupon.innerText = 'Cup贸n NO v谩lido!! Precio: $' + priceProduct.value;
            
	coupons.forEach(element => {
		if ( element.name === priceCoupon.value ) {
			pResultCoupon.innerText = 'Precio con descuento: $' + priceProduct.value * (100 - element.discount) / 100;
		};                
	});            
});

Este codigo me ayudo a entender la logica de la funcion!

Mi soluci贸n:

const btnCalcular = document.querySelector('.btn');

const cupones = {
    navidad: 20,
    primercompra: 50,
    lunes: 10,
    cibermonday: 15,
}
  btnCalcular.addEventListener('click',calcularDescuento);

  function calcularDescuento(){
    const importe = Number(document.querySelector('#importe').value);
    const descuento = document.querySelector('#descuento').value;
    const resultado = document.querySelector('.resultado');
    if(!importe || !descuento){
        alert('Ingresa los datos plox');
    }else{
        if(!cupones[descuento]){
            alert('El cupon no existe');
            descuento.value = '';
         }else{
            const calculo = importe * (cupones[descuento]/100);
            resultado.innerText = `Con el descuento de ${descuento}% pagara $${importe - calculo} ahorrando un total de $${calculo}`;
         }   
    }
  }

Esta fue mi solucion:

const ExistCoupon = (name) => {
  let nameFormat = name.toUpperCase();
  const isExits = coupons.some((coupo) => coupo.name == nameFormat);
  return isExits;
};
const createCupon = (name, discount) => {
  const isExits = ExistCoupon(name);
  let nameFormat = name.toUpperCase();

  if (isExits) {
    console.log('nombre de cupon ya existe');
  } else {
    coupons.push({ name: nameFormat, discount });
  }
};

const calcularPrecioConCupon = () => {
  let price = priceInput.value;
  let descuentoWithCoupon = discountInput.value.toUpperCase();
  const isExits = ExistCoupon(descuentoWithCoupon);

  if (isExits) {
    const couponValid = coupons.filter(
      (coupon) => coupon.name == descuentoWithCoupon
    );
    const discountValue = couponValid[0].discount;
    const priceD = (price * (100 - discountValue)) / 100;

    appResult.innerHTML = `El nuevo precio con descuento es de ${priceD}`;
  }
};
const input_precio2 = document.getElementById('precio2');
const input_cupon_descuento = document.getElementById('cupon_descuento');
const p_resultado_cupon = document.getElementById('precio_con_descuento_cupon');

function mostrarPrecioDescuentoCupon(){
    const precio = input_precio2.value;
    const cuponInput = input_cupon_descuento.value;
    let cuponValido = false;
    const cupones = [
        {
            'code' : 'NEVERSTOPLEARNING',
            'discount' : 80
        },
        {
            'code' : 'BLACKFRIDAY',
            'discount' : 60
        },
        {   
            'code' : 'SUMMERDAYS',
            'discount' : 40
        },
        {
            'code' : 'SPECIALDAYS',
            'discount' : 20
        }
    ];
    if(precio != '' && cuponInput != ''){
        cupones.forEach(cupon => {
            if(cupon.code == cuponInput){
                p_resultado_cupon.innerText = `Descuento del ${cupon.discount}% aplicado! precio final: ${calcularDescuento(precio, cupon.discount)}`;
                cuponValido = true;
            }
        })
        if(cuponValido == false){
            p_resultado_cupon.innerText = 'C贸digo de cup贸n inv谩lido!';
        }
    }else{
        p_resultado_cupon.innerText = 'Por favor llene los campos';
    };
}

Paso a dejar como me quedo a mi lo de los cupones que hice al final de la clase pasada:

Si quieren ver el codigo aca les dejo mi repositorio en github, si quieren escribanme que necesito mas gente para aprender!
https://github.com/AndyCavedal/tienda-con-descuento

Jijiijij me gust贸 mucho. Ya me sali贸 馃槂
Ahora a terminar de ver el video 馃槃

Profe Juan David me gustar铆a que me calificaras este c贸digo o alguien, lo trate de hacer din谩mico, y escalable, para entregar diferentes par谩metros o omitirlos, haciendo que no sea tan estricto la entrega de los argumentos a la funci贸n.