No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Cupones de descuento

7/27
Recursos

Aportes 6

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

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

});

2. Objetos:

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

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

});

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

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

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

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

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

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

  return `$${total}`;
}

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

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

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

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

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

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

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


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

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

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

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

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

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

        discount = arrayUObjecto[i].descuento;

    } else if(i = arrayUObjecto.length) {

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

    } else if(discount) {

        i = arrayUObjecto.length;
        
    }
  }
 

esta es la forma que tendría el array:

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

Este es mi aporte

const btn=document.querySelector('#calcular');
const inputPrice=document.querySelector('#price');
const inputDiscount=document.querySelector('#discount');


let cupones=[
    {nombre:"CuponEasy",
     valor:10},
    {nombre:"CuponMedium",
        valor:50},
    {nombre:"CuponBig",
        valor:70},
]


function precioDescuento(){
    const price=inputPrice.value;
    const discount= inputDiscount.value
    const cupon=cupones.find(item=>item.nombre==discount)
    const valorDiscount=cupon.valor
    if (!price || !discount){
        alert("Usted no ha agregado ningún valor")
    }else if(cupones=undefined){
        document.getElementById('newPrice').innerText= 'Está Ingresando un Cupon no valido'
    }
    else{
        newPrice=(price*(100-valorDiscount))/100,
        document.getElementById('newPrice').innerText= 'El precio con descuento es $: '+ newPrice
    }
}

btn.addEventListener('click',precioDescuento);

Use el mismo ejemplo que deje en la clase pasada, lo hice de dos formas, tratando de que este lo mas completo posible, es decir, que me salte un texto con el error que corresponda.
Cupones:
ABC345
ZNK123
QWE789
ZXC456
IOP963

Array con elementos simples usando .some todos lo cupones tienen 10% de descuento

https://orlando0x.github.io/MatematicasEstadisticaConJavascript/retoPorcentajeCuponesArray.html

Usando Array con objetos cada cupón tiene un descuento diferente

https://orlando0x.github.io/MatematicasEstadisticaConJavascript/retoPorcentajeCuponesArrayObjetcs.html

Cualquier detalle o critica constructiva sera muy bien recibida, estoy tratando de mejorar mi codigo.