Método find vs. método filter

💡 Recomendación: mira esta clase al menos 3 veces.

• 1️⃣ La primera para disfrutar viendo mi sufrimiento.
• 2️⃣ La segunda para hacer lo mismo que yo sabiendo desde antes qué errores van a salir y por qué… pa no andar con tanto estrés
• 3️⃣ Y una tercera vez para tratar de romper todo, hacer experimentos locos y aprender de verdad

NO TE RINDAS si los métodos de los arrays te parecen difíciles. Todas y todos pasamos por lo mismo. Es un cambio de pensamiento muy fuerte. Duele al principio. Pero luego se pone más fácil. Y los encontraremos por todas partes en el futuro así que es indispensable invertir un buen tiempo en tratar de dominarlos.

Métodos de los Arrays.
![](

Pienso que cabe mencionar dos puntos importantes aquí:
.

1. El método filter itera por todos los elementos de un arreglo, mientras que find regresa el primer elemento que cumpla con la condición. Por lo tanto, si sólo se está buscando un elemento, el método más óptimo es find, ya que, apenas encuentre al elemento, dejará de iterar por los demás.
2. Aprender manipulación de arreglos me ha ayudado mucho en mi carrera como desarrollador. Te hace más profesional y con conocimientos sobre el tema. Les recomiendo mucho que tomen el curso de Manipulación de Arrays en JavaScript y comprendan y practiquen cada método.

.

Igualmente, si tienen duda de algún tema de Desarrollo Web, estaré encantado de apoyarles. 💚

10 minutos en ésta clase fueron 7 horas en la tierra!!! 🤯

lej comparto chico!

Si tu cara fue

 
Para intentar explicar como funciona find o filter decidí emular el método find para que cualquiera pueda entender como funciona internamente espero les sirva
 

const ListaDeCupones = new Array();

ListaDeCupones.push({codigo: 'abc20', descuento: 20});
ListaDeCupones.push({codigo: 'xyz50', descuento: 50});
ListaDeCupones.push({codigo: 'blackFriday',descuento: 15});


function find(funcion) { // funcionamiento interno de find
  let elemento = undefined;
  ListaDeCupones.forEach((valor) => {
    if (funcion(valor)) elemento = valor;});
  return elemento;}


function imprimirDescuento(precio, cupon) {
  	if (!cupon || cupon.descuento > 100) {
    console.warn('datos invalidos');
    return;}

  const precioFinal = (precio * (100 - cupon.descuento))/ 100;
  console.log(`el precio es ${precio} pero solo pagaras ${precioFinal}`);}


const cupon_BlackFriday = 'blackFriday';
const cupon_lala = 'lala';


function validarCupon(cupon) {
  return cupon.codigo == cupon_lala;}

const cupon = find(validarCupon);

imprimirDescuento(200, cupon);

Logré que convivieran los descuentos manuales con los cupones. 😁

Codepen: https://codepen.io/paulgutv/full/bGvxreE

<h1>Calculadora de descuentos</h1>
<label for="price">Precio original: S/.</label>
<input id="price" type="number">
<label for="discount">Descuento: </label>
<input id="discount" type="number">
<label for="coupon">Cupón: </label>
<input id="coupon">
<button id="calculate">Calculate</button>
<p id="result"></p>

const price = document.querySelector("#price");
const discount = document.querySelector("#discount");
const result = document.querySelector("#result");
const calculate = document.querySelector("#calculate");
const coupon = document.querySelector("#coupon");

calculate.addEventListener("click", calculateDiscount);

// CUPONES

const couponList = [];
couponList.push({
  name: "OFERTA50",
  discount: 50
});
couponList.push({
  name: "OFERTA30",
  discount: 30
});

// FUNCIÓN CALCULAR

function calculateDiscount() {
  // SIN VALORES VACÍOS

  if (
    (!price.value && !discount.value) ||
    (!price.value && !coupon.value) ||
    (!discount.value && !coupon.value)
  ) {
    result.innerText = "Introduce dos valores";
    return;
  }

  // DESCUENTO NO MAYOR A 100

  if (discount.value > 100) {
    result.innerText = "El descuento no puede ser mayor de 100%";
    return;
  }

  // FUNCIÓN FILTRO DE CUPONES

  function filterDiscount(couponElement) {
    return couponElement.name == coupon.value;
  }

  const couponArray = couponList.find(filterDiscount);

  if (couponArray) {
    discount.value = couponArray.discount;
  } else {
    if (coupon.value) {
      result.innerText = "Cupón no válido";
      discount.value = "";
      return;
    }
  }

  // CÁLCULO DE DESCUENTO

  result.innerText = "S/. " + (price.value * (100 - discount.value)) / 100;
}

Una de las cosas más claras que tengo cada día, es que hay que leer documentación, muuuucha documentación.

Gente curso de array para que puedan profundizar 😃
https://platzi.com/cursos/arrays/

Les comparto mis apuntes del Curso de Manipulación de Arrays en JavaScript. 😄

Clase: Find y FindIndex

Find

Es parecido a filter, find solo va a retornar un objeto que cumpla con un condicional.

A diferencia de filter, find va a devolver el objeto del array como tal y no un nuevo array. Siempre va a devolver el primer elemento que hizo mach con la condición, en caso de no encontrar nada va a devolver un undefind.

Find es bueno usarlo cuando tenemos objetos o array cuyos atributos o elementos nos se repiten.

Ejemplo

Sin find

const numbers = [1, 30, 49, 29, 10, 13];
let rta = undefined;
for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30) {
        rta = element;
        break;
    }
}

Con find

const rta2 = numbers.find(item => item === 30);
console.log('find', rta2);

FindIndex

Con este devolvemos la posición en la que se encuentra el elemento. En caso de no encontrar el elemento nos devuelve un -1.

Lo usamos utilizando un arrow function al igual que find.

Código de la clase

const products = [
    {
        name: "Pizza",
        price: 12,
        id: '🍕',
    },
    {
        name: "Burger",
        price: 23,
        id: '🍔',
    },
    {
        name: "Hot dog",
        price: 34,
        id: '🌭',
    },
    {
        name: "Hot cakes",
        price: 355,
        id: '🥞', 
    },
];


const numbers = [1, 30, 49, 29, 10, 13];
let rta = undefined;
for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30) {
        rta = element;
        break;
    }
}
// console.log('for', rta);

const rta2 = numbers.find(item => item === 30);
// console.log('find', rta2);

const rta3 = products.find(({id}) => id === '🍔')
// console.log('rta3', rta3);

const rta4 = products.findIndex(({id}) => id === '🍔')
console.log('rta4', rta4);

Clase: Filter

¿Qué hace?

