Reto: funciones más inteligentes

13/24

Lectura

Nuestros clientes están muy felices de poder calcular el precio final de sus productos después del descuento, pero la tienda tiene una nueva solicitud para nosotros: implementar descuentos con cupones.

Déjame tu solución en los comentarios y luego, sí, evalúa mis 3 propuestas.

Solución #1: arrays y switch

Analicemos el problema y nuestra propuesta de solución:

  • Crearemos un array con cada uno de nuestros cupones.
  • Cambiaremos el input de descuento en HTML por un input de cupones.
  • Usaremos un condicional switch para aplicar cierto porcentaje de descuento en nuestros productos dependiendo del cupón que se haya elegido al presionar el botón del formulario.

Vamos paso a paso:

  • Crear un array de cupones
const coupons = [
    "JuanDC_es_Batman",
    "pero_no_le_digas_a_nadie",
    "es_un_secreto",
];
  • Cambiar el input de descuento por uno de cupones

Cambiemos los IDs en HTML:

<label for="InputCoupon">Escribe el cupón de descuento para tu producto:</label>
<input id="InputCoupon" type="text" />

Y actualicemos nuestras referencias en el código JavaScript:

const inputCoupon = document.getElementById("InputCoupon");
const couponValue = inputCoupon.value;
  • Crear una variable descuento y asignarle un valor distinto con un switch
function onClickButtonPriceDiscount() {
  const inputPrice = document.getElementById("InputPrice");
  const priceValue = inputPrice.value;
  
  const inputCoupon = document.getElementById("InputCoupon");
  const couponValue = inputCoupon.value;

  let descuento;

  switch(couponValue) {
    case coupons[0]: // "JuanDC_es_Batman"
      descuento = 15;
    break;
    case coupons[1]: // "pero_no_le_digas_a_nadie"
      descuento = 30;
    break;
    case coupons[2]: // "es_un_secreto"
      descuento = 25;
    break;
  }


  const precioConDescuento = calcularPrecioConDescuento(priceValue, descuento);

  const resultP = document.getElementById("ResultP");
  resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
}

Solución #2: legibilidad, error first y muerte al switch

Legibilidad es la facilidad que ofrece nuestro código para entenderlo sin tropiezos cuando lo leemos. Mejorar la legibilidad es mucho más importante que reducir la cantidad de líneas de código.

Además, error-first es un patrón de programación donde atrapamos los errores antes de escribir el resto de la lógica de nuestros programas. Aplicar error-first nos puede ayudar a mejorar la legibilidad de nuestro código (es completamente válido tener otra opinión, no te preocupes, cuéntame en los comentarios).

  • Error first con array.includes

La función array.includes() nos permite validar si un elemento ha sido almacenado en el array. Vamos a usar esta función para ejecutar un error si el cupón de los usuarios es inválido (no fue guardado en el array coupons):

if (!coupons.includes(couponValue)) {
    alert("El cupón " + couponValue + "no es válido");
}

Ya que estamos usando un condicional if, podemos reescribir el resto del condicional switch, pero en este caso usaremos condicionales else if:

if (!coupons.includes(couponValue)) {
   alert("El cupón " + couponValue + "no es válido");
} else if (couponValue === "JuanDC_es_Batman") {
   descuento = 15;
} else if (couponValue === "pero_no_le_digas_a_nadie") {
   descuento = 30;
} else if (couponValue === "es_un_secreto") {
   descuento = 25;
}

Solución #3: arrays y condicionales mucho más inteligentes

Ya usamos uno de los muchos métodos de los arrays para aplicar error first. Pero podemos usar algunos más para simplificar aún más nuestro código.

💡 Recuerda que mejorar la legibilidad no (necesariamente) significa reducir líneas de código.

  • Array de cupones 2.0: ahora también con los descuentos

Por ahora tenemos muy separada la lógica de nuestros cupones. Por un lado tenemos la lista de cupones, pero en otro lugar distinto definimos el descuento de cada cupón.

Vamos a cambiar eso convirtiendo nuestro array de strings en un array de objetos (con el nombre y descuento de cada cupón en el mismo lugar):

const coupons = [
    {
        name: "JuanDC_es_Batman",
        discount: 15,
    },
    {
        name: "pero_no_le_digas_a_nadie",
        discount: 30,
    },
    {
        name: "es_un_secreto",
        discount: 25,
    },
];

Ahora la función array.includes dejó de funcionar, pero podemos reemplazarla por la función array.find() para validar si el cupón que escribió el usuario está guardado en la propiedad name de alguno de los objetos en la lista de cupones.

Vamos a crear una variable isUserCouponValueValid con una función que valide si su parámetro coupon es igual a nuestra variable userCouponValue. Y esta variable la vamos a enviar como parámetro a nuestra función array.find().

const isCouponValueValid = function (coupon) {
    return coupon.name === couponValue;
};

const userCoupon = coupons.find(isCouponValueValid);

if (!userCoupon) {
    alert("El cupón " + couponValue + "no es válido");
}

¡Muy bien!

Pero fíjate que ya tenemos nuestro cupón (con nombre y descuento) disponible en la nueva variable userCoupon.

Podemos aprovechar esta variable para eliminar todos nuestros condicionales else if y cambiarlos por un condicional else que nos proporcione el porcentaje de descuento automáticamente, sin importar el cupón (válido) que estén usando nuestros usuarios.

if (!userCoupon) {
    alert("El cupón " + couponValue + "no es válido");
} else {
    const descuento = userCoupon.discount;
    const precioConDescuento = calcularPrecioConDescuento(priceValue, descuento);

    const resultP = document.getElementById("ResultP");
    resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
}

De esta forma, no solo logramos reducir las líneas de código de nuestro programa, sino también mejorar su legibilidad.


¡Te espero en la siguiente clase para que iniciemos nuestro tercer taller práctico del curso! 🤓

Aportes 446

Preguntas 29

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Así quedo mi taller 2


.
Este es mi repo y la web.

Yo lo realice de la siguiente manera:

Hasta aqui llegue, no entiendo como hacerlo. Que vaina con Javascript. Ni modo.

JavaScript

function calcularPrecioConDescuento(precio, descuento){
  const porcentajeDelPrecioConDescuento = 100 - descuento;
  const precioConDescuento = (precio * porcentajeDelPrecioConDescuento)/ 100;

  return precioConDescuento;

}