Este se puede usar en conjunto con otros métodos del prototipo Array.

Filter nos va a ayudar a filtrar los elementos de un array con base a una condición, los elementos que cumplan con la condición van a ser parte del nuevo array. Filter es immutable, no cambia el array original crea uno nuevo con los elementos que cumplan con la condición.

La cantidad del nuevo array va a variar según los elementos que cumplan con la condición dada, puede variar pero siempre siendo el máximo la cantidad de elementos que contiene el array original, incluso puede ser un array vacío.

Ejemplo

Sin filter

const words = ['spray', 'limit', 'elite', 'exuberant'];

const newArray = [];
for (let index = 0; index < words.length; index++) {
    const item = words[index];
    if (item.length <= 6) {
        newArray.push(item);
    }
}

Con filter

const rta = words.filter(item => item.length >= 6);

Otro ejemplo

const orders = [
    {
        customerName: 'Nicolas',
        total: 60,
        delivered: true,
    },
    {
        customerName: 'Zulema',
        total: 120,
        delivered: false,
    },
    {
        customerName: 'Santiago',
        total: 180,
        delivered: true,
    },
    {
        customerName: 'Valentina',
        total: 240,
        delivered: true,
    },
    {
        customerName: 'Nicolas',
        total: 1400,
        delivered: false,
    },
];

const rta2 = orders.filter(item => item.delivered && item.total >= 100);
const search = query => orders.filter(
    ({customerName}) => customerName.includes(query) 
);
console.log(search('V'));

Base de datos

Cuando se trata de una base de datos lo mejor es dejar que el filtro lo haga el lenguaje de bases de datos, en el caso de no tener una estas podemos hacerlo directamente con un lenguaje de programación.

Principales diferencias entre filter( ) y find( )
_

Me costó mucho trabajo entender el método find/Filter 😅 Y me salía pero me faltaba decirle al valor del input que se reemplazara por la variable donde guarde el método que filtra el arreglo, necesito más ejercicios, pero por el momento ya salió 😄

Estuvo potente

Juan no mentía cuándo dijo “si es tu primera vez va a doler muchísimo” fue verdad dolió y bastante.

“Al principio es doloroso, pero les va a gustar”

Hola a todos ❤️
Por acá les comparto mi solución utilizando find 😄

Repasa las 3 soluciones desarrolladas en la clase de hoy con las siguientes láminas

_

¿Quieres repasar los métodos FILTER y FIND?

• Te dejo algunos links que me han servido para entenderlos:
  Método filter - enlace 1
  Método filter - enlace 2
  Método find - enlace 1
  Método find - enlace 2

Diferencias entre FIND y FILTER

_

Amo los Arrays, aqui mi funcion

const calcularDescuento = (event) => {
  event.preventDefault()
  const price = event.target.precio.value
  const cupon = event.target.cupon.value
  console.log(price, cupon)

  if (!price || !cupon) {
    console.log('error no hay valores')
    event.target.querySelector('.message').innerHTML = 'No ingresaste cupon o precio'
    return

  }
  const matchedCupon = cupones.find((item) => cupon == item.name)
  if (matchedCupon) {

    event.target.querySelector('.message').innerHTML = `El precio te queda en ${precioConCupon(price, matchedCupon)}`

  } else {
    event.target.querySelector('.message').innerHTML = 'El cupon no existe'

  }



}

<const inputPrice = document.querySelector('#price');
const inputCoupon = document.querySelector('#coupon');

const btn = document.querySelector('#calcular');
btn.addEventListener('click', calcPriceDiscount);

const pResult = document.querySelector('#result');


const coupons = [
    {
        name: 'bronze',
        discount: 20,
    },

    {
        name: 'silver',
        discount: 30,
    },

    {
        name: 'gold',
        discount: 50,
    },
];

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

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

    let discount;

    function isCouponInArray(couponElement){
        return couponElement.name == coupon;
    }

    const couponInArray = coupons.find(isCouponInArray);

    if (couponInArray) {
        discount = couponInArray.discount;
    } else{
        pResult.innerHTML = 'El cupón no es válido';
        return;
    }

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

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

Tuve pequeños fallos pero logré solucionarlo.

Tanto filter como find son útiles, me llamó mucho la atención que se podía trabajar sin el condicional y dentro del mismo bucle:

    listaCupones.find(funcionCupones);
    function funcionCupones (cuponesElementos) {    
      
        if(cuponesElementos.name == cuponText){
            const descuentoFinal = (precio * (100-cuponesElementos.descuento)) / 100;
            resultadoOutput.innerHTML = descuentoFinal;
        }
    }

Puede ser útil si solo se quiere obtener el resultado.

Esta es mi solución, me emociono bastante cuando salio!

   const cupones= {
        Gabo:10,
        Gabobo:20,
        Gabobobo:30,
    }
    for(const property in cupones){
        if(cantidad2.value==property){
            const descuento= (dinero.value*(100-cupones[property]))/100;
        pDescuento2.innerText="El descuento es: " + descuento
        }
    }

Espero mis apuntes les ayuden de algo. Aún me falta entender muchísimo, pero espero sea de ayuda para alguien jasjda.

const cuponInput = document.querySelector('#cupon'); // Input del usuario
const calcularEnviar = document.querySelector('#calcular'); // Boton de cálculo
const cuponResultado = document.querySelector('.descuento'); // Saldrá error si el cupon no existe.
const precioDescuento = document.querySelector('.precio'); // Elemento donde se mostrará el descuento.
var precioProducto = 100; // Precio del producto.


// Como lo hice de un objeto directamente.

// var cupones = {
//     TACHIRAFOREVER: 20,
//     DESCUENTO9310: 10,
//     VIPTACHIRA: 40,
// }

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

// Creamos el array que contendrá los cupones.
var arrayCupones = [];

// Agregamos los cupones al array.
arrayCupones.push({
    cuponName: 'TACHIRAXSIEMPRE',
    descuento: 20,
});
arrayCupones.push({
    cuponName: 'TACHIRA',
    descuento: 10,
});
arrayCupones.push({
    cuponName: 'TACHIRITA',
    descuento: 25,
});

// Inicializamos la función que se ejecutará cuando los usuarios den click.

function calcularDescuento() {
    /* 
    Creamos una función interna que evaluará si un valor de la llave que estamos evaluando coincide con lo que el usuario escribió.

    Ejemplo, tenemos un objeto llamado carro, queremos comprobar que la marca sea Ford, entonces esta funcion evaluara que el valor de la llave "Marca" coincida con el del 'input' que en este caso seria 'Ford'.

    var carro = {
        marca: 'Ford',
        modelo: 'XYZ'
    }
    */
    function evaluarObjetoCupon(cuponObjeto) {
        return cuponObjeto.cuponName == cuponInput.value;
    }

    /* 
    Ahora dentro de la variable cuponObtenido guardaremos el método find aplicado al array directamente, este método se caracteriza por buscar el primer elemento que cumpla con la condición que le demos, en este caso que concida con el input del usuario.

    La condición que debe cumplir se evaluará en la función que antes definimos. A diferencia de filter, que itera todos los elementos del array y guarda todos los elementos que cumplan la condición en un nuevo array, este devolverá directamente lo que encuentre como resultado, que en este caso es el objeto.

    */
    var cuponObtenido = arrayCupones.find(evaluarObjetoCupon);

    /* 
    Evaluamos mediante un if si existe el objeto, en caso de ser verdadero guardaremos el valor del descuento, que en este caso se encuentra bajo la llave 'descuento'.

    Ahora modificaremos el texto del elemento que se supone que le mostrará al usuario cuanto deberá pagar.
    */
    if (cuponObtenido) {
        var descuento = cuponObtenido.descuento;
        precioDescuento.innerText ='Total a pagar $' +  precioProducto * (100 - descuento) / 100;
    } else {
        /*
        En caso de ser falso, mostramos el objeto que dice que el cupon no existe.
        */
        cuponResultado.innerText = 'El cupón no existe.';
    }
}
/*
    Agregamos el metodo de escucha para capturar cuando los usuarios den click al botón y ejecutaremos la función calcularDescuento.
*/
calcularEnviar.addEventListener('click', calcularDescuento);

HTML

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

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

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

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

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

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

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

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

Resolvi el reto de la siguiente forma:

<code> 
const precio =document.querySelector("#inputPrice");
const descuento =document.querySelector("#inputDiscount");
const resultado =document.querySelector("#resultP");
const btn =document.querySelector('#calcularDescuento');
const btnReset =document.querySelector('#reset');


btn.addEventListener('click',calcularPorcentaje);
btnReset.addEventListener('click',restauraValores);

function  calcularPorcentaje(){

    const precioVenta = precio.value;
    const cup =descuento.value;

    const cupones = {
        'fercho': 30,
        'platzi':15,
        'curso': 20,
        'primera':40
    }

    if(cupones[cup]){
        const desc = (precioVenta *cupones[cup] )/ 100;
        return resultado.innerHTML= desc;
    }else {
        return resultado.innerHTML="cupon no valido"
    }
    
}

function restauraValores(){
    precio.value = "";
    descuento.value = "";
    resultado.innerHTML="";
}

Como usar Find en arrays

En resumen, mientras .find devuelve solo la primera coincidencia que cumpla con la condición, .filter devuelve todas las ocurrencias que cumplan con la condición en forma de una lista o conjunto. La elección entre ambos métodos dependerá de tus necesidades y del resultado que desees obtener.

Aplicando lo del profesor, solo cambie mi código anterior con el método find.

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

  

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

  

Calculadora de cupones utilizando el ciclo FOR

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

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

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

• Mira la demo aquí
  

  
  

  

• Mira el código completo en su repositorio de GitHub

Calculadora de cupones utilizando el método FILTER( )

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

• Mira la demo aquí
  

  
  

  

• Mira el código completo en su repositorio de GitHub

Calculadora de cupones utilizando el método FIND( )

• En esta segunda solución utilicé el método FIND
• Mira la demo aquí
  
  
  
  
• Mira el código completo en su repositorio de GitHub

Les comparto un check de validez que realice trabajando con el constructor Date que incorpora JS. Establezco un periodo de validez con fechas en las propiedades del cupon y compruebo que no haya caducado antes de ser calculado. Esta clase era justamente lo que me faltaba en el aporte que realice en la clase anterior para poder pulir un poco mas la logica

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


btn.addEventListener('click', priceWithDiscount);

class Coupon {
    constructor(name, discount, expedition, expiration) {
        this.name = name,
        this.discount = discount,
        this.expedition = expedition,
        this.expiration = expiration
    }
}

var currentDate = new Date().toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'});

couponsList = []

couponsList.push(
    new Coupon('DRACO_IS_DRACO', 30, '02/01/2023', '02/17/2023'),
    new Coupon('AERLEVSEDI', 20, '00/01/2023', '12/01/2023'),
    new Coupon('DELIRIUM', 15, '02/15/2023', '02/25/2023'), 
    new Coupon('HEAVEN', 10, '02/01/2023', '02/01/2023')
)

function checkValidity (couponInArray, currentDate) {
    if (currentDate >= couponInArray.expedition && currentDate <= couponInArray.expiration) {
        validity = true
    } else {
        validity = false
    }
}

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

    if (!price || !coupon) {
        pResult.innerText = 'Llená el formulario';
        return;
    }

    let discount;

    function isCouponInArray (couponElement) {
        return couponElement.name == coupon;
    }

    const couponInArray = couponsList.find(isCouponInArray)

    if (couponInArray) {
        checkValidity(couponInArray, currentDate)
        if (validity) {
        discount = couponInArray.discount
        } else {
            pResult.innerText = 'Tu cupon expiró!'
        return
        }
    } else {
        pResult.innerText = 'Tu cupon no es valido!'
        return
    }

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

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

}