function onClickButtonPriceDiscount() {
    const inputPrice = document.getElementById("InputPrice");
    const priceValue = inputPrice.value;
    
    const inputCoupon = document.getElementById("inputCoupon");
    const couponValue = inputCoupon.value;

    const resultCoupon = document.getElementById("priceWithCoupon")
  
    let descuento;
    let precioConDescuento; 
  
    switch(true) {
      case couponValue === "JuanDC_es_Batman":
        descuento = 15;
        precioConDescuento = calcularPrecioConDescuento(priceValue,descuento);
        resultCoupon.innerText =`Cupón es valido el precio con descuento es de: $${precioConDescuento} dolores`
      break;
      case couponValue === "pero_no_le_digas_a_nadie":
        descuento = 30;
        precioConDescuento = calcularPrecioConDescuento(priceValue,descuento);
        resultCoupon.innerText =`Cupón es valido el precio con descuento es de: $${precioConDescuento} dolores`
      break;
      case couponValue === "es_un_secreto":
        descuento = 25;
        precioConDescuento = calcularPrecioConDescuento(priceValue,descuento);
        resultCoupon.innerText =`Cupón es valido el precio con descuento es de: $${precioConDescuento} dolores`
      break;
      default:
        resultCoupon.innerText = "el cupón ingresado no es valido"
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Porcentaje y descuento con coupons | Curso practico en javascript</title>
</head>
<body>
    <header>
        <h1>Porcentaje y descuentos con coupons</h1>
        <p> Este es el segundo curso Practico de JavaScrip</p>
    </header>
    <section>
        <form >
            <label for="InputPrice">Escribe el precio de tu producto:</label>
            <input type="number" id="InputPrice">

            <label for="inputCoupon">¿Escriba aquí si Tienes algun cupón de descuento? /label>
            <input type="text" id="inputCoupon">

            <button type="button" onclick="onClickButtonPriceDiscount()"> Agregar Cupon </button>

            <p id="priceWithCoupon"></p>
        </form>
    </section>
    <script src="./coupons.js"></script>
</body>
</html>```

Juan lo hace parecer fácil, ultimamente me esta costanto comprenderlo, pero la dedicación y el esfuerzo al final vale la pena.

.find() recorre el objeto y devuelve el primer valor que coincida con el parametro que se le paso a .find()

por ejemplo si tenemos un array…

var array = [1, 2, 3, 4, 5]
const buscar = array.find( elementoDelArray => elementoDelArray > 2)
console.log(buscar)
//resultado en consola = 3

Si no me equivoco la sentencia de abajo esta mal ya que esa variable fue declarada en el else if que remplazamos anteriormente.

if (!userCoupon) {
    alert("El cupón " + userCouponValue + "no es válido.");
};

Esta de abajo seria la función correcta.

if (!userCoupon) {
    alert("El cupón " + couponValue + " no es válido.");
};

TAREA RESUELTA CON EL TERCER METODO(ARRAY +)

<const coupons = [
    {
        name: "JuanDC_es_Batman",
        discount: 15,
    },
    {
        name: "pero_no_le_digas_a_nadie",
        discount: 30,
    },
    {
        name: "es_un_secreto",
        discount: 25,
    },
];

function calcularPrecioConDescuento(precio, descuento){
    const porcentajeDelPrecioConDescuento = 100 - descuento;
    const precioConDescuento = (precio * porcentajeDelPrecioConDescuento)/ 100;
  
    return precioConDescuento;
  
  }

  function onClickButtonPriceDiscount() {
           const inputPrice = document.getElementById("InputPrice");
           const priceValue = inputPrice.value;
          
           const inputCoupon = document.getElementById("inputCoupon");
           const couponValue = inputCoupon.value;
      
           
        
           
           

           const isCouponValueValid = function (coupon) {
            return coupon.name === couponValue;
        };
        
        const userCoupon = coupons.find(isCouponValueValid);
        
        if (!userCoupon) {
            alert("El cupón " + couponValue + " no es válido");
        } else {
            const descuento = userCoupon.discount;
            const precioConDescuento = calcularPrecioConDescuento(priceValue, descuento);
        
            const resultP = document.getElementById("ResultP");
            resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
        }

    }   


> 



<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Porcentaje y descuento con coupons | Curso practico en javascript</title>
</head>
<body>
    <header>
        <h1>Porcentaje y descuentos con coupons</h1>
        <p> Este es el segundo curso Practico de JavaScrip</p>
    </header>
    <section>
        <form >
           
            <label for="InputPrice">Escribe el precio de tu producto:</label>
            <input type="number" id="InputPrice">

            <label for="inputCoupon">¿Escriba aquí si Tienes algun cupón de descuento? </label>
            <input type="text" id="inputCoupon">

            <button type="button" onclick="onClickButtonPriceDiscount()"> Agregar Cupon </button>

            <p id="ResultP"></p>
        </form>
    </section>
    <script src="./arrayconllaves.js"></script>
</body>
</html>> 

Honestamente me costo entender el codigo de la ultima solucion. Tantas funciones y valores con nombres similares me resulto engorroso.
Dejo mi solucion (esya hecha considerando que no tienes tantos cupones) aun asi, me gustaria usar condicionales inteligentes, para que recorran los valores de los objetos del array. aun no encuentro la manera mas comoda para hacerlo, si alguien conoce una, estaria encantado de conocerla

const botonCalcular = document.querySelector('.calcular')
const templateRespuesta = document.querySelector('.template-respuesta')
const respuesta = document.querySelector('.respuesta')

const calcularDescuento = (precio, descuento) => {
    const precioPagar = precio * ( 100 - descuento) / 100

    escribir(precioPagar)
}
const escribir = (precioPagar) =>{
    respuesta.textContent = '$ ' + precioPagar
}

botonCalcular.onclick = () => {
    const inputPrice = document.querySelector('#inputPrice')
    const precioIngresado = inputPrice.value
    
    const inputCupon = document.querySelector('#inputCupon')
    const cuponIngresado = inputCupon.value

    const cupones = [
        {
            name: 'ciberday',
            descuento: 15
        },
        {
            name: 'off',
            descuento: 25
        },
        {
            name: 'descuento',
            descuento: 35
        },
    ]

    if(cuponIngresado == cupones[0].name){
        const descuentoCupon = cupones[0].descuento
        calcularDescuento(precioIngresado, descuentoCupon)
    }
    else if(cuponIngresado == cupones[1].name){
        const descuentoCupon = cupones[1].descuento
        calcularDescuento(precioIngresado, descuentoCupon)
    }
    else if(cuponIngresado == cupones[2].name){
        const descuentoCupon = cupones[2].descuento
        calcularDescuento(precioIngresado, descuentoCupon)
    }
    else{
        console.log('no tienes nada')
    }
}

Utilizando arrays y switch

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Porcentajes y descuentos | Curso práctico de JS de platzi</title>
</head>

<body>
    <header class="header">
        <h1 class="header_title">
            Porcentajes y descuentos
        </h1>
        <p class="header_subtitle">producto a comprar</p>
    </header>

    <section class="descuentos">
        <div class="descuentos_producto">
            <div class="descuento_producto_title">
                <h1>Producto</h1>
                <p>descripción</p>
            </div>
            <div class="descuento_producto_normal">
                <img class="image" src="./image/case2.png" alt="">
                <p class="decuento_producto_normal_precio" id="precioOriginal"></p>
            </div>
        </div>
        <div class="descuentos_producto">
            <div class="descuento_producto_title">
                <h1>Descuentos</h1>
                <p>tipo de descuento</p>
            </div>
            <div class="descuentos_producto_selector">
                <input type="radio" name="descuentos" value="1" checked>descuento normal
                <input type="radio" name="descuentos" value="2">tengo cupones
                <button class="descuentos_producto_selector_button" onclick="tipoDescuento()">ver descuento</button>
            </div>
            <div id="descuento_normal">
                <p>descuento normal 15%</p>
                <div>
                    <p>total ahorro</p>
                    <p id="total_ahorro"></p>
                    <p>total a pagar</p>
                    <p id="num_desc"></p>
                </div>
            </div>
            <div id="descuento_cupon">
                <p>descuento con cupones</p>
                <div>
                    <p>Ingresa tu cupón</p>
                    <input class="descuento_cupon_input" id="calc_desc" type="text" placeholder="cupon_1">
                    <button class="descuentos_producto_selector_button" onclick="calcular_descuento()"
                        type="button">cálcular
                        descuento</button>
                </div>
                <div>
                    <p>% total ahorro</p>
                    <p id="total_ahorro_cupon"></p>
                    <p>total a pagar</p>
                    <p id="num_desc_cupon"></p>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <p class="footer_title">descuentos</p>
    </footer>
    <script src="./descuentos.js"></script>
</body>

</html>

CSS

body {
  margin: 0px;
  padding: 0px;
  font-family: "Mulish", sans-serif;
}

.header {
  width: 100%;
  background-color: #3b479d;
  color: white;
  text-align: center;
}

.header_title {
  margin: 0px;
}

.header_subtitle {
  margin: 0px;
  padding: 20px 0px;
}

.descuentos {
  display: grid;
  grid-template-columns: 50% 50%;
  color: white;
  background: linear-gradient(#3b479d, #030708);
}
.descuentos_producto {
  border: 3px solid white;
  border-radius: 25px;
  margin: 0px 5px 30px 0px;
}

.descuento_producto_normal {
  display: grid;
  grid-template-columns: 50% 50%;
}

.descuento_producto_title {
  text-align: center;
}

.image {
  width: 250px;
}

.decuento_producto_normal_precio {
  align-items: center;
  justify-items: center;
}

.descuentos_producto_selector {
  text-align: center;
  align-items: center;
}

.descuentos_producto_selector_button {
  text-decoration: none;
  padding: 6px;
  font-weight: 400;
  font-size: 13px;
  color: #ffffff;
  background-color: #01095d;
  border-radius: 6px;
  border: 1px solid #3d0979;
  cursor: pointer;
}

.descuentos_producto_selector_button:hover {
  color: #090282;
  background-color: white;
}

.descuento_cupon_input {
  text-decoration: none;
  color: white;
  border: 2px solid #060163;
  background-color: #270263;
  padding: 4px;
}

#descuento_normal {
  display: none;
  text-align: center;
}
#descuento_cupon {
  display: none;
  text-align: center;
}

.footer {
  height: 10px;
  width: 100%;
  color: white;
  background: #030708;
  padding: 50px;
}

.footer_title {
  margin: 0;
}

JS

const precioOriginal = 900;
const descuento = 15;
const precioO = document.getElementById("precioOriginal");
precioO.innerText = "Precio: " + precioOriginal + "$";
const cupones = ["JuanDC_es_Batman", "pero_no_digas_a_nadie", "es_un_secreto"];

console.group("descuentos");

function calcularPrecioConDescuento(precio, descuento) {
  const precioConDescuento = precio - precio * (descuento / 100);
  return precioConDescuento;
}

const precioPCDescuento = calcularPrecioConDescuento(precioOriginal, descuento);

function sendDescuento(precioOriginal) {
  const desc = precioPCDescuento;
  const ahorro = precioOriginal - desc;
  document.getElementById("total_ahorro").innerHTML = ahorro;
  document.getElementById("num_desc").innerHTML = desc;
}

console.groupEnd();

console.group("cupones");

function validarCuponDescuento(cupon) {
  switch (cupon) {
    case "JuanDC_es_Batman":
      return 15;
      break;
    case "pero_no_le_digas_a_nadie":
      return 30;
      break;
    case "es_un_secreto":
      return 25;
      break;
  }
}

function calcular_descuento() {
  const descuento = document.getElementById("calc_desc").value;
  const porcentajeDescuento = validarCuponDescuento(descuento);
  const desc = calcularPrecioConDescuento(precioOriginal, porcentajeDescuento);
  const ahorro = precioOriginal - desc;
  document.getElementById("total_ahorro_cupon").innerHTML = ahorro;
  document.getElementById("num_desc_cupon").innerHTML = desc;
}

function tipoDescuento() {
  let eleccion = document.querySelector(
    'input[name="descuentos"]:checked'
  ).value;
  console.log(eleccion);
  sendDescuento(precioOriginal);
  habilitarDescuento(eleccion);
}

function habilitarDescuento(eleccion) {
  if (eleccion === "1") {
    document.getElementById("descuento_normal").style.display = "block";
    document.getElementById("descuento_cupon").style.display = "none";
  } else {
    document.getElementById("descuento_normal").style.display = "none";
    document.getElementById("descuento_cupon").style.display = "block";
  }
}

console.groupEnd();

Yo habia observado ya en un video que no es tan buena practica utilizar switch o if en estos tipos de validaciones ya que no hacen tus aplicaciones muy escalables, asi que segui las indicaciones del video y mi algoritmo que valida el cupon quedo asi.

const listaCupones = {
   cupon1: 10,
   cupon2: 15,
   cupon3: 20,
}; 

function descuentoDelCupon() {
   const nombreCupon = document.getElementById('inputCupon').value;
   const cuponDefault = 0;
   const cuponDescuento = listaCupones[nombreCupon] || cuponDefault;
   return cuponDescuento;
} 

Anexo el video del que lo saque

https://www.youtube.com/watch?v=0NlsJuwFsrQ&t=265s&ab_channel=midudev

Pensaba en rendirme, pero lo he logrado 💸

voy a ser sincero, no entendia la consigna hasta que lei el analisis jajaj, aquí mi codigo:

const cupones = {
    Gioconda : 15,
    SixtyEight : 35,
    DaVinci : 50,
    Giordano : 25
}
const CUPONES_DEFAULT = "Ese cupon no existe";

function calcularPrecioConDescuento(){
    const precio = document.getElementById("PriceTag").value;
    const descuento = document.getElementById("DiscountTag").value;
    const finalPrice = document.getElementById("PrecioConDescuento");
    if (cupones[descuento]){
    const precioTotal = (precio * (100 - cupones[descuento]))/100;
    finalPrice.innerText = `El precio del producto era: ${precio} , el descuento aplicado es del ${cupones[descuento]}% , dejando un total de ${precioTotal}.`
    }else{
        finalPrice.innerText = CUPONES_DEFAULT;
    }
}

En primer lugar declare no un array sino un diccionario donde ponemos el valor de los cupones, este esta compuesto por una ‘clave : valor’ por lo que me parecio mas apropiado que un switch, ahi podemos poner de clave numeros, letras o ambos incluso simbolos, y nos devolvera el numero entero correspondiente al descuento aplicado.
por otro lado para dar soporte a los cupones que no son validos o que no estan declarados, cree una constante default que devuelve el string de “Ese cupon no existe” aunque podria ser mejorable el mensaje al fin del ejercicio funciona correctamente, obviamente tuve que traer el elemento del P, que es lo que nos mostrara luego cual es el resultado, antes de que validara las cosas (porque de todas formas debemos informarle al usuario algo) y finalmente hice un if-else que comprueba si el cupon existe realiza la tarea matematica del precio final y si el cupon no existe entonces dice que el cupon no existe (deberia implementar que muestre el precio total ya que el cupon no existe pero bueno no fue parte de la consigna)

Después de una horas y unos cuántos bugs por aquí y por allá mi pequeña creación ha tomado forma wuajaja
Aquí puedes ver el proyecto

Lo que voy a ahora presentar claramente puede ser perfeccionado en varios aspectos, y podría repensar la estructura del código por mayor eficiencia y orden. He realizado la página que vende productos y acepta cupones, y tiene algunas peculiaridades extra, como es los paises donde opera la ‘empresa’. Dependiendo de éstos pagaremos más o menos impuestos y además sólo en algunos de los paises podremos canjear códigos de los dichos cupones.

  1. El primer paso aquí es escribir el pais del que quieres comprar productos. Abajo, dependiendo del pais que escribas, cuando pulses los tres botones referentes a los productos te aparecerá el stock actual del producto.

  2. Posteriormente, si compras de España o Portugal podrás canjear un código cupón si es que tienes el número correcto. Escribes el producto que quieres comprar y con éxito llega por consola el precio final de nuestro producto, y la lista del inventario internamente en el programa se reduce en uno.


    Pone “with discount” porque el código se escribió bien, si no no saldría de esa forma

Código:

function userCountry() {
    let country = document.getElementById("countryInput").value
    return country
}

function supplyOf(productArr, productName, country = userCountry()){
    let supply = 0
    for (let i = 0; i < productArr.length; i++) {
        if (country === productArr[i]["country"]){
            supply++
        }
    }
    const message = `The supply of ${productName} in ${country} is ${supply}`
    supplyP.innerHTML = message
}

function takeOneNow() {
    let code = document.getElementById("codeInput").value
    if (couponMark.checked) {
        if (userCountry().toLowerCase() === "brazil" || userCountry().toLowerCase() === "usa"){
            alert(`Sorry, but there are currently no coupons avaible for ${userCountry()}`)
        } else {
            buyProduct(prompt(`Which would you like to buy?`), code)
        }
    } else {
        buyProduct(prompt(`Which would you like to buy?`), false)
    }
}

function buyProduct(product, code) {
    
    let productArr = nameToArray(product.toLowerCase())
    let priceWithDIscount = productArr[0].computeRealPrice() - productArr[0].computeRealPrice() * 15/100
    let price = productArr[0].computeRealPrice()
    
    if (code) {
        validateCode(code)
    }

    if (validateCode(code)){
        console.log(`Congrats! The price with discount is ${priceWithDIscount}`)
        productArr.pop()
    } else {
        console.log(`Congrats! The price of your product is ${price}. If you did not get he discount, try to write it down again.`)
        productArr.pop()
    }
}

function nameToArray(name) {
    switch (name) {
        case "shirts":
            return shirts
        case "pants":
            return pants
        case "hats":
            return hats
    }
}

function validateCode(code) {
    for (let i = 0; i < discountCoupons.length; i++) {
        const element = discountCoupons[i];
        if (code === element["number"] && userCountry() === element["validityInCountry"]){
            return true
        }
    }
}

class Product {
    constructor(name, price, discount, country) {
        this.name = name
        this.price = price
        this.discount = discount
        this.country = country
    }

    //realPrice = price + taxes - discount

    computeRealPrice() {
        const realPrice = this.computeTaxes(this.price) - (this.discount/100) * this.computeTaxes(this.price)
        return realPrice
    }

    computeTaxes() {
        return this.price + (this.taxesOfCountry(this.country) / 100) * this.price
    }
    
    taxesOfCountry() {
        //Paises donde opera la empresa ficticia

        switch (this.country.toLowerCase()) {
            case "spain":
                return 10
            case "usa":
                return 5.5
            case "brazil":
                return 12
            case "portugal":
                return 13
        }
    }

}

class Coupon {
    constructor(number, validityInCountry) {
        this.number = number
        this.validityInCountry = validityInCountry
    }
}

Variables (productos, cupones):

const spainOne = new Coupon ("473815369", "Spain")
const spainTwo = new Coupon ("152749836", "Spain")
const spainThree = new Coupon ("498315274", "Spain")
const spainFour = new Coupon ("849123471", "Spain")
const spainFive = new Coupon ("984314512", "Spain")
const portugalOne = new Coupon ("841923413", "Portugal")
const portugalTwo = new Coupon ("827901256", "Portugal")
const portugalThree = new Coupon ("002346764", "Portugal")
const portugalFour = new Coupon ("198237645", "Portugal")
const portugalFive = new Coupon ("564738293", "Portugal")


let discountCoupons = [spainOne, spainTwo, spainThree, spainFour, spainFive, portugalOne, portugalTwo, portugalThree, portugalFour, portugalFive]

const redShirt = new Product ("shirt", 94.99, 10, "Spain")
const whiteShirt = new Product ("shirt", 79.99, 0, "Portugal")
const greenShirt = new Product ("shirt", 94.99, 10, "Brazil")

let shirts = [redShirt, whiteShirt, greenShirt]

const bluePants = new Product ("pants", 104.99, 15, "USA")
const greyPants = new Product ("pants", 69.99, 20, "Brazil")
const greenPants = new Product ("pants", 49.99, 5, "Spain")
const blackPants = new Product ("pants", 119.99, 15, "Portugal")

let pants = [bluePants, greyPants, greenPants, blackPants]

const yellowHat = new Product ("hat", 33.99, 8, "USA")
const blueHat = new Product ("hat", 45.99, 11, "Brazil")

let hats = [yellowHat, blueHat]

let products = [...shirts, ...pants, ...hats]

Aquí mi solución:

Así quedo mi reto:


Link: https://webdev-platzi.vercel.app/

Va el código con comentarios para explicar qué hago en cada paso:

// Base de datos de cupones
const coupons = [
  { name: "black_friday", discount: 35 },
  { name: "cyber_monday", discount: 20 },
  { name: "summer_vibes", discount: 15 },
  { name: "quarantine", discount: 25 },
  { name: "half_price", discount: 50 },
];

// Calcular el cupón de descuento
function calculateCouponDiscount() {
  const resultP = document.getElementById("ResultP");

  const clientCoupon = document.getElementById("InputCoupon").value;
  // couponValidator retorna un booleano para saber
  // si el cupón existe en la base de datos.
  const couponValidator = coupons.some((element) => {
    return element.name == clientCoupon;
  });

  // Condicional para hacer el calculo o mandar mensaje de error
  if (couponValidator) {
    const priceValue = document.getElementById("InputPrice").value;
    const coupon = coupons.find((element) => {
      return element.name == clientCoupon;
    });
    const couponDiscount = coupon.discount;

    const finalPrice = calcularPrecioConDescuento(priceValue, couponDiscount);

    resultP.innerText = `El precio con cupón aplicado es de $${finalPrice}`;
  } else {
    resultP.innerText = "El cupón no es válido";
  }
}

Hola les comparto mi solución!!

const InputPrice = document.getElementById('InputPrice')
const InputDiscount = document.getElementById('InputDiscount')
const InputCoupon = document.getElementById('InputCoupon')
const ResultPrice = document.getElementById('ResultPrice')

const COUPONS = [
  {
    name: 'LOVE',
    discount: 30
  },
  {
    name: 'HATE',
    discount: 5
  },
  {
    name: 'PLATZI',
    discount: 50
  }
]

const calcularPrecioDescuento = ( precio, descuento ) => {
  const porcentajePrecioDescuento = 100 - descuento
  const precioConDescuento = (precio * porcentajePrecioDescuento) / 100
  return precioConDescuento
}

const hasFieldEmpty = (price, discount) => (!price || !discount)

const findCoupon = (valueCoupon) => (
  COUPONS.find(coupon => coupon.name === valueCoupon.toUpperCase())
)

const onClickButtonPriceDiscount = () => {
  const priceValue = InputPrice.value
  const discountValue = InputDiscount.value
  const priceFinal = calcularPrecioDescuento(priceValue, discountValue)

  if(hasFieldEmpty(priceValue, discountValue)) {
    ResultPrice.innerText = 'Debes introducir el precio y un descuento!'
    return false
  }

  ResultPrice.innerText = `Tu precio con descuento es de $${priceFinal}`
}

const onClickButtonPriceCoupon = () => {
  const couponValue = InputCoupon.value
  const priceValue = InputPrice.value
  const searchCoupon = findCoupon(couponValue)
  const priceFinal = calcularPrecioDescuento(priceValue, searchCoupon?.discount)

  if(hasFieldEmpty(priceValue, couponValue)) {
    ResultPrice.innerText = 'Debes introducir el precio y un cúpon!'
    return false
  }
  
  if(!!!searchCoupon) {
    ResultPrice.innerText = 'Este cupon no es valido'
    return false
  }

  ResultPrice.innerText = `Tu precio con un cupón es de $${priceFinal}`
} 

Así quedo mi reto y mi taller 2, lo realice con dos funciones extras, no sé si fue la mejor opción pero funciona, se recibe con gusto la retroalimentación 😁
.

.
A continuación mi código:

function calcularPrecioConDescuento(precio, descuento) {
    const porcentajeConDescuento = 100 - descuento;
    const precioTotal = (precio * porcentajeConDescuento)/100;
    return precioTotal;
}

function calcularPrecioConCupon(precioConDescuento, cupon) {
    const porcentajeConCupon = 100 - cupon;
    const precioTotalCupon = (precioConDescuento * porcentajeConCupon)/100;
    return precioTotalCupon;
}

function nombreCupon(nombreCupon) {
    if(nombreCupon == 'new') {
        const cupon = 10;
        return cupon;
    } else if(nombreCupon == 'de15') {
        const cupon = 15;
        return cupon;
    } else if(nombreCupon == 'de30') {
        const cupon = 30;
        return cupon;
    } else {
        const cupon = 0
        return cupon;
    }
}

function precioConDescuento() {
    const inputPrice = document.getElementById("InputPrice");
    const inputDiscount = document.getElementById("InputDiscount");
    const inputCupon = document.getElementById("InputCupon");

    const valuePrice = inputPrice.value;
    const valueDiscount = inputDiscount.value;
    const valueCupon = inputCupon.value;


    const precioConDescuento = calcularPrecioConDescuento(valuePrice, valueDiscount);
    const valorDelCupon = nombreCupon(valueCupon);
    const precioConCupon = calcularPrecioConCupon(precioConDescuento, valorDelCupon);
    const resultP = document.getElementById("resultPrice");
    resultP.innerText = "El precio con descuento es: $" + precioConCupon;
}

Esta fue mi solucion 😄

const cupones = [
    {
        clave: 'DESC20',
        porcentaje: 20
    },
    {
        clave: 'DESC30',
        porcentaje: 30
    },
    {
        clave: 'DESC10',
        porcentaje: 10
    },
]


/**
 * Calcula el precio con el descuento
 * @param {*} precio 
 * @param {*} descuento 
 * @returns precioConDescuento
 */
function calcularPrecioConDescuento(precio,descuento){
    const porcentajePrecioConDescuento = 100 - descuento;
    const precioConDescuento = (precio * porcentajePrecioConDescuento)/100    
    return precioConDescuento;
}

/**
 * Muestra el precio con descuento
 */
function onClickButtonPriceDiscount(){
    const inputPrice = document.getElementById("InputPrice")
    const price = inputPrice.value
    
    const InputCupon = document.getElementById("InputCupon")
    const claveCupon = InputCupon.value

    const cuponValido = cupones.find(cupon => cupon.clave === claveCupon)
    const discount = cuponValido.porcentaje

    const precioConDescuento = calcularPrecioConDescuento(price,discount);

    const resultP = document.getElementById("ResultP");
    resultP.innerText = "El precio con descuento es de $" + precioConDescuento;
}

Reto cumplido!!!

Así quedo (muy pronto lo subiré a mí portafolio)

Código JS:

const coupons = [
  {
      name: "JuanDC_es_Batman",
      discount: 15,
  },
  {
      name: "pero_no_le_digas_a_nadie",
      discount: 30,
  },
  {
      name: "es_un_secreto",
      discount: 25,
  },
  {
    name: "es_el_mejor_curso_practico_de_JavaScript",
      discount: 85,
  },
  {
    name: "nunca_pares_de_aprender",
      discount: 99,
  },
];

const inputPrice = document.getElementById('InputPrice');
const inputDiscount = document.getElementById('InputDiscount');
const inputCoupon = document.getElementById('InputCoupon');
const resultP = document.getElementById('resultPrice')

function calcularPrecioConDescuento(precio,  descuento) {

  const porcentajePrecioConDescuento = 100 - descuento;
  const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;

  return precioConDescuento;
}

function calcularPrecioTwo (precio, descuento, cupon) {
  const descuentoTotal = parseInt(descuento) + parseInt(cupon);
  const porcentajePrecioConDescuento = 100 - descuentoTotal;
  const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;

  return precioConDescuento;
}

function onClickButtonPriceDiscount() {
  const priceValue = inputPrice.value;
  const discountValue = inputDiscount.value;
  if ( priceValue == 0  ) {
    resultP.innerText = `Por favor introduce un precio para continuar`;
  } else if ( discountValue == 0 ) {
    resultP.innerText = `Por favor introduce un descuento para continuar`;
  } else {
    const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
    resultP.innerText = `El precio con descuento es: $${precioConDescuento}`;
  }
}

function onClickButtonPriceCoupon() {
  const priceValue = inputPrice.value;
  const couponValue = inputCoupon.value;

  if ( couponValue == 0 ) {
    resultP.innerText = `Por favor introduce un descuento para continuar`;
  } else if ( priceValue == 0 ) {
    resultP.innerText = `Por favor introduce un precio para continuar`;
  } else {
    const isCouponValueValid = function (coupon) {
      return coupon.name === couponValue;
    };
    const userCoupon = coupons.find(isCouponValueValid);
    const descuento = userCoupon.discount;
    if (!userCoupon) {
      resultP.innerHTML = `El cupón <strong>${couponValue}</strong> no es válido`;
    }  else {
      const precioConDescuento = calcularPrecioConDescuento(priceValue, descuento);
      resultP.innerText = `El precio con descuento es: $${precioConDescuento}`;
    }
  }
}

function onClickButtonPriceTwo() {
  const priceValue = inputPrice.value;
  const discountValue = inputDiscount.value;
  const couponValue = inputCoupon.value;

  if ( couponValue == 0 ) {
    resultP.innerText = `Por favor introduce un cupón para continuar`;
  } else if ( priceValue == 0 ) {
    resultP.innerText = `Por favor introduce un precio para continuar`;
  } else if ( discountValue == 0 ) {
    resultP.innerText = `Por favor introduce un descuento para continuar`;
  } else {
    const isCouponValueValid = function (coupon) {
      return coupon.name === couponValue;
    };
    const userCoupon = coupons.find(isCouponValueValid);
    const descuento = userCoupon.discount;
    if (!userCoupon) {
      resultP.innerHTML = `El cupón <strong>${couponValue}</strong> no es válido`;
    } else {
      const precioConDescuento = calcularPrecioTwo(priceValue, discountValue,descuento);
      resultP.innerText = `El precio con los dos descuentos es: $${precioConDescuento}`;
    }
  }
}

// console.log(`El precio original es: ${precioOriginal}, el descuento es: ${descuento}, y el total a pagar es: ${precioConDescuento}`);

Les comparto la forma en que solucioné el reto.
.
Para agregar el uso de cupones cree un elemento <select> con las opciones de cupones dentro de ella.
.

.

<label for="coupon-input">
	¿Tienes algun cupón? ¡Seleccionalo!
	<select id="coupon-input">
		<option value="0">No Coupon</option>
                <option value="15">Copper Coupon 15%</option>
                <option value="30">Silver Coupon 30%</option>
                <option value="50">Gold Coupon 50%</option>
	</select>
</label> 

.
El código de JS suma el procentaje de descuento dado en la tienda (si lo hay ) y lo suma al brindado por el cupón si lo hay, luego obtiene el precio final a pagar. Es la solución más simple que se me ocurrió.
.

.

function calculateFinalPrice() {
    const originalPrice = document.getElementById("original-price-input");
    const originalPriceValue = originalPrice.value;
    const discount = document.getElementById("discount-input");
    const discountValue = discount.value;
    const coupon = document.getElementById("coupon-input")
    const couponValue = coupon.value;
    const priceContainer = document.getElementById("final-price--container");

    const finalPriceValue = originalPriceValue * (100 - discountValue - couponValue) * .01;
    priceContainer.innerText = "El precio final de tu producto es $" + finalPriceValue + "."
    
    console.log(originalPriceValue, discountValue, couponValue, finalPriceValue);
}

Mi código:

function cupon(precio, nombreCupon) {
    const cupones = [{
            cupon: 'Robi',
            descuento: 25,
        },
        {
            cupon: 'Papita',
            descuento: 50,
        },
        {
            cupon: 'Rabi',
            descuento: 60,
        }
    ]
    const pucharse = cupones.find((item) => item.cupon == nombreCupon);
    if(!pucharse) {
        return null;
    }
    const money = pucharse.descuento;
    const final = calcularPrecioConDescuento(precio, money);
    return final;

}

function aplicarCupon() {
    const inputPrice = document.getElementById('InputPrice');
    const priceValue = inputPrice.value;

    const inputCupon = document.getElementById('InputCupon');
    const valueCupon = inputCupon.value;
    const compraFinal = cupon(priceValue, valueCupon);

    const resultCupon = document.getElementById('ResultCupon');
    resultCupon.innerText = `Tu total a pagar es ${compraFinal}`;
}

Como se ve:

Sé que el segundo y el tercer método está más optimizado pero la verdad super super enredado. No entendí muy bien porque hasta el momento no hemos profundizado en arrays, solo sabía lo básico y ver tantas funciones con los arrays hizo que la verdad me desanimara mucho. Una curva de aprendizaje muy alta esos ejercicios. Se debió de haber hecho una clase para esa explicación porque es un tema complejo

Es trabajo humilde, guiado por el profe porque tenia dudas de como validar el texto. Pero es honesto, sin estilos de css, obra negra pero funcional! Depsues de un mes volví a retomar! Gracias

function calculadoraDescuento(precio, descuento){
    const porcentToPay = 100 - descuento;
    const precioPagar = (precio * porcentToPay)/100;
    return precioPagar
}
const cupones =["cupon uno", "cupon dos", "cupon tres"];

function onClickButtonPriceDiscount(){
    const inputPrice = document.getElementById("inputPrice");
    const priceValue = inputPrice.value; 
    // del elemento anterior sacaremos el valor escrito por el usuario
    
    const inputCupon = document.getElementById("inputCupon");
    const cuponValue = inputCupon.value;

    let descuento;

    if (!cupones.includes(cuponValue)){
        alert("El cupon " + cuponValue + " no es valido, intente nuevamente");

    }else if (cuponValue === "cupon uno"){
        descuento = 10;
    }else if (cuponValue === "cupon dos"){
        descuento = 20;
    }else if (cuponValue === "cupon tres"){
        descuento = 30;
    }
    /*
    switch(cuponValue){

        case cupones[0]: //cupon 1
            descuento = 10;
        break;
        case cupones[1]: //cupon 2
            descuento = 20;
        break;
        case cupones[2]: // cupon 3
            descuento = 30;
        break

    }
   */

    const precioConDescuento = calculadoraDescuento(priceValue,descuento);

    const resultP = document.getElementById("ResultP");
    resultP.innerText = "El precio con descuento a pagar son: $" + precioConDescuento;
}

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>Porcentajes y descuentos</title>
</head>
<body>
    <header>
        <h1>
            Porcentajes y descuentos
        </h1>
        <p>Taller de calculo descuento de precios</p>
    </header>
        <section>
            <h2>Calcula el precio a pagar de productos con descuento|</h2>
            <form>
                <label for="inputPrice">Escriba el precio del producto</label>
                <input id= "inputPrice" type="number">

                <label for="inputCupon"><br/>Escriba el cupón para redimir tu descuento</label>             
                <input id= "inputCupon" type="text"><br/>

                <button type="button" onclick="onClickButtonPriceDiscount()">
                    calcular el precio con descuento</button>
                
                <p id="ResultP"></p>
            </form>
        </section>


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

Mi solucion con onkeyup (sin boton, se calcula al ingresar valores):

function calcularPrecioConDescuento(precio, descuento) {
    console.log(descuento)
    const porcentajePrecioConDescuento = 100 - descuento;
    const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;

    return precioConDescuento;
}

function onClickButtonPriceDiscount() {
    const cupons = [
        {
            name: 'maxter',
            discount: 25
        },
        {
            name: 'mux',
            discount:35
        }
    ]
    const inputPrice = document.getElementById('InputPrice');
    const priceValue = inputPrice.value;
    // const inputDiscount = document.getElementById('InputDiscount');
    // const discountValue = inputDiscount.value;
    const inputCupon = document.getElementById('InputCupon');
    const cuponValue = inputCupon.value;
    const cupon = cupons.find(cupon=> cupon.name === cuponValue)
    const avisoP = document.getElementById('AvisoP');
    const resultP = document.getElementById('ResultP');
    if(!cupon){
        avisoP.innerText = cuponValue!=''?`Cupon invalido`:'';
        const precioConDescuento = calcularPrecioConDescuento(priceValue,0 );
        resultP.innerText = `El precio con descuento es: $${precioConDescuento}`;
    } else {
        avisoP.innerText = ``;
        const precioConDescuento = calcularPrecioConDescuento(priceValue,cupon.discount);
        resultP.innerText = `El precio con descuento es: $${precioConDescuento}`;
    }
}

Mi resultado del taller antes de ver las soluciones:

Pueden ver la pagina Aquí.
Repo: https://github.com/Juanvcas/Platzi-Workshops-Page__JS-pracice-course

💚 NUNCA PARES DE APRENDER 💚
Los resultados cada vez son más satisfactorios

Aporto aquí mi solución…

console.group("Discounts")
function realDiscount(precioOriginal, descuento){
    const precioDescuento = (precioOriginal*(100-descuento))/100;
    return precioDescuento;
}
console.groupEnd();


//Interacting with HTML and javascript

function calculateDiscount(){

    const COUPON1 = "coupon1_2021";
    const COUPON2 = "javascript_learning";
    const COUPON3 = "I_love_coding";

    const coupons= [
        {
            name:COUPON1,
            discount:10
        },
        {
            name: COUPON2,
            discount:15
        },
        {
            name:COUPON3,
            discount:30
        },
    ];

    const input1 = document.getElementById("originalPrice");
    const originalPrice = parseFloat(input1.value);

    const input2 = document.getElementById("coupon");
    const couponValue = input2.value;    
    
    const isCouponValid = function(coupon) {
        return coupon.name === couponValue;
    }

    const userCoupon = coupons.find(isCouponValid);
    const text = document.getElementById("discountResult");

    if (Number.isNaN(originalPrice) || originalPrice == 0){
        alert("You must enter a valid price value!")
    }
    else if(!userCoupon){
        text.innerText = "The coupon: " + couponValue + " is not valid!";
    }
    else{
        discount = userCoupon.discount
        const precioDescuento = realDiscount(originalPrice, discount);        
        text.innerText = 
            "The original price is: " 
            + originalPrice 
            + " USD.  " 
            +"The discount is: "
            + discount
            + "%. "            
            + "The final prise is: " 
            + precioDescuento;        
    }    
}

Hola a todos, encontré un error en la tercera solución, no se si estoy en correcto, pero si alguien mas le paso me dicen:

En la tercera solución el profe dice “variable userCouponValue” pero en realidad hace referencia a la variable “userCoupon”, hice el ejercicio como pienso que es y me funciono, acá dejo el código, espero les sirva, saludos

const coupons = [
    {
      name: "25off",
      discount: 25,
    },
    {
      name: "35off",
      discount: 35,
    },
    {
      name: "50off",
      discount: "50off",
    },
  ];

  const isCouponValueValid = function(coupons) {
    return coupons.name === couponValue;
  }

  const userCoupons = coupons.find(isCouponValueValid);

  if (!userCoupons) {
    alert("El Cupón " + couponValue + " no es válido");
  } else {
      const descuentoCupon = userCoupons.discount;
      const precioConCupon = carcularPrecioConDescuento(priceValueCoupon, descuentoCupon);

      const resultPriceCupon = document.getElementById("resultPriceCupon");
      resultPriceCupon.innerText = "Tu precio a pagar es de: $" + precioConCupon;
  } 

Hola Compañeros, lo termine de esta manera con un switch, primero hice los inputs en HTML

        <form action="">
            <h2>Agregar cupón</h2>

            <label for="newPrice">Escribe el precio de tu producto:</label>
            <input type="number" id="newPrice">
            <label for="inputCoupon">¿Tienes algun cupón de descuento? Ingresalo Aqui :D</label>
            <input type="text" id="inputCoupon">
            <button type="button" onclick="verifyCoupon()"> Agregar Cupon </button>

            <p id="priceWithCoupon"></p>
        </form>

newPrice es para colocar el precio del producto (el id price ya se estaba usando en el ejercicio anterior en mi codigo) e inputCoupon es para recibir el cupón del usuario.

El JS lo hice usando switch, le puse dos cases para dos cupones activos, un case por si no colocaba ningún cupón y default por si no colocaba un cupón valido


const calculateDiscount = (price, discount) => price - (price*(discount/100))

const verifyCoupon = () => {
    const inputPrice = document.getElementById("newPrice")
    const priceValue = inputPrice.value

    const inputCoupon = document.getElementById("inputCoupon")
    const couponValue = inputCoupon.value

    const resultCoupon = document.getElementById("priceWithCoupon")
    let discount
    let priceWithDiscount 

    switch(true){
        case couponValue === "BuenFin20":
            discount = 20
            priceWithDiscount = calculateDiscount(priceValue, discount)
            resultCoupon.innerText = `Tu cupón es valido tu precio con descuento es de: $${priceWithDiscount} dolarucos`
        break
        case couponValue === "PlatziDay":
            discount = 30
            priceWithDiscount = calculateDiscount(priceValue, discount)
            resultCoupon.innerText = `Tu cupón es valido tu precio con descuento es de: $${priceWithDiscount} dolarucos`
        break
        case couponValue === "":
            resultCoupon.innerText = `Tu precio final es de $${priceValue} dolarucos`
        break
        default:
            resultCoupon.innerText = `Lo sentimos, el cupón ingresado no es valido, intentalo con uno diferente :( )`
    }  
}

Hola les comparto mi solucion al reto, les dejo mi repo, cualquier feedback es bienvenido

Despues de errores que no se aun porque se dieron, cosas como borrar la consola porque al parecer estaba cargada con datos, me afectaron el desarrollo y mi genio, pero al fin y esa satisfacción es grandiosa, Nunca pares de aprender.

Así quedo mi 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>Precio con descuento</title>
</head>
<body>
    <header>
        <h1>Funcion que calcula descuentos con dos entradas</h1>
        <h2>calcula el descuento</h2>
    </header>

    <form action="">
        <label for="Original">Precio Original</label>
        <input type="number" id="Original">

        <label for="descuento">Escribe el descuento</label>
        <input type="text" id="descuento">

        <button type="button" onclick="calculaDescuento()">Calcula el precio con descuento</button>

        <p id="resultado"></p>
    </form>

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

.css

// cupones
let cupones = ["desc10", "desc15", "desc30", "desc40"];

function verificarCupon(descuento){
    let cupon = 0;
    for(let i =0; i<cupones.length; i++){
            if(descuento === cupones[i]) {
                switch (descuento) {
                    case "desc10":
                            cupon = 10;
                        break;

                    case "desc15":
                            cupon = 15;
                        break;

                    case "desc15":
                            cupon = 15;
                        break;
                    
                    case "desc30":
                            cupon = 30;
                        break;
                
                    default:
                        cupon = 40;
                        break;
                }
            } 

        }
    return cupon;
}

function calculaDescuento() {
    let precio = document.getElementById("Original").value;

    let descuento = document.getElementById("descuento").value;


    let resultado = document.getElementById("resultado");

    let cupon = verificarCupon(descuento);
    
    let precioDescuento = precio - precio * cupon /100;

    if(cupon==0) {
        resultado.innerText = "Ese no es un cupon, el precio a pagar es: $" + precio;
    }
    else {
        resultado.innerText = "el Precio a pagar es: $" + precioDescuento;
    }

}

Lo siento profesor Juan David, me fui por el lado oscuro de los mas fácil:

const cupones = {
  'Sin descuento': 0,
  '5%': 5,
  '15%': 15,
  '25%': 25,
  '30%': 30,
  '40%': 40 
}

function calcularPrecioConDescuento(precio, descuento) {
  const porcentajePrecioConDescuento = 100 - descuento;
  const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
  return precioConDescuento;
}

function onClickButtonPriceDescount() {
  const resultP = document.getElementById("resultP");

  const inputPrice = document.getElementById("inputPrice");
  const priceValue = inputPrice.value;

  const inputDescount = document.getElementById("inputDiscount");
  const descountValue = inputDescount.value;

  const cupon = document.getElementById("cupon");
  const cuponValue = cupon.value;

  const precioConDescuento = calcularPrecioConDescuento(priceValue, descountValue);
  const precioConDescuentoCupon = calcularPrecioConDescuento(precioConDescuento, cupones[cuponValue]);
  
  console.log(cuponValue);

  if(cupones[cuponValue] == 0) {
    return resultP.innerText = `El precio con descuento es: $${precioConDescuento}`; 
  } else {
    return resultP.innerText = `
    El precio con descuento mas el descuento del cupo es $${precioConDescuentoCupon}
    `; 
  }
}
function calcularPrecioBtn () {
    const inputPrice = document.getElementById("InputPrice").value;
    const inputDiscount = document.getElementById("InputDiscount").value;

    let discount = 0;

    if (inputDiscount === "cupon10") {
        discount = 10;
    } else if (inputDiscount === "cupon15") {
        discount = 15;
    } else if (inputDiscount === "cupon20") {
        discount = 20;
    } else {
        alert("cupon no válido");
    }

    const precioConDescuento = calcularPrecioConDescuento(inputPrice,discount);
    const resultPrice = document.getElementById("ResultPrice");

    resultPrice.innerText = `El precio final es ${precioConDescuento}`;
}

Lo realize de esta manera

const coupons = [
    {
        name: '#202187960',
        discount: 20
    },
    {
        name: '#202187877',
        discount: 30
    },
    {
        name: '#202187549',
        discount: 40
    },
    {
        error: 'Coupon not found'
    }
]

function discount(originalPrice, discount) {
    return originalPrice * (100 - discount)/100
}

function calcDiscountCoupon() {
    const originalPrice = parseFloat(document.getElementById('precio').value)
    const coupon = document.getElementById('coupon').value
    const resultDiscount = document.getElementById('result')
    
    coupons.find(newCoupon => {
        if((!coupon)||(!originalPrice)){
            resultDiscount.innerText= newCoupon.error
            
        }else if(newCoupon.name === coupon){
            const newDiscount = (newCoupon.discount)
            const totalDiscount = discount(originalPrice, newDiscount) 
            resultDiscount.innerText= `Total a pagar $${totalDiscount} / descuento del ${newCoupon.discount}%`
        }
    })
}


const cupones = ["oferta", "ofertafinal", "ofertafinalfinal"];

switch (aplicarDescuento) {
case "oferta":
	descuento = 10;
	break;
case "ofertafinal":
	descuento = 20;
	break;
case "ofertafinalfinal":
	descuento = 35;
	break;
};
const coupons = [{promotion: "10%", discount: 10,},
                 {promotion: "15%", discount: 15,},
                 {promotion: "20%", discount: 20,},
                 {promotion: "25%", discount: 25,},
                 {promotion: "40%", discount: 40,}];

function calcularPrecioConDescuento(precio, descuento){
    const porcentajePrecioConDescuento = 100 - descuento;    
    const precioConDescuento = (precio * porcentajePrecioConDescuento)/100;
    return precioConDescuento;
}

function onclickButtonPriceDiscount(){
    const inputPrice = document.getElementById("inputPrice");
    const priceValue = inputPrice.value; 
    
    const inputCoupon = document.getElementById("inputCoupon");
    const couponValue = inputCoupon.value; 

    const isCouponValid = function(coupon){
        return coupon.promotion === couponValue;
    };

    const userCoupon = coupons.find(isCouponValid);

    if(!userCoupon){
        alert("El cupón " + couponValue + "no es válido");
    }else{
        const discount = userCoupon.discount;
        const precioConDescuento = calcularPrecioConDescuento(priceValue, discount);
        const resultPrice = document.getElementById("resultPrice");
        resultPrice.innerText = "El precio con descuento son: $" + precioConDescuento;    
    }

}
<!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 y Descuentos | Curso Pr&aacutectico de JavaScript</title>
</head>
<body>
    <header>
        <h1>Pocentajes y Descuentos</h1>
        <p>Este es el segundo taller del Curso Pr&aacutectico de JavaScript</p>
    </header>
    <section>
        <h2>Cálcula el precio a pagar de tus productos con descuento</h2>
        <form action="">
            <label for="inputPrice">Escribe el precio de tu producto: </label>
            <input id="inputPrice" type="number"/>

            <label for="inputCoupon"> Escribe el Cupón de Descuento: </label>
            <input id="inputCoupon" type="text"/>

            <button type="button" onclick="onclickButtonPriceDiscount()">
                Calcular el precio con descuento
            </button>
            <p id="resultPrice"></p>
        </form>
    </section>

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

Quise crear los cupones como una lista desplegable y tuve que buscar como crearla y como llevarla correctamente a JS pero hasta que lo logre 😄 y ya funciona, en este caso por ejemplo el cupón que se llama Platzi es del 10% por eso el descuento total es 20%.

La forma facil para implementar descuentos con cupones.Explicado.

archivo JS

//creamos un Array de descuento donde agregamos los diferentes cupones como Objetos donde esta su nombre y valor.
// La idea es que el usuario ingrese el nombre del cupon y el programa sepa a cuanto esquivale ese descuento.
const coupon = [
    {nombre: "c10", descuento: 10},
    {nombre: "c20", descuento: 20},
    {nombre: "c50", descuento: 50},
    {nombre: "e100", descuento: 100},
];

// ahora viene lo bueno hacer que el programa verifique si existe el cupon y aplique el descuento respectivo del cupon.
function couponDiscount (cupon) {
    //llamamos nuestro Array y con .some() noshace una validacion de True y False si nuestro cupon escrito por el usuario esta en nuestro array.
    const validadCoupon = coupon.some(function(coupon){
        return coupon.nombre === cupon;
    }); 
    // una vez sabiendo si existe el cupon con .find nos encuentra el cupon y nos crea un nuevo array donde solo esta el cupon que ingreso el usuario algo asi nos arroja ej. {nombre: "c10", descuento: 10}
    if (validadCoupon) {
        const buscarCoupon = coupon.find(function(coupon){
            return coupon.nombre === cupon;
        });
        //con Object(nombreDelArray.NombreDelElemento) nos trae en valor de dicho elemento siguiendo con el ej anterior nos retonaria 10 que seria el descuento que hace el cupon.
        const descuentoCoupon = Object(buscarCoupon.descuento);
        return descuentoCoupon;
    } else {
        //si el cupon no aparece en nuestro array el descuento que haria es de 0
        return 0;
    }
}

function calcularPrecioConDescuento (precio, descuento, cupon) {
    let descuentoTotal = descuento + cupon;
    
    //este if es necesario para que no nos de un numero negativo y el max descuento sea del 100%
    if (descuentoTotal>100){
        descuentoTotal = 100;
    }

    const porcentajePrecioConDescuento = 100 - descuentoTotal;
    const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
    return precioConDescuento;
}

function onClickPriceDiscount () {
    const inputPrice = document.getElementById("inputPrice");
    const price = parseInt ( inputPrice.value );
    const inputDiscount = document.getElementById("inputDiscount");
    const discount = parseInt (inputDiscount.value);
    const inputCoupon = document.getElementById("inputCoupon");
    const cupon = inputCoupon.value;

    //Validamos si el cupon existe y le damos su valor correspondiente.
    const cuponDescuento = couponDiscount (cupon)

    const priceWithDiscount = calcularPrecioConDescuento (price, discount, cuponDescuento);
    
    const resultP = document.getElementById("resultP");
    resultP.innerText = "El precio con descuento es: $" + priceWithDiscount
}
const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
const promo = document.querySelector('#promo');
const btn = document.querySelector('#btn');
const finalPrice = document.querySelector('.finalPrice');

const promoCodes = {
  test: 15,
  test2: 30,
  test3: 50
};

const getDiscount = (e) => {
  e.preventDefault();

  if (promo.value in promoCodes) {
    discount.value = 0;
    discount.disabled = true;
    finalPrice.innerText = getFinalPrice(
      price.value,
      promoCodes[promo.value]
    );
  } else {
    finalPrice.innerText = getFinalPrice(
      parseInt(price.value),
      parseInt(discount.value)
    )
  }
}

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

Hola se me ocurrió hacerlo con un Find, me parece que me salió con pocas lineas. Sin embargo opinen a ver que piensan.

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>
    <main>
        <section>
            <h2>Calcula el precio a pagar de tus productos con descuento</h2>
            <form action="">
                <label for="inputPricce">
                    Escribe el precio de tu producto:
                </label>
                <input id="inputPrice" type="number">
                <label for="inputDiscounnt">
                    Ingresa tu cupon de Descuento:
                </label>
                <input id="inputDiscount" type="text">
                <button type="button" onclick="buttonCalcularPrecioConDescuemto()">Calcular el precio son descuento</button>
                <p id="resultP"></p>
            </form>
        </section>
    </main>
    <script src="./reto-taller-2.js"></script>
</body>
</html> 

JS

function calcularPrecioConDescuento(precio, descuento){
    var porcentajePrecioConDescuento = 100-descuento;
    var precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
    return precioConDescuento;
}
function buttonCalcularPrecioConDescuemto() {
    var inputPrice = document.getElementById("inputPrice");
    var priceValue = inputPrice.value;
    var inputDiscount = document.getElementById("inputDiscount");
    var discountValue = inputDiscount.value;
    var encuentraCupon = cupones.find(function(cupones){
        return cupones.nombre === discountValue
    });
    var resultP = document.getElementById("resultP");
    if(encuentraCupon != undefined){
        var precioConDescuento = calcularPrecioConDescuento(priceValue, encuentraCupon.descuento)
        resultP.innerHTML = "El precio con descuento son: $" + precioConDescuento;
    }else{
        resultP.innerHTML = "Tu cupon no es válido.";
    }
} 

var cupones = [{nombre: "QUINCE", descuento: 15}, {nombre: "VEINTE", descuento:20}, {nombre: "CINCUENTA", descuento: 50}];

En mi primer intento, la lógica la coloco modificando la función de calcular precio. En este caso el cupón puede aplicar aun y cuando el producto ya tiene descuento.

El segundo intento trataré de hacerlo mas limpio usando la misma logica descrita arriba.

Para la funcion onclick y el html solo agregué un tercer parametro que haga referencia al cupón

function calcularPrecioConDescuento(precio, descuento, 
cupon){

    const porcentajePrecioConDescuento = 100 - descuento;
    const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
    let descuentoCupon;
    let precioDescuentoCupon;

    if(cupon === "cupon1"){
        descuentoCupon = (precioConDescuento * 10) / 100
        console.log(descuentoCupon)
        precioDescuentoCupon = precioConDescuento - descuentoCupon
        return precioDescuentoCupon
    } else if (cupon === "cupon2") {
        descuentoCupon = (precioConDescuento * 15) / 100
        precioDescuentoCupon = precioConDescuento - descuentoCupon
        return precioDescuentoCupon
    } else if (cupon === "cupon3") {
        descuentoCupon = (precioConDescuento * 30) / 100
        precioDescuentoCupon = precioConDescuento - descuentoCupon
        return precioDescuentoCupon
    } else {
        alert ("El descuento que se mostrara no incluye cupon, si tiene cupon favor de revisar bien")
        return precioConDescuento;

    }

Uffff… Me llevó un poco de tiempo, pero aquí dejó lo que logré hacer ^^

//Descuentos
const calcularPrecioConDescuento = (precio, descuento) => {
  const porcentajePrecioDescontado = 100 - descuento;
  const precioConDescuento = (precio * porcentajePrecioDescontado) / 100;
  return precioConDescuento;
};

const onClickButtonPriceDiscount = () => {
  const inputPrice = document.getElementById("InputPrice");
  const priceValue = inputPrice.value;

  const inputDiscount = document.getElementById("InputDiscount");
  const discountValue = inputDiscount.value;

  const precioConDescuento = calcularPrecioConDescuento(
    priceValue,
    discountValue
  );
  const resultP = document.getElementById("ResultP");
  resultP.innerText = `El precio con Descuento es $${precioConDescuento}`;
};

//Cupones
const cuponesDisponibles = [
  ["A523", 25],
  ["B213", 30],
  ["C673", 10],
  ["D328", 50],
];

const mostrarListaCupones = () => {
  cuponesDisponibles.forEach((cupon) => {
    console.log(
      `Este es el cupón ${cupon[0]} y el descuento es de ${cupon[1]}%`
    );
  });
};

console.group("Lista de Cupones Disponibles");
mostrarListaCupones();
console.groupEnd();

const compraProducto1 = {
  precioOriginal: 750,
  cupon: "A352",
};

const compraProducto2 = {
  precioOriginal: 532,
  cupon: "B213",
};

const mostrarCompra = (compra) => {
  console.log(
    `Esta compra será originalmente por un total de $${compra.precioOriginal}, pero cuenta con el cupón ${compra.cupon}... ¿Será válido?`
  );
};

console.group("Compras");
mostrarCompra(compraProducto1);
mostrarCompra(compraProducto2);
console.groupEnd();

const esCuponValido = (compra) => {
  const cupon_encontrado = cuponesDisponibles.find((cupon) => {
    return cupon[0] === compra.cupon;
  });
  return cupon_encontrado != null ? true : false;
};

const findDiscount = (compra) => {
  if (esCuponValido(compra)) {
    const cupon_encontrado = cuponesDisponibles.find((cupon) => {
      return cupon[0] === compra.cupon;
    });
    return cupon_encontrado[1];
  } else {
    return null;
  }
};

const calcularPrecioConCupon = (compra) => {
  esCuponValido(compra)
    ? console.log(
        `El precio con Descuento pasa de ser $${
          compra.precioOriginal
        } a ser $${calcularPrecioConDescuento(
          compra.precioOriginal,
          findDiscount(compra)
        )} con un descuento de ${findDiscount(compra)}`
      )
    : console.log(
        `El cupón no es válido, no se aplicarán descuentos... El precio final es de $${compra.precioOriginal}`
      );
};

console.group("Validación de Compras");
calcularPrecioConCupon(compraProducto1);
calcularPrecioConCupon(compraProducto2);
console.groupEnd();

Este es mi código ✌

// Calculate the product's discount
// R = P - (P * D)/100 => price - (price * discount) / 100

// global
const notes = document.getElementById("txtNotes");

// get discount function
const getDiscount = (user_coupon) => {
    let discount;
    const coupons = [
        { name: "platzi", percent: 10 },
        { name: "javascript", percent: 20 },
        { name: "neverstoplearning", percent: 30 } 
    ];

    switch(user_coupon) {
        case coupons[0].name:
            discount = coupons[0].percent;
        break;
        case coupons[1].name:
            discount = coupons[1].percent;
        break;
        case coupons[2].name:
            discount = coupons[2].percent;
        break;
        default:
            discount = 0;
            notes.innerText = "* Coupon not found! Discount not applied.";
        break;
    }

    return discount;
}

// this function calcualtes the final price
const getFinalPrice = (price, user_coupon) => price - (price * getDiscount(user_coupon)) / 100;

// btn function
function calculateDiscount() {
    const price = Number(document.getElementById("inputPrice").value);
    const user_coupon = (document.getElementById("inputCoupon").value).toLowerCase();
    const element = document.getElementById("txtResult");
    
    const finalprice = getFinalPrice(price, user_coupon);

    element.innerText = `Total: $${finalprice}`;
}

Espero puedan leer mi codigo espaghetti 😄
Ahi les dejo mi solucion …

const verificationCupon = function () {
    const cupons = [10, 25, 50];
    const cupon = document.getElementById("cupons");
    const valueCupon = parseInt(cupon.value);
    if (valueCupon === cupons[0]) {
        return cupons[0];
    } else if (valueCupon === cupons[1]) {
        return cupons[1];
    } else if (valueCupon === cupons[2]) {
        return cupons[2];
    }
}

const onClickButtonPriceDiscount = function () {
    const originalPrice = document.getElementById("inputPrice");
    const discount = document.getElementById("inputDiscount");
    const valuePrice = parseInt(originalPrice.value);
    const valueDiscount = parseInt(discount.value);
    const verificationCupons = verificationCupon();
    const discountCupon = valueDiscount + verificationCupons;

    const priceWithDiscount = calculateDisconuntInThePrice(valuePrice, discountCupon);
    const valorDiscount = valueOfDiscount(valuePrice, discountCupon);

    const displayPrice = document.getElementById("displayPrice");
    const price = valuePrice;
    displayPrice.innerText = `$${price}`;

    const displayDiscount = document.getElementById("displayDiscount");
    displayDiscount.innerText = `$${priceWithDiscount}`;

    const displayPercentageDiscount = document.getElementById("displayPercentageDiscount");
    displayPercentageDiscount.innerText = `-${discountCupon}%`
}

Aca va mi solucion,


function calcularPrecioConCupones (precio,cupones) {
    const  precioConCupones =  precio - ((precio * cupones) /100) ;
  return precioConCupones;
  }
  
  function onClickButtonPriceCupon (){
      const inputPrice =  document.getElementById("InputPrice")
      const priceValue = inputPrice.value;
  
      const inputCupon =  document.getElementById("InputCupon")
      const cuponValue = inputCupon.value;
  
      const ResultP = document.getElementById("ResultP");
  

  
  
      switch (cuponValue) {
        
          case 'cupon_barato':
            ResultP.innerText = "El precio con cupon es: $" + calcularPrecioConCupones(priceValue, 15);
            
          break;
  
          case 'cupon_normal':
            ResultP.innerText = "El precio con cupon es: $" + calcularPrecioConCupones(priceValue, 35);
          break;
  
          case 'cupon_caro':
            ResultP.innerText = "El precio con cupon es: $" + calcularPrecioConCupones(priceValue, 35);
          break;
      }

hice lo siguiente:

  1. creé un objeto que contiene 3 tipos de cupones
const cupones = {oro:30, plata:20, bronce:30}
  1. obtuve el valor del tipo de cupón que el usuario escribió
const descuentoInput = document.getElementById("inputDiscount")
const descuento = descuentoInput.value
  1. la constante que se llama descuento es lo que el usuario escribió, entonces ahora verifico que ese cupón exísta en el objeto creando una constante llamada hayCupon
const hayCupon = cupones[descuento]
  1. la constante hayCupon va a tomar el valor del tipo del cupon (10, 20 o 30), entonces ahora lo unico que falta hacer es checar si hayCupon tiene valor o no.
    si tiene valor entonces ejecutas el resto de tu codigo usando el valor ya sea de hayCupon o de cupones[descuento] porque son lo mismo, si no, pues escribes que ese tipo de cupon no existe.
    aqui dejo el codigo completo de la funcion
function onClickButtonPriceDiscount(){
    const cupones = {bronce:10, oro:30, plata:20}
    const descuentoInput = document.getElementById("inputDiscount")
    const descuento = descuentoInput.value //es "string"
    const hayCupon = cupones[descuento]
    const p = document.getElementById("resultPrice")
    if (hayCupon){
        const precioInput = document.getElementById("inputPrice")
        const precio = precioInput.value
        const precioConDescuento = calcularPrecioConDescuento(precio, cupones[descuento])
        p.innerHTML = `el precio con un descuento de ${cupones[descuento]}% es <b>$${precioConDescuento}<b>`
    } else{
        p.innerHTML = `No existe ese cupón`
    }
}

la tercera forma se hace compleja porque le cambia el nombre al array, solo es cuestión de revisar bien y encontrar esos errorcitos. se me hizo como que lo puso a posta para que lo solucionáramos!. (o no). quien sabe.

Mi codigo lo hice de la siguiente forma:

Para el Js


function calcularPrecio(descuento, precio, alerta, monto) {
    if ((precio > 0) && (descuento > 0)){
        var formula = ((precio * (100 - descuento)) / 100);
        monto.innerHTML = formula;
        alerta.innerHTML = "";
    } 
    else {
        alerta.innerHTML = " * El precio no puede ser igual o menor a 0 <br> ** El descuento no puede ser igual o menor a cero";
    }
}

document.getElementById("calcular").addEventListener("click",descuento);

function descuento(){
    var precio = document.getElementById("precioHtml").value;
    var descuento = document.getElementById("descuentoHtml").value;
    var alerta = document.getElementById("alerta");
    var monto = document.getElementById("montoHtml");
    calcularPrecio(descuento, precio, alerta, monto);
}

function cupones() {
    var descuento = document.getElementById("opcionesHtml").value
    var precio = document.getElementById("priceHtml").value;
    var alerta = document.getElementById("alertaCupon");
    var monto = document.getElementById("resultadoCuponesHtml");
    calcularPrecio(descuento, precio, alerta, monto);
}

Para el 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">
    <title>Calculo de precios y descuento en tienda ficticia</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Calculo de precios y descuento en tienda ficticia</h1>
    <section>
        <h2>Precio total a cancelar</h2>
        <p>Coloque el precio y el descuento para calcular el precio a cancelar</p>
        <form action="">
            <label for="">Precio $</label>
            <input type="number" id="precioHtml">
            <label for="">Descuento %</label>
            <input type="number" id="descuentoHtml">
            <input id="calcular" type="button" value="Calcular">
            <!-- <button type="button" onclick="calculos()">Calculos</button> -->
        </form>
        <p id="alerta"></p>
        <p>
            <strong>Precio a pagar: $</strong>
            <span id="montoHtml"></span>
        </p>
    </section>
    <section>
        <h2>Descuento con cupones</h2>
        <p>Calcular el precio a pagar aplicando sus cupones</p>
        <form action="">
            <label for="inputPrecio">Precio $</label>
            <input type="number" id="priceHtml">
            <select id="opcionesHtml" name="Cupones">
                <option value="15">Cupon del 15% de descuento</option> 
                <option value="20">Cupon del 20% de descuento</option> 
                <option value="40">Cupon del 40% de descuento</option> 
                <option value="50">Cupon del 50% de descuento</option> 
             </select>
             <button type="button" onclick="cupones()">Calcular</button>
        </form>
         <p id="alertaCupon"></p>
         <p>
            <strong>Precio a pagar: $</strong>
            <span id="resultadoCuponesHtml"></span>
        </p>
    </section>
    <footer>
        <div id="copyright">Copyright&copy; 2021 - Página creada por Vanessa Pimentel - Todos los derechos reservados</div>
    </footer>
    <script src="codigo.js"></script>
</body>
</html>

Para el Css hice lo siguiente

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #444;
}
h1{
    color: purple;
    text-align: center;
}
#alerta,
#alertaCupon{
    color: red;
    font-size: 0.7em;
}
section{
    border: 1px solid violet;
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
}
h2{
    text-decoration: underline;   
    text-align: center; 
}
#Calcular,
button{
    background-color: violet;
    color: white;
    border: purple;
}
#Calcular:hover,
button:hover{
    background-color: purple;
    color: white;
    border: white;
}
footer{
    text-align: center;
    font-size: 0.7em;
}

Mi solución 😄

HTML

<section>
  <form id="form-descuento-cupon">
    <label for="precio-cupon">Ingresa el precio del producto</label>
    <input
      id="precio-cupon"
      name="precio"
      type="text"
      placeholder="Precio del producto"
    />
    <label for="nombre-cupon">Ingresa el precio del producto</label>
    <input
      id="nombre-cupon"
      name="cupon"
      type="text"
      placeholder="Nombre del cupón"
    />
    <input
      type="button"
      id="descuento-cupon-btn"
      value="Calcular precio con un cupón"
    />
  </form>
  <p id="descuento-cupon-resultado"></p>
</section>

JavaScript

function calcularDescuentoConCupon(precio, cupon = '') {
  const cupones = { TOP: 15, PLATZI: 50, CUPON: 75 };
  if (cupones[cupon]) {
    return generarPrecioConDescuento(precio, cupones[cupon]);
  } else {
    return 0;
  }
}

const descuentoConCuponBtn = document.getElementById('descuento-cupon-btn');
descuentoConCuponBtn.onclick = () => {
  const htmlForm = document.getElementById('form-descuento-cupon');
  const form = new FormData(htmlForm);
  const precio = Number(form.get('precio'));
  const cupon = form.get('cupon').toUpperCase();

  // Resultado en HTML
  const resultado = document.getElementById('descuento-cupon-resultado');
  const precioConCupon = calcularDescuentoConCupon(precio, cupon);
  if (precioConCupon === 0) {
    resultado.innerText = `Este cupon no es valido`;
  } else {
    resultado.innerText = `El precio con el cupon es de $${precioConCupon}`;
  }
};

Comparto mi solución del reto. No dividí el html del js en este caso:

    <header>
      <h1>Precios y descuentos</h1>
      <p>Segundo ejemplo</p>
    </header>
    <section>
      <p>Ingresa el precio y el descuentos</p>
      <form action="">
        <label for="precio"> indicar el precio </label>
        <label for="descuento">al que se aplicara el descuento</label>
        <label for="cupon"> y un cupon que tengas </label>
        <input type="number" id="precio" />
        <input type="number" id="descuento" />
        <input type="text" id="cupon" />
        <button type="button" onclick="aplicarDescuento()">
          Aplicar Descuento
        </button>
      </form>
      <h2>Descuento obtenido</h2>
      <div id="resultado"></div>

      <script>
        const aplicarDescuento = () => {
          let precio = parseInt(document.querySelector("#precio").value);
          let descuento =
            parseInt(document.querySelector("#descuento").value) || 0;

          let cupon = document.querySelector("#cupon").value;

          const cupones = {
            diego: 10,
            mitiymiti: 50,
            estamoslocos: 70,
          };
          let parrafo = document.querySelector("#resultado");

          if (!isNaN(precio)) {
            let descuentoCupon = cupones[cupon] || 0;

            precioConDescuento =
              precio * (1 - descuento / 100) * (1 - descuentoCupon / 100);
            return (parrafo.innerHTML = `<p>
						Para un precio de ${precio} pesos, un descuento de ${descuento}% y un cupon de ${descuentoCupon}% se obtiene un precio final de 
						</p>
						<h2 style="text-align:center"> 
						${precioConDescuento} pesos!!!!</h2>
					`);
          } else {
            alert("Debe indicar un precio.");
          }
        };
      </script>
    </section>

La verdad un reto no tan sencillo como se imaginaba. Para que tenga lógica creo que es importante crear usuarios como objetos y de esta manera validar cuales cumplen con cupones.

let precioFinal;
let valorCupon;

let currentDate = "2021/07/06";
let blackFriday = "2021/10/10";

const bonoNuevo = 10;
const bonoCompraMayor = 15;
const bonoBlackFriday = 20;
let descuentoBonos;
let userData;

const buttonCalculate = document.getElementById("ButtonCalculate");
const usuariosCreados = [
  {
    id: 001,
    fullName: "Raul Villamizar",
    email: "[email protected]",
    creacion: "2018/01/30",
  },
  {
    id: 002,
    fullName: "Andrés Martinez",
    email: "[email protected]",
    creacion: "2021/07/06",
  },
  {
    id: 003,
    fullName: "Rafael Torres",
    email: "[email protected]",
    creacion: "2021/07/05",
  },
];

const calcularDescuento = (precio, descuento) => {
  precioFinal = (precio * (100 - descuento)) / 100;
  return precioFinal;
};

const encontrarDatos = () => {
  const inputUserEmail = document.getElementById("InputUserEmail");
  const emailValue = inputUserEmail.value;
  userData = usuariosCreados.find((elemento) => elemento.email === emailValue);
  console.log(userData);
};

validarCuponNuevo = (userData) => {
  if (userData.creacion === currentDate) {
    let bono1 = bonoNuevo;
    console.log(`Tienes un bono de $${bono1} por ser un nuevo usuario`);
    return bono1;
  } else {
    let bono1 = 0;
    console.log("No tiene bono de nuevo usuario");
    return bono1;
  }
};

const validarCuponCompra = (priceValue) => {
  if (priceValue >= 300) {
    let bono2 = bonoCompraMayor;
    console.log(`Tienes un bono de $${bono2} por compras mayores a $300`);
    return bono2;
  } else {
    let bono2 = 0;
    console.log("No tiene bono de compras superiores a $300");
    return bono2;
  }
};

const validarCuponBlackFriday = () => {
  if (currentDate === blackFriday) {
    let bono3 = bonoBlackFriday;
    console.log(`Tienes un bono de $${bono3} por que hoy es black friday`);
    return bono3;
  } else {
    let bono3 = 0;
    console.log("No tiene bono de black friday");
    return bono3;
  }
};
const calculate = () => {
  const inputPrice = document.getElementById("InputPrice");
  const priceValue = inputPrice.value;

  const inputDiscount = document.getElementById("InputDiscount");
  const discountValue = inputDiscount.value;

  const precioConDescuento = calcularDescuento(priceValue, discountValue);

  encontrarDatos();
  let bono1 = validarCuponNuevo(userData);
  let bono2 = validarCuponCompra(priceValue);
  let bono3 = validarCuponBlackFriday();

  const resultP = document.getElementById("ResultPrice");
  resultP.innerText = `El precio con descuento es de: $${precioConDescuento}, y tus cupones son por un valor de ${
    bono1 + bono2 + bono3
  }, es decir el precio te quedará en $${
    precioConDescuento - bono1 - bono2 - bono3
  }`;
};
buttonCalculate.addEventListener("click", calculate);

Mi código valida si el cupón esta en el array de cupones de descuento de la tienda, usando array.includes(). Espero les sirva y si pueden mejorarlo, bienvenido el feedback.

//JS

const coupons = [
    "JuanDC_es_Batman", //15% off
    "pero_no_le_digas_a_nadie", // 30% off
    "es_un_secreto", // 50% off
];

const calcularPrecioConDescuento = (precio, descuento) => {
    const porcentajePreciConDescuento = 100 - descuento;
    const precioConDescuento = ( precio * porcentajePreciConDescuento) / 100;

    return precioConDescuento;
} 

const calcularPrecioConCupon = (precio, descuento) => { 
    const porcentajePreciConDescuento = 100 - descuento;
    const precioConDescuento = ( precio * porcentajePreciConDescuento) / 100;

    return precioConDescuento;
}

const onClickButtonPriceDiscount = () => { 
    const inputPrecio = document.getElementById("inputPrice");    
    const precioValue = inputPrecio.value;

    const inputDescuento = document.getElementById("inputDiscount");
    const descuentoValue = inputDescuento.value;

    const precioConDescuento = calcularPrecioConDescuento(precioValue, descuentoValue);

    const resultP = document.getElementById('resultPrice');
    resultP.innerHTML = `El precio ya con su descuento es: $${precioConDescuento}`;
    
    const inputCuopons = document.getElementById('inputCuopons');
    const cuponDescuento = inputCuopons.value;

    if (coupons.includes("JuanDC_es_Batman") && cuponDescuento === "JuanDC_es_Batman") { 
        const precioConCupon = calcularPrecioConCupon(precioValue, 15);
        resultP.innerHTML = `El precion con cupon de descuento es ${precioConCupon}`;

    } else if (coupons.includes("pero_no_le_digas_a_nadie") && cuponDescuento === "pero_no_le_digas_a_nadie") {
        const precioConCupon = calcularPrecioConCupon(precioValue, 30);
        resultP.innerHTML = `El precio con cupon de descuento es ${precioConCupon}`;

    } else if (coupons.includes("es_un_secreto") && cuponDescuento === "es_un_secreto") {
        const precioConCupon = calcularPrecioConCupon(precioValue, 50);
        resultP.innerHTML = `El precio con cupon de descuento es ${precioConCupon}`;
    } else { 
        resultP.innerHTML = `Cupon no valido`;
    }
}

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>Porcentajes y descuentos | Curso practico de javaScript</title>
</head>
<body>
    <header>
        <h1>Porcentajes y descuentos</h1>
        <p>Este es el segundo taller del curso practico de javaScript</p>
    </header>

    <section>
        <h2>Calcula el precio a pagar de tus productos con descuento. </h2>
        <form action="">
            <label for="inputPrice">Escribe el precio de tu producto:</label>
            <input id="inputPrice" type="number">

            <label for="inputDiscount">Escribe tu descuento</label>
            <input id="inputDiscount" type="number">

            <label for="inputCuopons">Tienes cupon? Agregalo aqui.</label>
            <input id="inputCuopons" type="text">

            <button type="button" onclick="onClickButtonPriceDiscount()"> <!-- con "onclick" hacemos que el boton llame a una funcion de javaScript -->
                Calcular el precio con descuento.
            </button>
            <h6>*Cupones solo aplican a los articulos sin descuento promocional</h6>

            <p id="resultPrice"></p>
        </form>

    </section>

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

Comparto mi versión del reto:

JavaScript

/*Array con cupones*/
/*Los valores son 10%, 20%, 30% y %40 respectivamente*/
const cupones = ["aprovecha","buenoBonito","compraYa","daleQueSeAcaban"];

/*Función para calcular descuento*/
function calcularPrecioConDescuento(precio, descuento) {
    const porcentajePrecioConDescuento = 100 - descuento;
    const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
    return precioConDescuento;
}

/*Función para interacción con HTML*/
function onClickButtonPriceDiscount(){
    const inputPrice = document.getElementById("inputPrice");
    const priceValue = inputPrice.value;

    const inputDiscount = document.getElementById("inputDiscount");
    let discountValue = inputDiscount.value;

    /*Condicional para aplicar descuento segun cupon*/
    if(discountValue == "aprovecha"){
        discountValue = 10;
        const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
        const resultP = document.getElementById("resultP");
        resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
    }else if(discountValue == "buenoBonito"){
        discountValue = 20;
        const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
        const resultP = document.getElementById("resultP");
        resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
    }else if(discountValue == "compraYa"){
        discountValue = 30;
        const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
        const resultP = document.getElementById("resultP");
        resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
    }else if(discountValue == "daleQueSeAcaban"){
        discountValue = 40;
        const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
        const resultP = document.getElementById("resultP");
        resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
    }else{
        discountValue = "Cupón erroneo";
        resultP.innerText = discountValue;
    }    
}

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>Porcentajes y Descuentos</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <h1>Porcentajes y Descuentos</h1>
    </header>
    <main>
        <section>
            <h2>Cálcula el precio a pagar de tus productos con descuento</h2>
    
            <form>
                <label for="inputPrice">Escribe el precio de tu producto:</label>
                <input id="inputPrice" type="number"/>
                
                <label for="inputDiscount">Escribe el codigo de tu cupón:</label>
                <input id="inputDiscount" type="text"/>
                
                <button type="button" onclick="onClickButtonPriceDiscount()">
                    Calcular el precio con descuento
                </button>

                <p id="resultP"></p>
            </form>
        </section>
    </main>
    <footer>
    </footer>
    <script src="./descuento.js"></script>
</body>
</html>

Esta es mi solucion

let cupones = [
    {cupon: "HSC4GF5AJI9HFY40", value: 15},
    {cupon: "4GHB3J57UKL8EOP1", value: 30}
]

const calcularDescuento = () => {
    let msj = document.getElementById("resultado")
    let precio = document.getElementById("InputPrice").value;
    let cupon = document.getElementById("InputCupon").value + document.getElementById("InputCupon2").value + document.getElementById("InputCupon3").value + document.getElementById("InputCupon4").value;

    let userCoupon = cupones.find(function (coupon) {return coupon.cupon === cupon})
    if(!userCoupon){
       
        msj.innerText = "el cupon no existe"

    } else {

        msj.innerText = ("el precio con descuento es: $" + (precio * (100 - userCoupon.value) / 100))
    }
    
}

Mi solución fue esta

<code> 
const bill = (price, discount = 5) => {
	const result = price - price * (discount / 100);
	return result
}

function onClickButtonPriceDiscount() {
  const p = document.getElementById('result')
  const inputPrice = document.querySelector('[name="precio"]');
  const priceValue = inputPrice.value;
  const inputDiscount = document.querySelector('[name="descuento"]');
  const discountValue = inputDiscount.value.toLowerCase()
	const cupones = [
		{name:"marcian", discount: 15},
		{name: "veranosincalor", discount: 20},
		{name: "preciocovid", discount: 25},
	]

	const isAvaible = cupones.find((cupon) => discountValue === cupon.name);

		if (!isAvaible) {
			const priceWhithDiscount = bill(priceValue);
			p.textContent = `El cupon digitado no es valido, le haremos un descuento del 5%: total a pagar $${priceWhithDiscount}`;
    } else {
      const priceWhithDiscount = bill(priceValue, isAvaible.discount);
      p.textContent = `El cupon digitado es valido para un descuento del ${isAvaible.discount}%: total a pagar $${priceWhithDiscount}`;
    }
}

Mi aporte sobre el reto 2 se aceptan sugerencias 😃
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">
    <title>Cupones</title>
    <link rel="stylesheet" href="./taller-1/style.css">
</head>
<body>
    <header>
        <h1>Implementación de cupones en los productos</h1>
    </header>
    <section>
        <form >
            <label  for="inputProducto">Ingrese el nombre de su producto: </label>
            <input class="input" id="inputProducto" type="text"/>
            <label for="inputPrecio">Ingrese el precio del producto: </label>
            <input class="input" id="inputPrecio" type="number">
            <label  for="inputCupon">Escriba el cupón de descuento para su producto: </label>
            <input class="input" id="inputCupon" type="text"/>
            <button type="button" onclick="cuponDescuento()">Comprar</button>
            <p id="Resultado"></p>
        </form>
    </section>
    <!-- <script src="./taller-2/descuentos.js"></script> -->
    <script src="./taller-2/cupon-reto2.js"></script>
</body>
</html>

JS

function calcularPrecioConDescuento(precio, descuento) {
  const precioDescuento = (precio * descuento) / 100;
  const precioFinal = precio - precioDescuento;

  return precioFinal;
}

const cupones = [
  {
    name: "psvita",
    descuento: 15,
  },
  {
    name: "psp",
    descuento: 20,
  },
  {
    name: "ps2",
    descuento: 25,
  },
  {
    name: "ps3",
    descuento: 30,
  },
  {
    name: "ps4",
    descuento: 35,
  },
  {
    name: "ps5",
    descuento: 40,
  },
];

function cuponDescuento() {
  // Capturamos las variables obtenidas del formulario html
  const entradaPrecio = document.getElementById("inputPrecio");
  const precioValue = entradaPrecio.value;

  const entradaCupon = document.getElementById("inputCupon");
  const cuponesValue = entradaCupon.value;

  const entradaProducto = document.getElementById("inputProducto");
  const productoValue = entradaProducto.value;

  //   Creamos una funcion para validar si es verdad que el cupon ingresado se encuentra registrado en memoria del array objeto y el resultado lo guardamos en una variable
  const validarValorCupon = function (cupones) {
    return cupones.name === cuponesValue;
  };

  const cuponUsuario = cupones.find(validarValorCupon);
//   console.log(cuponUsuario);

  //   Utilizamos la condicional para mandar un alert al usuario en caso que el cupon sea invalido para este producto
  if (!cuponUsuario) {
    alert("El cupón '" + cuponesValue + "' no es valido");
  } else {
    //   Creamos la variable precioConDescuento y la usamos para almacenar los resultados obtenidos en la funcion calcularPrecioConDescuento
    const descuento = cuponUsuario.descuento;
    // console.log(descuento);
    const precioConDescuento = calcularPrecioConDescuento(
      precioValue,
      descuento
    );
    // Con los datos obtenidos lo enviamos al html para su visualización
    const mostrarResultado = document.getElementById("Resultado");
    mostrarResultado.innerText =
      "Para el producto: " +
      productoValue +
      "\n El precio con el cupón de descuento es de: S/" +
      precioConDescuento +
      " nuevos soles";
  }
}

Saludos ✌🏻

function calcularDescuento (){
    const inputValue = document.getElementById("InputValue");
    const price = inputValue.value;
    
    const inputDiscount = document.getElementById("InputDiscount");
    const discount = inputDiscount.value;
    if (discount === "Cupon1" || discount === "Cupon2" || discount === "Cupon3") {    
        if (discount === "Cupon1"){
            const resultado = valorDescuento (price, 5);
            const resultP = document.getElementById("footer");
            resultP.innerText = "el precio final es $"+resultado
        }
        if (discount === "Cupon2"){
            const resultado = valorDescuento (price, 10);
            const resultP = document.getElementById("footer");
            resultP.innerText = "el precio final es $"+resultado
        }
        if (discount === "Cupon3"){
            const resultado = valorDescuento (price, 15);
            const resultP = document.getElementById("footer");
            resultP.innerText = "el precio final es $"+resultado
        }
    }
    else {
        alert("intoduce un cupon valido");
    }
    
}

function valorDescuento (precio, descuento) {
    const valorDescuento = precio * (1-(descuento/100))
    return valorDescuento;
}


Este fue el codigo que me funciono. Tuve que poner la validacion (!cuponesvalidos.includes(cupon) al final para que se ejecutaran las opciones correctas.

const cuponesvalidos = [
  2020, 2021, 2022
]
function Descuento(P, D){
  return (P * (100 - D)) / 100;
}

function calcularDescuento(){
  const inputPrecio = document.getElementById("precio");
  const precio = inputPrecio.value;

  const inputCupon = document.getElementById("cupon");
  const cupon = inputCupon.value;

  const resultado = document.getElementById("ResultP");

    if (cupon == 2020){
    descuento = 15;
    const total = Descuento(precio, descuento);
    resultado.innerText = "Su total a pagar seria " + total + "$";
  } else if (cupon == 2021){
    descuento = 20;
    const total = Descuento(precio, descuento);
    resultado.innerText = "Su total a pagar seria " + total + "$";
  } else if (cupon == 2022){
    descuento = 50;
    const total = Descuento(precio, descuento);
    resultado.innerText = "Su total a pagar seria " + total + "$";
  } else if (cupon == "" || precio == ""){
    resultado.innerText = "Ingrese un cupon y un precio.";
  } else if (!cuponesvalidos.includes(cupon)){
    resultado.innerText = "El cupon '" + cupon + "' no es valido.";
  } 
}

HTML por si lo necesitan:

<section class="discountscontain">

    <form action="">
    
      <div class="inputs precio">
        <label for="">Ingrese el precio de su producto</label>
        <input type="number" id="precio">
      </div>
    
      <div class="inputs precio">
        <label for="cupon">Ingrese el codigo de su cupon de Descuento</label>
        <input type="number" id="cupon">
      </div>

      <button type="button" onclick="calcularDescuento()">Calcular Descuento</button>
    
    </form>

    <p id="ResultP"></p>

  </section>

En mi código del taller 2 lo que hice fue in if que valida si el cupón es correcto. Si el cupón es correcto se va agregar un 10% extra.
Repositorio
Página

Así quedó mi solución al reto usando el método find() del array:

const cupones = [
    {
        nombre: "cupon15",
        valor: 15
    },
    {
        nombre: "cupon20",
        valor: 20
    },
    {
        nombre: "cupon25",
        valor: 25
    },
];

var cuponUsuario;
var cuponValido;

const esUnCuponValido = function(cupon){
    return cupon.nombre === cuponUsuario;
}

function calcularPrecioConDescuento(precioOriginal, factorPrecio){
    return precioTotal = Math.round((precioOriginal * factorPrecio) * 100)/100;
}

function calcularFactor(){
    //Verificar Cupon
    cuponValido = cupones.find(esUnCuponValido)
    if (!cupones.find(esUnCuponValido)){ return 1
    }else return (100 - cuponValido.valor)/100;
}

function calcPrecioConDescuento(){
    let precio = document.getElementById("precioOriginal").value;
    cuponUsuario = document.getElementById("cuponDescuento").value;
    let factorPrecio = calcularFactor(cuponUsuario);
    const precioConDescuento = calcularPrecioConDescuento(precio, factorPrecio);
    if (factorPrecio === 1){
        document.getElementById("resultCupon").innerText =  `El descuento aplicado será de 0%`
    }else{
        document.getElementById("resultCupon").innerText =  `El descuento aplicado será de ${cuponValido.valor}%`
    }
    document.getElementById("precioConDescuento").innerText = `El precio con descuento es $${precioConDescuento}`;
}
function calcularPrecioConDescuento(precio,cupon){
    var descuento=0;
    if(cupon=='Platzi15'){
        descuento=15;
        console.log("el cupon es de:" + descuento+"% de descuento");
    }else if(cupon=='Platzi25'){
        descuento=25;
        console.log("el cupon es de:" + descuento+"% de descuento");
    }else if(cupon=='Platzi30'){
        descuento=30;
        console.log("el cupon es de:" + descuento+"% de descuento");
    }else{
        alert("Ese descuento NO existe");
    }
    const porcentajePrecioConDescuento=100-descuento;
    const precioConDescuento=(precio*porcentajePrecioConDescuento)/100;    
    return precioConDescuento;
}

function onClickButtonPriceDiscunt(){
    const inputPrice=document.getElementById("InputPrice");

    const priceValue=inputPrice.value;

    const inputCupon=document.getElementById("InputCupon");

    const cuponValue=inputCupon.value;
   
   const precioConDescuento=calcularPrecioConDescuento(priceValue,cuponValue);
   
   const resultP=document.getElementById("ResultP");
   resultP.innerText="El precio con cupón aplicado es de: $"+ precioConDescuento
}
//cupones con porcentaje de descuento
const cupones = [{
    nombre: "batman",
    porcentaje: 10,
},
{
    nombre: "superman",
    porcentaje: 30,
},
{
    nombre: "flash",
    porcentaje: 25,
},
];
//llamar cupones
function cupon(){ 
var valor = document.getElementById("cupon").value; //toma el valor del input 
if(valor == "batman" || valor == "superman" || valor == "flash" ){ //se establese las condicidiones que son los nombres de los cupones
function cupo(nombreCupon){
    return nombreCupon.nombre == valor;
}
let porcentaje= cupones.find(cupo).porcentaje;
let codigoCupon = cupones.find(cupo).nombre;
let precio = document.getElementById("precio").value;
let Final= ((100*(precio-porcentaje))/100);
let comprobacion= document.getElementById("comprobacion").innerHTML=`Cupon es aceptado, codigo ${codigoCupon} por ${porcentaje}%`
let precioF= document.getElementById("precioFinal").innerHTML=`Su compra tendra un valo de ${Final} <br>`

console.log(porcentaje*2)
console.log(codigoCupon)
}
else if(valor==0){
    let comprobacion= document.getElementById("comprobacion").innerHTML=`inserte cupon`
}
else{
    console.log("cumpon no valido")
    
    let comprobacion= document.getElementById("comprobacion").innerHTML=`cupon no valido`
}

}

Reto 2: Funciones más inteligentes

Aquí está la primera solución que se me ocurrió para el reto, voy a estilizarlo y completarlo mejor y luego lo subo!!

function calcPriceWithDiscount(price, coupon) {
    const percentageCode = discountCoupon(coupon)
    const percentageWithDiscount = 100 - percentageCode
    const priceWithDiscount = (price * percentageWithDiscount) / 100

    return priceWithDiscount
}


function priceDiscountBtn () 
{
    const PriceInput = document.getElementById('PriceInput')
    const priceValue = PriceInput.value
    
    const CouponInput = document.getElementById('CouponInput')
    const couponValue = CouponInput.value

    const priceWithDiscount = calcPriceWithDiscount(priceValue, couponValue)

    const PriceOutput = document.getElementById('PriceOutput')
    PriceOutput.innerText = `El precio con descuento es:  $${priceWithDiscount}`
}

function discountCoupon (code) {
    let promotionDiscount 

    switch (code) {
        case 'promocion-15':
            return promotionDiscount = 15
            break;
        case 'promocion-30':
            return promotionDiscount = 30
            break;
        case 'promocion-50':
            return promotionDiscount = 50
            break;
    
        default: 
            return promotionDiscount = 0
            break;
    }
}

Me tomó un par de días, pero lo logré sin revisar la solución.
Este es mi JS y en mi GitHub hice un bonito README file con el paso a paso, click aquí.

// Nuestros clientes están muy felices de poder calcular el precio final de sus productos después del descuento, pero la tienda tiene una nueva solicitud para nosotros: implementar descuentos con cupones.
let selection = document.getElementById('selectCoupon');
let result = document.querySelector('#result');

selection.addEventListener('input', (e) => {
  const price = parseInt(document.getElementById('inputPrice').value);
  let coupon = e.target.value;
  let discount = getDiscount(coupon);
  let finalPrice = calcFinalPrice(price, discount);
  renderNewPrice(finalPrice);
});

function getDiscount(coupon) {
  let result = 0;
  switch(coupon) {
    case 'c01':
      result += 0.9;
      break;
    case 'c02':
      result += 0.85;
      break;
    case 'c03':
      result += 0.75;
      break;
    default:
      result += 1;
  }
  return result;
}

function calcFinalPrice(price, discount) {
  let result = price * discount;
  return result;
}

function renderNewPrice(finalPrice) {
  result.innerHTML = `El precio a pagar es $${finalPrice.toFixed(2)}`
}

Hola les dejo el repositorio donde van a encontrar mi forma de utilizar el cupón. Estaba intentando que para darte el cupón te pida tu correo electrónico, lo valide con regex (hasta ahí llegué) pero luego tuve problemas para validar que este puesto el checkbox para aceptar las políticas de privacidad y otro problema que tuve es que lógicamente los cupones serían
cosas que se generarían en el backend si fuese un proyecto real. Por lo que en ese caso la validez del cupón persistiría por más que la pagina se refresque, en este caso no es así y cada que apreto el botón se refresca la página y se pierde el cupón generado.
Les dejo el repo, ignoren los estilos que están todos desordenados jeje https://github.com/tomielizondo/platzi_cursoPracticoJavascript

hola chicos esto me salio

function isCuponValido(cupon,descuento){
    return (cupon.name === descuento)
}

function calcularDescuentoPorCupones(){
    const inputPrecio = document.getElementById("inputPrecio");
    const precio = inputPrecio.value;
    const inputDescuento = document.getElementById("inputDescuento");
    const descuento = inputDescuento.value;
   
    const cupon = listDeCupones.find((cupon)=> isCuponValido(cupon,descuento));

    if(cupon){
        let descuenTotal = cupon.descuento;
        const precioTotal = calcularPrecioConDescuento(precio,descuenTotal);
        const inpuPrecio = document.getElementById("resultPrecio");
        inpuPrecio.innerText=`el precio total es ${precioTotal}`;
    }
    else
    {
        alert("no existe el cupon " + descuento)
    } 
}

Dejo mi solución al reto. Decidí usar condicionales if. Además, si se introduce el nombre de un cupón no válido, se retorna un descuento de 0 y una alerta avisando que dicho cupón no existe.

//Cupones con descuento

//Funcion del cupon

function descuentoDelCupon(cuponValue) {
    if (cuponValue === "bronce") {
        return 20;
    } else if (cuponValue === "plata") {
        return 30;
    } else if (cuponValue === "oro") {
        return 40;
    } else {
        alert("Cupón no válido, el descuento es de 0")
        return 0;
    }
}

//Funcion precio con descuento.

function calcularPrecioConDescuento(precio, descuento) {
    const porcentajePrecioDescuento = 100 - descuento;
    const precioConDescuento = precio*porcentajePrecioDescuento/100;
    return precioConDescuento;
}

//Unión con HTML

function priceDiscount() {
    const inputPrice = document.getElementById("InputPrice");
    const priceValue = inputPrice.value;
    const inputCupon = document.getElementById("InputCupon");
    const cuponValue = inputCupon.value;

    const discountValue = descuentoDelCupon(cuponValue)

    const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);

    const finalPriceMessage = document.getElementById("finalPriceMessage");
    finalPriceMessage.innerText = "El precio con descuento es: $" + precioConDescuento;

}

Como andan chicos? Primero queria decir que me viene gustando muchisimo el curso y el profesor es muy copado jajajaj.
Me parece que el switch es bastante odioso de usar asique anduve pensando y se me ocurrió esta idea para no tener que usar switch, me cuentan que les parece y espero algun feedback, gracias 😛

Así quedo mi solución, le agregue Css para que tenga un mayor parecido a una tienda en línea, pero todavía no es Responsive y no esta subida en web, para el final del curso subiré todos los talleres a la web.

Reto cumplido

codigo:

function calcularPrecioConDescuento(precio, descuento) {
    const descuentoPorcentaje = descuento / 100;
    return precioDescuento = precio - (precio * descuentoPorcentaje);
}
function calcularDescuentoCupon(cupon) {

    const cupones = {
        cuponRegalo: ["cuponRegalo", 10],
        cuponCompraAnterior: ["cuponCompraAnterior", 20],
        cuponNavideno: ["cuponNavideno", 35]
    }

    if (cupones.cuponRegalo[0] === cupon) {
        return calcularPrecioConDescuento(400, cupones.cuponRegalo[1]);
    } else if (cupones.cuponCompraAnterior[0] === cupon) {
        return calcularPrecioConDescuento(400, cupones.cuponCompraAnterior[1]);
    } else {
        return calcularPrecioConDescuento(400, cupones.cuponNavideno[1]);
    }
}

function ImprimirPrecioConDescuentoCupon() {
    const input = document.getElementById("cupones");

    const cupon = input.value;

    const descuento = calcularDescuentoCupon(cupon);

    document.getElementById("resultadoCupon").innerHTML = descuento
}

Queda mejor como un objeto que funge como Hash.

const discounts = {
    'Cupon-1':15,
    'Cupon-2':25,
    'Cupon-3':35,
}

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

// Normal Way
const showDiscount = () =>{
    const price = document.querySelector('#input-price').value;
    const discount = document.querySelector('#input-discount').value;
    const netPrice = calcDiscount(price, discount);

    document.querySelector('#result-price').innerText = `El precio total es de: ${netPrice}`;
}

// Using Objects
const showDiscountTwo = () =>{
    const price = document.querySelector('#input-price').value;
    const discount = document.querySelector('#input-discount').value;
    
    const netPrice = discounts[discount] ? calcDiscount(price, discounts[discount]) : alert('Cupon no válido');

    document.querySelector('#result-price').innerText = `El precio total es de: ${netPrice}`;
}


document.querySelector('#calc-btn').addEventListener('click', showDiscountTwo);

JavaScript Code

function calculatePriceWithDiscount(originalPrice, percentDiscount) {
  const percentPriceWithDiscount = 100 - percentDiscount;

  const priceWithDiscount = (originalPrice * percentPriceWithDiscount) / 100;

  return priceWithDiscount;
}

//Array of objects with name and discount value of the coupons
const coupons = [
  { name: "Fonta_Gurt", discount: 15 },
  { name: "Alpine", discount: 30 },
  { name: "Parmalat", discount: 25 },
];

function priceWithDiscount() {
  const inputPrice = document.getElementById("InputPrice");
  const priceValue = inputPrice.value;

  const inputCoupon = document.getElementById("InputCoupon");
  const couponValue = inputCoupon.value;

  //Validate the user's coupon against the array
  const isCouponValid = function (coupon) {
    return coupon.name === couponValue;
  };

  //Variable with name and discount value
  const userCoupon = coupons.find(isCouponValid);

  if (!userCoupon) {
    alert("The coupon " + couponValue + " is invalid");
  } else {
    const discount = userCoupon.discount;
    const priceMinusDiscount = calculatePriceWithDiscount(priceValue, discount);
    const resultPrice = document.getElementById("ResultPrice");
    //Write in HTML with innerText
    resultPrice.innerText = "The price with discount is = $" + priceMinusDiscount;
  }
}


Se que el reto era con cupones en como clave, sinceramente yo lo hubiera resuelto con un if o switch como en el primer caso como lo muestra el profesor. Preferí hacerlo a manera de que pudieras ver los descuentos que había, se me hizo un poco mas bonito

Usandon un objeto como hash table:

const cupones = {
    Basico: 0.1,
    standar: 0.35,
    wow: 0.5,
    almostFree: 0.8
}


const calcularDescuento = () => {
    const precio = document.querySelector("#price").value;
    const cupon = document.querySelector("#cupon").value;
    const descuento = cupones[cupon] || 0;

    const calculoDescuento = precio - (precio*(descuento));

    const nuevoPrecio = document.querySelector("#nuevoPrecio");
    nuevoPrecio.textContent = "";
    nuevoPrecio.append(calculoDescuento);
}

Que tal buen dia campeon, Excelente reto. un par de dudas, pero se resolvieron. UI
Repositorio https://github.com/brunomaldonado/JavaScript-Workshop link https://brunomaldonado.github.io/JavaScript-Workshop/discount/index.html

UI
"Mobile, Tablet and Desktop"

<div class="background">
        <header>
            <h1>Porcentajes y Descuentos</h1>
        </header>
        <section>
            <form>
                <label for="precio">Ingresar Precio</label>
                <input type="number" id="precio" />
                <div>
                    <p>Seleccionar Cupón</p>
                    <select id="descuento">
                        <option value="10">10%</option>
                        <option value="15">15%</option>
                        <option value="20">20%</option>
                    </select>
                </div>
                <button type="button" onclick="calcularDescuento()">Calcular</button>
                <input type="number" id="resultado"/>
            </form>
        </section>
    </div> 
function descontar(precio, descuento) {
    return ((precio*(100-descuento))/100);
}

function calcularDescuento() {
    const precio = document.getElementById("precio");
    const valuePrecio = precio.value;
    const descuento = document.getElementById("descuento");
    const descuentoValue = descuento.value;
    const resultado = descontar(valuePrecio, descuentoValue);
    document.getElementById("resultado").value = resultado;
    return resultado;
}

Este es mi ejemplo con el método de array.includes:

function descuentoCalculado (p,d,c) {
    const precioFinal = ((p*(100-d-c))/100);
    alert(`Por un precio de ${p}, con un descuento de ${d}% y un cupon de ${c}%, el precio final es ${precioFinal}`)
}
const cupones = ["cupon1", "cupon2", "cupon3", ""]
function calcularDescuento() {
    const precioInicial = (document.getElementById("precioInicial"));
    const descuento1 = (document.getElementById("descuento"));
    const cupon = (document.getElementById("cupon"));
    const precioValue = parseFloat(precioInicial.value);
    const descuentoValue = parseFloat(descuento1.value);
    const cuponValue = cupon.value;
    let descuento;
    if (!cupones.includes(cuponValue)) {
        alert("Cupón inválido");
    } else if (cuponValue == "cupon1") {
        descuento = 10;
    } else if (cuponValue == "cupon2") {
        descuento = 20;
    } else if (cuponValue == "cupon3") {
        descuento = 30;
    } else if (cuponValue == "") {
        descuento = 0;
    }
    const prueba = descuentoCalculado(precioValue, descuentoValue, descuento)
    return prueba
}

Así hice mi función con switch, voy a probar las otras soluciones también (:

function descuentoCalculado (p,d,c) {
    const precioFinal = ((p*(100-d-c))/100);
    alert(`Por un precio de ${p}, con un descuento de ${d}% y un cupon de ${c}%, el precio final es ${precioFinal}`)
}
const cupones = ["cupon1", "cupon2", "cupon3"]
function calcularDescuento() {
    const precioInicial = (document.getElementById("precioInicial"));
    const descuento1 = (document.getElementById("descuento"));
    const cupon = (document.getElementById("cupon"));
    const precioValue = parseFloat(precioInicial.value);
    const descuentoValue = parseFloat(descuento1.value);
    const cuponValue = cupon.value;
    let descuento;
    switch(cuponValue) {
        case "cupon1":
            descuento = 10;
        break;
        case "cupon2":
            descuento = 20;
        break;
        case "cupon3":
            descuento = 30;
        break;
    }
    const prueba = descuentoCalculado(precioValue, descuentoValue, descuento)
    return prueba
}

challenge.

<!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>reto cupones</title>
</head>
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<body>
    <main>
        <label>
            <span>Sectiona el tipo de Cupon:</span>
            <select name="cupones" id="cupones">
                <option value="1">JuanDC es Batman</option>
                <option value="2">Pero no le digas a nadie</option>
                <option value="3">Es un secreto</option>
            </select>
            <button onclick="aplicarCupon()">calcular</button>
            <p id="salida"></p>
        </label>
    </main>
    <script>
        // const de la salida del valores
        const salida = document.getElementById("salida")
        // function event
        const aplicarCupon = () => {
            const cupon = document.getElementById("cupones")
            let cuponElegido = 0
            switch (parseInt(cupon.value)) {
                case 1:
                    cuponElegido = 15
                break;
                case 2:
                    cuponElegido = 30
                break;
                case 3:
                    cuponElegido = 25
                break;
                default:
            }
            salida.innerText = `El precio con descuentod  es del ${precioConDesc(cuponElegido, precio)}$`
        }
    </script>
</body>
</html>

Yo creo que la explicacion podria ser mucho mejor mas facil de entender no es claro.

Hice una selección, que cambia automáticamente el precio original al precio con descuento según el descuento que se elija.
Aqui pueden probarlo:
https://excercies-manipulating-html-with-js.jocad7.repl.co

Aqui esta mi aporte al reto use la funcion keyUp, conforme avance el proyecto agregare los estilos corespondientes

function onClickCalcularDescuento(){
    const price = parseInt(document.getElementById("InputPrice").value);
    const discount = document.getElementById("InputCoupon").value;


   if(discount === "batman"){
       const precioConDescuento = calcularPrecioConDescuento(price, 30);
       const resultP = document.getElementById("ResultP");
       resultP.innerText = "El precio con descuento del 30% es USD " + precioConDescuento;
        
    }else if(discount === "joker"){
       const precioConDescuento = calcularPrecioConDescuento(price, 20);
       const resultP = document.getElementById("ResultP");
       resultP.innerText = "El precio con descuento del 20% es USD " + precioConDescuento;

    }else if(discount === "penguin"){
        const precioConDescuento = calcularPrecioConDescuento(price, 10);
        const resultP = document.getElementById("ResultP");
        resultP.innerText = "El precio con descuento del 10% es USD " + precioConDescuento;
        
    }else{
        alert("Sorry, coupon is not valid")
    }

}

function calcularPrecioConDescuento(precio, descuento){
    const porcentajePrecioConDescuento = 100 - descuento;
    const precioConDescuento = precio * (porcentajePrecioConDescuento/100)
 
     return precioConDescuento;
 }
 

Les comparto otra solución utilizando un objeto teniendo por clave el nombre del cupón y como valor el descuento. Para no hacer una validación explícita creé un descuento por defecto igual a 0.

function calculaPrecioConDescuentoPorCupon() {
 const price = document.getElementById('InputPrice').value;
 const coupon = document.getElementById('InputCoupon').value;
 const result = document.getElementById('resultPrice');

 const  discount = descuentoPorCuponUtilizandoObjetoYDefaultValue(coupon); 

 result.innerText = `El total a pagar con un cupón de ${discount}% de descuento 
                     es : $${precioAPagar(price, discount)}`;
}

function descuentoPorCuponUtilizandoObjetoYDefaultValue(couponValue) {
 const DISCOUNT_COUPONS = {
   'JuanDC_es_Batman': 15,
   'pero_no_le_digas_a_nadie': 30,
   'es_un_secreto': 25
 }
 
 const DEFAULT_DISCOUNT = 0;
 
 return DISCOUNT_COUPONS[couponValue] || DEFAULT_DISCOUNT;

} 

const btn= document.getElementById("btnCalculo");

btn.addEventListener("click", ()=>{
    const precioSinDescuento=document.getElementById("inputPrecio");
    const descuentoDelPrecio=document.getElementById("inputDescuento");
    const resultado=document.getElementById("precio");
    //obtengo directamente el nombre del cupon en la variable cupones
    const cupones=document.getElementById("cupones").value
    // creo un array con varios cupones con su valor correspondiente
    const allCupones=[
        {nombre:"Cliente frecuente", valor:10},
        {nombre:"Cliente nuevo", valor:15},
        {nombre:"Compra numero 100", valor:20}
    ];
    // creo un recorrido de array para encontar el cupon correspondente y obtener el valor del despuento de ese cupon
    const buscaCupones=allCupones.find(function(cupon){
        return cupon.nombre===cupones});
        
    const descuentoCupon=buscaCupones.valor
    console.log(typeof descuentoCupon)
    // Le asigno a una variable el valor del descuento
    const descuentosTotales=Number(descuentoDelPrecio.value)+descuentoCupon;
    const precioConDescuento=descuento(Number(precioSinDescuento.value),descuentosTotales);
    
    
    //Resultado

        resultado.innerHTML=(`El precio del producto es  de <br>$${precioSinDescuento.value}<br> descuento base <br>${descuentoDelPrecio.value}% <br> descuento por cupon tipo ${cupones}<br> ${descuentoCupon}%<br> Precio a pagar:<br> $${precioConDescuento}`)
});

function descuento(precio,descuento){
    return  (precio*(100-descuento))/100;
}

Yo quise hacerlo un poco mas divertido, por lo cual, cree una funcion randomizadora que utiliza cualquiera de los 3 disponibles, puede tocarte un descuento del 2,5,30,45,55 o 99%
¡Depende de tu suerte!
Adjunto codigo:

<    const cupones = [
        "Gatito",
        "SuperGatito",
        "MegaGatito",
    ]
    //RANDOMIZADOR DE DESCUENTOS
    const randomThis =[5,30,5,5,45,2,5,22,5,5,55,5,5,99,5,5,5,5]
    function randomDiscount(randomThis){
        return [...randomThis]
        .sort(() => Math.random() > 0.5 ? 1 : -1)
        .slice(1,2)
    }

    let inputCupon = document.getElementById("InputCupon")
    
    if (inputCupon.value === cupones[0] || inputCupon.value === cupones[1] || inputCupon.value === cupones[2]) {
        const precioConCupon= calcularPrecioConDescuento(priceValue,randomDiscount(randomThis));
        resultP.textContent = "El precio con cupon de descuento incluido es de: $" + precioConCupon;
    }> 

Entiendo qué el reto reemplaza la introducción numérica del descuento por parte del cliente, qué la aplicación de descuento es por medio de cupón, uso de la propuesta solución 3.(fijarse en la construcción del objeto, tiene “,” de más
el metodo find() devuelve la coincidencia del primer elemento dentro del array con la prueba proporcionada

Si no han entendido al 100% recomiendo volver a tomar la clase 19 y 20 del curso básico de JavaScript, a mi me ayudo mucho a entenderlo de mejor forma en las estructuras y su lógica

Cree un objeto con el nombre del cupón como propiedad y descuento como valor.

var cupones = { treinta: 30, navidadya: 50, top40: 40, JuanDC_es_Batman: 15 }; 

Luego cree la función

function calcularDescuentoCupon() {
  let descuento = 0;
  const inputCupon = document.getElementById("input-cupon");
  const cuponValue = inputCupon.value;
  for (var c in cupones) {
    if (cuponValue === c) {
      descuento = cupones[c];
    }
  }
  return descuento;
}

Después lo llame en la función que trabajamos en el taller

function onClickButtonPriceDiscount() {
  const inputPrice = document.getElementById("input-price");
  const priceValue = inputPrice.value;
  const inputDiscount = document.getElementById("input-discount");
  const discountValue = inputDiscount.value;

  const precioConDescuento = calcularPrecioConDescuento(
    priceValue,
    discountValue
  );
  const precioConCupon = calcularPrecioConDescuento(
    precioConDescuento,
    calcularDescuentoCupon()
  );
  const resultP = document.getElementById("ResultP");
  resultP.innerText = "El precio con descuento son: $" + precioConCupon;
}

Finalmente en el HTML trabajado en el taller solo añadí un label y un input

<form action="" class="form">
          <div>
            <label for="input-price">Escribe el precio de tu producto:</label>
            <input id="input-price" type="number" />
            <label for="input-discount"
              >Escribe el descuento de tu producto:</label
            >
            <input id="input-discount" type="number" />
            <label for="input-cupon">Cupon de descuento:</label>
            <input id="input-cupon" type="text" />
            <button type="button" onclick="onClickButtonPriceDiscount()">
              Calcular el precio con descuento
            </button>
            <p id="ResultP"></p>
          </div>
        </form>

Esta fue mi logica aplicada acepto critica al respecto para mejorar 😃

const cupones = [
  { codigo: "cupon1", descuento: 15 },
  { codigo: "cupon2", descuento: 20 },
  { codigo: "cupon3", descuento: 25 },
];

function calcularPrecioConCupon() {
  const inputPrice = Number(document.getElementById("InputPrice").value);
  const inputCupon = document.getElementById("InputCupon").value;

  let resultado;

  if ((resultado = cupones.find((cupon) => cupon.codigo === inputCupon))) {
    const descuento = resultado.descuento;

    console.log(resultado, descuento);

    const precioConCupon = (inputPrice * (100 - descuento)) / 100;
    const result = document.getElementById("Result");

    result.innerText = "El valor a pagar es: $" + precioConCupon;
  } else {
    const result = document.getElementById("Result");
    result.innerText = "El cupon es inválido";
  }
}

me demore pero ya esta el codigo 😃
//funciones para hacerlo con variables
function descontar(precio, descuento){
const precio_a_pagar=(precio*(100-descuento))/100;
return precio_a_pagar;

}

//cupones disponibles
var cupones=[
{codigo:1233,desc:15},{codigo:3244,desc:20},{codigo:2432,desc:30}
]

// funcion eliminar cupones
function eliminar(cupon){
cupon.shift();
}
//funcion encontrar cupon
function encontrar(lista_cupon,code){
const encontrado=lista_cupon.find(function(lista_cupon){
return lista_cupon.codigo === code;
});
return encontrado.desc;
}
//dar cupon
function dar_cupon(){
const bandeja_cupon=document.getElementById(“tu_cupon”);
bandeja_cupon.innerText="tu descuento es secreto, ingresalo para canjearlo, ojo nunca de daremos un descuento menor a 15% aqui tu codigo: "+cupones[0].codigo;
}
//usar cupon
function usar_cupon(){
const cupon_d=document.getElementById(“codigo_cupon”);
const dato_cupon=Number(cupon_d.value);
const precio_producto=document.getElementById(“precio_compra”);
const costo=Number(precio_producto.value);
const descuento=encontrar(cupones,dato_cupon);
const su_descuento=descontar(costo,descuento);
const total_pagar=document.getElementById(“tu_desc”);
total_pagar.innerText=“este es el valor a pagar: “+su_descuento+” dolares”;
eliminar(cupones);
}


const cupones =[
    'uno',
    'dos',
    'tres',
    'cuatro',

];



function descuentoDelProducto(precio,descuento){

    const porcentajePrecioConDescuento=100-descuento;
const precioCondescuento=(precio*porcentajePrecioConDescuento)/100;
return precioCondescuento;
    
}

function calcularDescuentoTotal() {

    const input= document.getElementById("precioSinDescuento");
        const  value=parseInt(input.value);
    
        const input2= document.getElementById("cupones");
        const vlaueD = input2.value;

        let descuentos;

        switch(vlaueD){
                case cupones[0]:
                    descuentos = 15;
                    break;
                    case cupones[1]:
                    descuentos = 25;
                    break;
                    case cupones[2]:
                    descuentos = 30;
                    break;
                    case cupones[3]:
                    descuentos = 35;
                    break;


aqui mi aporte lo hice con validacion de casos porque encontre que es mas legible para mi pero quiero probar los otros metodos se que afuturo me serviran

        }
    
        descuentoFinal = descuentoDelProducto(value,descuentos);
        const parrafo = document.getElementById("resultP")
        parrafo.innerText="su precio total es : "+ descuentoFinal;

Mi Código del taller:

  1. code JS
  2. Code HTML