PS: Esto no lo utilice en el ejemplo pero si establecen con Date() fechas con el siguiente formato (Date(month-day-year) JS al convertirlo con .toLocaleDateString(‘en-US’, {year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’}) se encontraran con que los meses van del 0 al 11. Les dejo un link interesante sobre el tema ya que me estaba volviendo loco cuando lo probe y no entendia porque no comparaba bien.

Acá hice el ffind en una sola línea y haci mismo la guarde en una variable para hacer la condición…

const cuponesItems = [];
cuponesItems.push({
  name: 'sergio01',
  discount: 20,
})
cuponesItems.push({
  name: 'enero2023',
  discount: 30,
})
cuponesItems.push({
  name: 'sergio3144',
  discount: 80,
})


btn.addEventListener('click', calcularCupon);

function calcularCupon () {
  let precio = parseInt(inputPrice.value);
  let cupon = inputCupon.value;
  let descuento;

  if(!precio || !cupon) {
    res.innerHTML = 'Llena el formulario!!'
    return
  }

  let itemCupones = cuponesItems.find(cuponElement => cuponElement.name === cupon);

  if(itemCupones) {
    descuento = itemCupones.discount
  } else {
    res.innerHTML = 'Ingresa un cupón válido';
    return
  }
  
  const newPrice = (precio * (100 - descuento)) / 100;
  res.innerHTML = 'El nuevo precio con descuento es: $' + newPrice
  
}

// solucion con array u obj
    let discount;
    const arrDescuentos = [{
                name: 'JuanDC',
                disc: 0.30
            }, {
                name: 'noLeDigasANadie',
                disc: 0.25
            },
            {
                name: 'iWish',
                disc: 0.50
            },
            {
                name: 'myDad',
                disc: 0.70
            }
        ]
        // console.log(arrDescuentos[1].name)
    for (let i = 0; i < arrDescuentos.length; i++) {
        if (cupon == arrDescuentos[i].name) {
            discount = Number(arrDescuentos[i].disc);
        } else {
            resultCupon.innerText = 'el cupon no es valido';
            return;
        }
    }



    const newPrice = price * discount;
    resultCupon.innerText = 'El precio con descuento es de $' + (price - newPrice);

Esto hice yo:

const listaDeCupones = [
    {codigo: 'todomuybarato' , porcentaje: '70'  , isUsed: false },
    {codigo: 'todoamedioprecio' , porcentaje: '50'  , isUsed: false },
    {codigo: 'pasabocasdescuento' , porcentaje: '20'  , isUsed: false}
]

function verificarCupon(codigo){
    let porcentaje, puedoUsar;
    listaDeCupones.forEach(function(cupon){
        if(codigo == cupon.codigo && cupon.isUsed == false){
            cupon.isUsed = true;
            porcentaje = cupon.porcentaje;
            puedoUsar = true;
        }else if(codigo == cupon.codigo && cupon.isUsed == true){
            porcentaje = cupon.porcentaje;
            puedoUsar = false;
        }
    })

Más fácil, ya con esto llenas tu lista de cupones a 50 elementos.

let cuponList = [];
fillList();

function cupon(name, discount) {
  this.name = name;
  this.discount = discount;
}

function fillList() {
  for(let i = 0; i < 50; i++) {
    cuponList.push(new cupon("A" + i, 1 + i));
  }
}
console.log(cuponList);

here my solution
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>Cupones de descuento</title>
</head>
<body>
    
        <h1>Revisa tu cupon</h1>
        <div class="main-container">
            <div>
                <label for="precio">Precio</label>
                <input id="precio" type="number">
                <label for="coupon">Tipo de cupon</label>
                <input id = "coupon" type="text">
                <button id="calculate-button">Calculate</button>        
             </div>
             <div id="result"></div>
        </div>
        <script src="/cupones.js"></script>
   
</body>
</html>

JavaScript:

const calculateButton = document.querySelector("#calculate-button");
const priceInput = document.querySelector("#precio");
const couponInput = document.querySelector("#coupon");
const results = document.querySelector("#result");

class Cupon {
    constructor(nombre,descuento){
        this.nombre = nombre;
        this.descuento = descuento;
    }
}

let cupon1 = new Cupon ( 'Verano Feliz', 30);
let cupon2 = new Cupon("black Fryday", 35);
let cupones =[cupon1,cupon2];

calculateButton.addEventListener("click", function(){
    const price = parseFloat(priceInput.value);
    if(isNaN(price) || price <= 0){
        results.innerHTML = "Ingresa un precio válido";
        return;
    }
    let findCupon = cupones.find(cupon => cupon.nombre === couponInput.value);
    if (findCupon){
        const percentage = findCupon.descuento;
        calculate(price, percentage);
    }
    else {
        results.innerHTML = "Cupón no encontrado";
    }
});

function calculate(price,percentage){
    let finalPrice = price - (price*percentage/100);
    results.innerHTML = `El precio final es de $ ${finalPrice.toFixed(2)}`;
}

IMG

alguien llego a usar el método .includes?

El metodo .filter nos va a devolver un grupo de elementos que cumplan la condición…

const array1 = [5, 12, 8, 130, 44];

const found = array1.filter(element => element > 15);

console.log(found);
// expected output: 5, 8, 12

mientras que el método .find nos va a devolver solamente el primer elemento que cumpla esa condición.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

array.find devuelve un elemento, y deja de “buscar” cuando encuentra uno que cumpla con la condicion.

array.filter devuelve otro array, por lo que a pesar de encontrar un elemento que cumpla sigue iterando y agregando.

Solución by: webzma.💚

//LISTA DE CUPONES
  const cupones = [
    { 
      key: "webzma_va_a_cambiar_el_mundo",
      discount: 50,
    },
    { 
      key: "tesla_cambió_el_mundo",
      discount: 47,
    },
    { 
      key: "cr7",
      discount: 20,
    },
    { 
      key: "dont say to nobody",
      discount: 10,
    },
    { 
      key: "juanDC_is_the_best_programming_teacher",
      discount: 40,
    },
  ];  

//EVALUAR SI LO CUPONES EXISTEN Y MOSTRALO AL USUARIO
const resultadoCupon = cupones.find(elem => {
    if (elem.key == inputCupon) {
      let compra = (inputPrecio * (100 - elem.discount) / 100);
      resultado.innerHTML = `El descuento de su compra es del : <b>${elem.discount}% </b> y el precio de su compra final es: <b>$${compra}</b>`;
    } else {
        resultado.innerHTML = "Cupón inválido";
    }
  });  

no entendi! he repetido 6 veces el video y aun nada! creo que elaboraste el codigo como Simon Bolivar cuando estaba liberando a Sur America, salteado!

Me costó, y mucho, pero acá está:

Agradezco sugerencias 😅

https://kserranoo.github.io/calculadora-descuentos/

👇🏽 el código de la muerte 💀

const inputPrecio = document.getElementsByClassName('precio')[0];
const inputCoupon = document.getElementsByClassName('coupon')[0];
const oferta = document.getElementsByClassName('oferta')[0];
const btnCalcular = document.getElementsByClassName('btn-calcular')[0];
const btnReset = document.getElementsByClassName('btn-reset')[0];
    
btnCalcular.addEventListener('click', aplicarCupon);
btnReset.addEventListener('click', _ => {location.reload()});

const couponList = [];
couponList.push({
    name: 'regreso-a-clases',
    discount: 30,
})
couponList.push({
    name: 'feliz-cumple',
    discount: 25,
})
couponList.push({
    name: 'empieza-la-navidad',
    discount: 20,
})
couponList.push({
    name: 'bienvenido-al-club',
    discount: 15,
})
couponList.push({
    name: 'pruebame',
    discount: 90,
})

    function aplicarCupon() {

        const price = Number(inputPrecio.value);
        const coupon = inputCoupon.value;
        

        if (!price || !coupon) {
            oferta.innerText = "Por favor, ingrese los datos de su compra";
           return;
        }

        let discount;

        function validCoupon (couponElement) {
            return couponElement.name == coupon;
        }

       const isCouponValid = couponList.find(validCoupon);

        if (isCouponValid) {
            discount = isCouponValid.discount
        } else {
            oferta.innerText = "Su cupón no es válido."
            return;
        }

        const newPrice = (price*(100-discount))/100;
        oferta.innerText = "El costo de su compra es de: $" + newPrice;
    }

// couponsList.find() este método nos devuelve un objeto en especifico

// couponsList.filter() Con este método buscamos el array que contenga el elemento deseado.

Hola comunidad!

Le dí una solución un poquito diferente a la del profe JuanDa. Aquí la coloco

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>Página de descuentos</title>
</head>
<body style="display: grid; justify-content: center; justify-items: center; gap: 16px;">
    <h1>Bienvenido al cálculo de descuentos</h1>
    <label for="cupon">Ingresa el valor de tu cupón</label>
    <input style="width: 150px;" for="" id="coupon" />
    <label for="price">Ingresa el valor de tu compra</label>
    <input style="width: 150px;" id="price" />
    <button id='calculation' style="width: 150px;">Calcular</button>
    <p style="text-align: center;" class="print-discount">Aqui debe ir el resultado!</p>
<script src="./descuentos.js"></script>
</body>
</html>

JAVASCRIPT

// Array with cupons.

const couponDiscounts = [
    {code : 'D01' , valueDiscount : 10 } ,
    {code : 'D02' , valueDiscount : 20 } ,
    {code : 'D03' , valueDiscount : 30 } ,
    {code : 'D04' , valueDiscount : 40 } ,
    {code : 'D05' , valueDiscount : 50 } ,
];

function calculationDiscount ()  {
    // Principal variable setting.
    const $userCoupon = document.getElementById('coupon');
    const couponValue = $userCoupon.value;
    
    const $priceUser = document.getElementById('price');
    const userPriceValue = parseInt($priceUser.value);
    
    const $printDiscount = document.getElementsByClassName('print-discount');

    const findDiscount = couponDiscounts.find(coupon => coupon.code === couponValue);
    
    // Set of the discount founded or not.
    if (findDiscount) {
        positiveAnswer()
    } else {
        $printDiscount[0].innerHTML = `
            El código ${couponValue} no es válido.
        `
    }
    
    // Algorithm for sucess coupon.
    function positiveAnswer() {
        let discount ;
        
        if (findDiscount.valueDiscount > 0) {
            discount = findDiscount.valueDiscount; 
            const newPrice = userPriceValue * (100 - discount) / 100;
            // Final output for sucess answer
            return $printDiscount[0].innerHTML = `
            Tu descuento es de ${discount}% </br>
            Lo que equivale a: </br>
            ¡El nuevo precio con descuento es $${newPrice}!
            `
        }
    }    
    

};

// Answer of the call to action of the button.
const $calculation = document.getElementById('calculation');
$calculation.addEventListener('click', calculationDiscount); 

Los estilos están con malas practicas, pero era con el fin de mostrar más rápido el ejemplo

Reto de la clase anterior

HTML (body)

<h1>Cómo calcular precios con descuentos</h1>

    <label for="price">Precio original de tu producto:</label>
    <input id="price" type="numer" /><br />
    <p>Descuentos disponibles: "platziBronce", "platziPlata", "platziOro"</p>
    <label for="cupon">Nombre de tu cupon de descuento:</label>
    <input id="cupon" type="text" /><br /><br />
    <button id="calcular">Calcular descuento</button>

    <p id="result"></p>

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

JAVASCRIPT

const btn = document.querySelector("#calcular");
const inputCupon = document.querySelector("#cupon");
const inputPrice = document.querySelector("#price");
const pResult = document.querySelector("#result");

btn.addEventListener("click", calcularCupon);

const discounts = {
  platziBronce: 25,
  platziPlata: 50,
  platziOro: 75,
};

function calcularCupon() {
  const price = Number(document.querySelector("#price").value);
  const discountValue = discounts[inputCupon.value];

  if (!price || !discountValue) {
    pResult.innerText = "Inserte correctamente los datos";
    return;
  } else {
    const newPrice = (price * (100 - discountValue)) / 100;
    pResult.innerText = "El precio total es de: $" + newPrice;
    return;
  }
}

Me caes bien JuanDC querido, saludos desde Argentina.

const searchCupons = "Juan_Dc";
const codProduct = "A01";

let discount;
let priceProduct;

// ARRAY THE DESCRIPTION PRODUCTS
const productPrices = [
  { id: "A01", nameProduct: "arroz", price: 3.5 },
  { id: "A02", nameProduct: "azucar", price: 2.5 },
  { id: "A03", nameProduct: "cigarro", price: 1.5 },
  { id: "A04", nameProduct: "gaseosa", price: 3.5 },
];
// TICKETS THE CUOPONES
const coupons = [
  { name: "Juan_Dc", discount: 45 },
  { name: "Pedro", discount: 35 },
  { name: "Carlos", discount: 15 },
];

// SEARCH CUOPONS FOR COD
function isCodProduct(cod) {
  return cod.id == codProduct;
}
const product = productPrices.filter(isCodProduct);

// SEARCH NAME CUOPONS IS SAME 
function inObjCoupons(cupon) {
  return cupon.name == searchCupons;
}
const nameCupons = coupons.filter(inObjCoupons);


function calcDiscount(){
    // VALIDATION DE IF EXISTS
    (product.length    > 0) ? priceProduct = product[0].price : console.log('codigo No existe');
    (nameCupons.length > 0) ? discount = nameCupons[0].discount : console.log('Cupon no valido'); 
    
    // FORMULA PARA CALCULAR EL DESCUENTO  
    const newPrice = (priceProduct * (100 - discount)) / 100;
    (!isNaN(newPrice)) ? console.log(newPrice): console.log('Error de calculo de descuento');
}
calcDiscount();

Actualizando mi solución a un array de objetos y el método find()

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

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

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

Código JS

const coupons = [
    {
        name: 'coupon1', 
        discountRate: 25,
        limit: 50000,
    },
    {
        name: 'coupon2', 
        discountRate: 15,
        limit: 40000,
    },
    {
        name: 'coupon3', 
        discountRate: 30,
        limit: 50000,
    },
    {
        name: 'coupon4', 
        discountRate: 10,
        limit: 60000,
    },
];

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

function calculateCouponDiscount() {
    const coupon = inputCoupon.value;
    const fullPrice = Number(inputFullPrice.value);
    let message = '';

    if(!fullPrice || !coupon) {
        message = 'Debes escribir el precio del producto y el porcentaje de descuento a aplicar';
    } else {        
        const couponValidated = coupons.find( item => {
            return item.name == coupon;
        });

        if(!couponValidated) {
            message = 'El cupón que ingresaste no es válido';
        }
        else {
            if(couponValidated.discountRate > 100) {
                message = 'El porcentaje de descuento debe ser menor o igual al 100%';
            } else {
                const discount = (fullPrice * couponValidated.discountRate) / 100;

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

Excelente clase!

Lo hice un poco diferente ya habia subido el repo en la clase pasada, se los dejo y tambien el codigo js aca.
https://orlando0x.github.io/MatematicasEstadisticaConJavascript/retoPorcentajeCuponesArrayObjetcs.html

const monto = document.getElementById("monto");
const descuento = document.getElementById("descuento");
const btn = document.getElementById("btn")
const texto = document.getElementById("text");
const cupon = document.getElementById("cupon");
const cupones = [
    {codigo: "ABC345", descuento: 5},
    {codigo: "ZNK123", descuento: 15},
    {codigo: "QWE789", descuento: 20},
    {codigo: "ZXC456", descuento: 25},
    {codigo: "IOP963", descuento: 30},   
    ]


btn.addEventListener("click", cuentaTotal)


function cuentaTotal(){
    
    if (monto.value <= 0){
        cupon.innerText = ' '
        texto.innerText = 'ERROR: Debe introducir un monto a pagar mayor a $0'
        
    } else {
        let validationCupon = cupones.filter(function(cuponIndividual){
            return cuponIndividual.codigo === descuento.value;
        })
        function descuentoTotal(){
            const total = (monto.value) - (monto.value * (descuentoFinal / 100));
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }

        if(validationCupon.length >= 1){
            var descuentoFinal = validationCupon[0].descuento;
            cupon.innerText = `Felicidades! Tienes un ${descuentoFinal}% de descuento`
            descuentoTotal();

        } else if (!descuento.value) {
            var descuentoFinal = 0;
            descuentoTotal();
            cupon.innerText = 'ERROR: No has introducido ningun cupon, no tendras ningun descuento'
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }
        else {
            var descuentoFinal = 0;
            descuentoTotal();
            cupon.innerText = 'ERROR: Cupon invalido, no tendras ningun descuento'
            texto.innerText = `El monto total a pagar es de: $${total}`;
        }
        
    }
}

Lo intente y me salió de esta manera, creo que igual es valido

<const cupones = {
    DESCUENTO1: 10, 
    DESCUENTO1: 90,
};

function calcularDescuentoCupon() {
    const cupon = document.querySelector('#descuento').value.toUpperCase();
    const precioOriginal = parseFloat(price.innerText);

    if (cupones[cupon]) {
        const newPrice = (precioOriginal * (100 - cupones[cupon])) / 100;
        const descuento= precioOriginal - newPrice;
        precioDescuento.innerText = " $" + descuento;
        pagarTotal.innerText = "TOTAL A PAGAR $ " + newPrice;

    } else {
        alert('Código de cupón no válido');
    }
}
> 

Recomiendo como ayuda complementaria a este curso, las clases del curso de manipulación de arrays que son oro puro.

Cupones. Demo: https://jmanriquecha.github.io/javascript-math/coupon.html

excelente la explicaciòn!!! ♥

Yo de plano mejor hice 2 ramas, una manipulando el objeto directamente y otra manipulando el array de objetos. Digo, algo bueno saldrá aparte de la práctica y entender sus pequeñas diferencias. GGG 🤷‍♂️

**Por cierto, alguien me podría explicar cómo subir imágenes? Lo he intentado un par de veces pero la neta no me sale :c

salu2

comparto mis dos, soluciones uno es con if(el comentado) y el otro con filter igual les dejo mi html

<code> 

const button =  document.querySelector('#calcular'); 

const precio = document.querySelector('#price'); 
const descuentos = document.querySelector('#discount');
const descuento = document.querySelector('#descuento'); 
const cupones = document.querySelector('#cupon');
//const getcupon = document.querySelector('#getcupon'); 


button.addEventListener('click',calculardescuentos ); 
  const custobjct = []; 
  custobjct.push({name: "PINKY_22", discounts: 30}); 
  custobjct.push({name:"JUNIO2023", discounts:20}); 
  custobjct.push({name: "RvZWER23", discounts:15}); 
function calculardescuentos(){   
const price =  precio.value; 
 const discount = descuentos.value;
 const cupons = cupones.value; 

 
 if(!price || !discount & !cupons){
   descuento.innerText = "No se ingreso ningun tipo de precio, descuento uo cupón"; 
 
 }else if(discount > 50){
  descuento.innerText = "Los descuentos solo se aplican a un 50%"
}else if(price && discount){ 
    const newPrince  =  (price*(100-discount)/100); 
    descuento.innerText = "el nuevo precio con descuento es  $" + newPrince;
    
    
 }
  
function isDiscountCupons(elementCupotn) {
  return  elementCupotn.name === cupons

 }

 const existCuopunInArray = custobjct.find(isDiscountCupons);
//  descuentos  con map y filter 
 if(price && !discount ){
  if(existCuopunInArray){
    let discounstCupons  = existCuopunInArray.discounts; 
    const pricecupons  = (price*(100 - discounstCupons)/100);
  descuento.innerText = `se aplico el ${existCuopunInArray.discounts}, tu total es ${pricecupons}` ;
  }else{
   descuento.innerText = " cupón no valido  vuela  a verificar"; 
   
  }

} else if(cupons && discount){
  descuento.innerText = "Solo se puede ingresar  un  tipo de descuento";
}

console.log(discounstCupons,cupons, existCuopunInArray);
/*  
decuentos con if

if(price && !discount ){
  if(cupons === getcuposd){
    
    const pricecupons  = (price*(100-15)/100);
    descuento.innerText = "se aplico el 15% en tu cupo tu total es $" + pricecupons;
  }else{
   descuento.innerText = " cupón no valido  vuela  a verificar"; 
   
  }

} else if(cupons && discount){
  descuento.innerText = "Solo se puede ingresar  un  tipo de descuento";
} */
}

html

<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discount| calcular los precios con descuentos</title>
</head>
<body>
    <h1>Cómo calcular precios con descuentos</h1>
    <input id="price" type="number">
    <input id="discount" type="number">
    <p>cupon de esdecuento</p>
    <!--<input id="getcupon" type="text" value="ZWRV6734" readonly >--->
    <input id="cupon" type="text" placeholder="ingresa  el cupon de descuento">
    <button id="calcular">Calcular</button>

    <p id="descuento"></p>

Curso recomendado para entender mejor esta clase …
https://platzi.com/cursos/arrays/
El profe Nico Bytes es excelente !

Para manipular Arrays seria mejor usar arrow functions () => () {}

const D = document,
      price = D.querySelector('#price'),
      coupon = D.querySelector('#coupon'),
      P = D.querySelector('#result'),
      btn = D.querySelector('#calcular');

btn.addEventListener('click', calcularPrecioConDescuento)

function descuento () {
    const newPrice = (price.value * ( 100 - this.discount )) / 100;

    P.innerText=`El nuevo precio es: ${newPrice} debido a que su descuento del cupon es de ${this.discount}%`
}

const parameters = [
    {
        id: "JuanDC_es_Batman",
        discount: 30,
    },
    {
        id: "no_le_digas_a_nadie",
        discount: 25,
    }
]

function calcularPrecioConDescuento() {

    if ( !coupon.value || !price.value ) {
        P.innerText=`Completa todos los parametros para hacer el calculo`
        return
    }

    const selectedParameter = parameters.find( ({ id }) =>  id === coupon.value )

    typeof selectedParameter === 'undefined'
        ? P.innerText = `El cupon no es valido`
        : descuento.call(selectedParameter)
}

https://willy23jaramillo.github.io/matem/
les dejo de todo lo que llevo de este curso de matemáticas hasta este punto los cupones de descuento son platino dorado y bienvenido

Dejo por acá mi ejercicio “Aplicar cupón de descuento” el js válida si el cupón ingresado es válido, utilizando los métodos de recorrido de arrays, también incorporé una función que válida la cantidad de copones disponibles una vez sea validado el mismo. Los copones son introducidos al array de copones a través de una función utilizando el método push y el descuento es aplicado sobre el mismo input de precio utilizando innerHTML. Después de aplicar un cupón, agregue el método indexOf para ver el nombre del cupón aplicado y ubicar su index en el array de cupones para posteriormente eliminarlo con el método splice

También se verifica si el input es undefined. Por acá dejo el código, atento a cualquier comentario que me ayude a mejorar mis habilidades.

Ejercicio en netlify para que lo prueben
el array solo tiene dos copones con el nombre ofertaDiciembre
https://apply-coupon.netlify.app/

El repo de GitHub donde estaré subiendo los ejercicios de la clase
https://github.com/JesusEdu20/taller-practico-de-javaScript

v

const couponCollection=[];

const createCoupon=(coupon)=>{//object
    couponCollection.push(coupon)
}

//name
//discount

//validators
const validateCoupon=(coupons, target)=>{
    return coupons.find(coupon=> coupon.name==target);
}


const validateAmountAvailable=(coupons, target)=>{
    const amountOfCoupon=coupons.filter(coupon=> coupon.name==target);
    return amountOfCoupon.lenght;
}



const askForCoupon=(coupons, target)=>{
    const couponIsAvailable=validateCoupon(coupons, target);
    const amountOfCoupon=validateAmountAvailable(coupons, target); 
    const coupon=couponIsAvailable? couponIsAvailable: false;
    const amountAvailable=couponIsAvailable? couponIsAvailable: false;

    if(coupon){

        return {coupon:coupon, amountAvailable: amountAvailable};
    }
    else{

        return false
    }

    

}


const calculatePrice=(amount, percent)=>{

    return (amount/100)*percent
}


//cp__input cp__price
//cp__input cp__cupon
//btn

const priceInput= document.querySelector(".cp__price");
const couponInput= document.querySelector(".cp__cupon");
const btn= document.querySelector(".btn");

createCoupon(
    {
        name:"ofertaDiciembre",
        discount: 50
    }
    
)
createCoupon(
    {
        name:"ofertaDiciembre",
        discount: 50
    }
    
)



btn.addEventListener("click", ()=>{

    const price=parseInt(priceInput.value);
    const coupon=couponInput.value;
    const dataCoupon=askForCoupon(couponCollection, coupon);

    if(dataCoupon){
        priceInput.value=calculatePrice(price, dataCoupon["coupon"].discount);

        //eliminar coupon usado
        couponCollection.indexOf(coupon);
        couponCollection.splice(coupon, 1);
        console.log(couponCollection)
    }
    else if(coupon===""){
        priceInput.value="Introduzca un cupon"
    }
    else{
        priceInput.value="Cupon no valido"
    }
    

})

si resulto dificil esta clase entendi mas omenos pero pude resolver, y este es el inicio de javasrip , quien mas batallo

ps yo lo hice asi:

const btn = document.getElementById('calc')

const coupons = {
    'nico':15,
    'eli':30,
    'perci': 90
}


    const validCoupon = (ticket) => {
        const ad = document.querySelector('#ad');

        if(!ticket || ticket == 0 || ticket == 'null' || ticket == 'cupon'){
            ad.innerHTML = 'CUPON NO APLICADO'
            return false
        } else if(Object.keys(coupons).includes(ticket)) {
                ad.innerHTML = 'CUPON VALIDO'
                return true
            } else {
                ad.innerHTML = 'CUPON INVALIDO'
                return false
            }
    };

    const applyDiscount = (price, coupon) => {
        const result = price - ((coupons[coupon] * price)/100);
        return result
    }

    const runCalc = (event) => {
        event.preventDefault();
        const price = document.querySelector('#price').value;
        const coupon = document.querySelector('#coupon').value;
        const msg = document.querySelector('#msg');

        if(validCoupon(coupon)){
            const result = applyDiscount(price, coupon);
            msg.innerHTML = `El precio final es de: ${result}`
        } else {
            msg.innerHTML = `El precio final es de: ${price}`
        }
    }

    btn.addEventListener('click', runCalc);

Maestro porfa si me equivoco avíseme quisiera aportar un poco en el entendimiento de la función patito: Esta función esta conectada a la constante couponList filter(patito) y couponList.filter esta conectado a nuestro array punto filter al estar afectando nuestro array imaginen que esta contando infinitamente 123… 123… pero nadie lo esta viendo esto lo esta haciendo por detrás entonces creamos la función por que queremos ver lo que esta haciendo punto filter que esta contando para eso necesitamos una variable donde guardar los datos que filter este contando entonces en la función entre paréntesis es que vamos a colocar esa variable en este caso el maestro le coloca un nombre semejante a lo que queremos obtener que es un elemento del couponList pero fácilmente podríamos colocarle guardar y aun así funcionaria, en este caso quisiéramos guardar solo el valor de nombre de cada elemento del array entonces pondríamos guardar punto name aquí le decimos a filter que de todo lo que esta contando nada mas guarde lo que esta en nombre y compare == con cupón que este es la variable donde esta el inputCoupon espero este entendimiento le sirva a alguien para poder progresar en estos cursos éxito muchachos

<!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>test de index</title>
</head>
<style>
.redPower {
font-size: larger;
color: red;
}
</style>

<body>
<section id=“seccionador”>
<input id=“box1” type=“number”>
<input id=“box2” type=“text”>
<button id=“enviador”>Enviar</button>
<p id=“resultante”></p>
</section>
</body>
<script>
// Escuchadores del DOM
const send = document.querySelector(’#enviador’);
const contenedor = document.querySelector(’#seccionador’);
const resultante = document.querySelector(’#resultante’);
// Fin escuchadores del DOM

// ejecutante de funcion
send.addEventListener('click', visualRes);
// Fin ejecutante de funcion


//funciones
function visualRes() {
    let boxUno = Number(document.querySelector('#box1').value);
    let coupon = document.querySelector('#box2').value;
    let descuentico;

    if (!boxUno || !coupon) {
        alert('Chancla, por favor llenar el formulario');
        return;
    }
    
    const productList = [];
    productList.push({
        coupon: 'ctp10',
        valorcpto: 10,
    });
    productList.push({
        coupon: 'ctp20',
        valorcpto: 20,
    });
    productList.push({
        coupon: 'ctp30',
        valorcpto: 30,
    });
    productList.push({
        coupon: 'ctp40',
        valorcpto: 40,
    });

    function renderProducts(arr) {
        for (product of arr) {
            const granRes = product.coupon;
            const descuentico = product.valorcpto;

             if (granRes === coupon){
                const newPrice = (boxUno * (100 - descuentico)) / 100;
                resultante.innerText = newPrice;
                return;
             } 
             resultante.innerText = "No existe ese cupón" + " " + coupon;
        }
    }
    renderProducts(productList)
}

</script>

</html>

<code> 
const btn = document.querySelector('#enviar')
const price = document.querySelector('#price')
const cupon = document.querySelector('#cupon')
const pre = document.querySelector('.pR')

btn.addEventListener('click', discount)

const couponsList = [];

couponsList.push({
    id: 'sabadaba',
    discount: 50,
})
couponsList.push({
    id: 'sabada',
    discount: 25,
})
couponsList.push({
    id: 'saba',
    discount: 10,
})
couponsList.push({
    id: 's',
    discount: 5,
})
couponsList.push({
    id: 'drink',
    discount: 36,
})
couponsList.push({
    id: 'miercolitros',
    discount: 80,
})

function jeje(cupons){
    if(cupons.id == cupon.value){
        const newprice = (price.value * (100 - cupons.discount)/100)
        pre.innerText = 'precio con descuento: ' + newprice;
    }
     else{
        pre.innerText = 'Cupon no existente: ERROR'; 
    }
}

function discount(){
    couponsList.filter(jeje)
}

Asi lo hice yo

esta es la forma en que lo resolvi usando un ciclo for

  const cupones = [
        { codigo: 'DESCUENTO20', descuento: 20 },
        { codigo: 'DESCUENTO30', descuento: 30 },
        { codigo: 'DESCUENTO50', descuento: 50 }
    ];
    
    const cuponIngresado = inputcoupon.value.toUpperCase();
    let cuponValido = false;
    
    for (let i = 0; i < cupones.length; i++) {
        if (cupones[i].codigo === cuponIngresado) {
            descuento = cupones[i].descuento;
            cuponValido = true;
            break;
        }
    }
    if (!cuponValido && descuento === 0) {
        pResult.innerText ='Por favor ingresa un descuento o un cupón válido';
        return;
    }

jajjaj apenas voy entendiendo una forma y no termina el flujo y comienza con otra forma de hacer lo mismos confunde y marea, deberia terminar algo y luego mostrar las otras formas de hacer.

Juan predijo mi sindrome del impostor al final xd

27 minutos D:

Simplemente:

ya tengo la V3 jajjaa con .find()
https://codepen.io/francomoreira/pen/bGxEaNL

💡 Un breve resumen:

• Tenemos que JavaScript, tanto el método find como el método filter se utilizan para buscar elementos en una matriz (array) o en una colección de objetos.

Diferencias:

• 1️⃣ find: este método devuelve el primer elemento que cumple con una determinada condición. Si no hay ningún elemento que cumpla con la condición, devuelve undefined.

• 2️⃣ filter: este método devuelve una matriz con todos los elementos que cumplen con una determinada condición. Si no hay ningún elemento que cumpla con la condición, devuelve una matriz vacía. La sintaxis del método filter es la siguiente:

Que clase tan confusa, hay que verlo imagino yo como 3 veces. Ni modo.

Método find

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

btn.addEventListener(‘click’, calcularPrecioConDescuento)
const cuponsList = []

cuponsList.push({
name : ‘silicio’,
discount : 30
})

cuponsList.push({
name : ‘onomatopeya’,
discount : 25
})

cuponsList.push({
name : ‘vhs’,
discount : 15
})

cuponsList.push({
name : ‘volvo’,
discount : 45
})

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

for( let i = 0; i <= cuponsList.length; i++)    
{
    if(cuponsList[i].name == coupon)
        {
            discount = cuponsList[i].discount 
            const newprice = (price * (100 - discount)) / 100// (P * (100 - D)) / 100
            return pResult.innerText = 'El nuevo precio con descuento es $' + newprice
        } else
        {
            console.log(i)
            pResult.innerText = "No existe el  cupon"
        }
}    

}

Aquí les comparto mi solución con el método find 😉

Espero que les sirva cualquier recomendación o corrección por favor avisarme, muchas gracias.

const inputPriceFind = document.querySelector('#priceFind');
const inputCouponFind = document.querySelector('#couponFind');
const btnCalcFind = document.querySelector('#btnCalcFind');
const pPriceFind = document.querySelector('#pPriceFind');

const arrayCoupon = [];
arrayCoupon.push({
	name: 'AA20',
	discount: 20,
});        

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

	function couponValidate(element) {
		return element.name == inputCouponFind.value;
	};
	const couponFind = arrayCoupon.find(couponValidate);
            
	if (couponFind) {
		pPriceFind.innerText = `Precio con descuento $${inputPriceFind.value * (100 - couponFind.discount) / 100}`;
	} else {
		pPriceFind.innerText = `Cupón inválido!! Precio: $${inputPriceFind.value}`;
	}
});

🤯It is posible to declare a variable inide the parenthesis of a funtions

Increíble que si tuve que ver la clase 3 veces pero porque las primeras 2 veces no entendí ni mangos JAJAJAJAJAJJAJAJAJAJAJJAJA

This is call a method. This case a filter

Hola a todos!
Despues de tanto pensar, y entender el querido find(), pude hacer el ejercicio.
PD: el filter() se los debo para la proxima.

🥵