Ejercicio de crear cupones de descuento

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Contenido del curso

Introducción

1
¿Ya tomaste el Curso Práctico de JavaScript?
08:20 min

Matemáticas en JavaScript

Porcentajes

Estadística básica

Análisis de salarios

Próximos pasos

27
Toma el Taller Práctico de JavaScript: Videojuegos
04:27 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:21

Recursos

Resumen

Si estás en busca de descuentos, revisa nuestro blogpost sobre Promociones de Platzi.

Ejercicio de crear cupones de descuento

Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Clase 7 de 27

Clase 7 / 27

Comentarios (120)120 comentarios

Diesan Romero

Hace 4 años

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.

Cesar Chalimond

Hace 4 años

Una pregunta, ¿En donde comparas el input del descuento del usuario con tu variable discounts?

Regina Victoria Juárez Miranda

Hace 4 años

Me ayudó muchísimo tu solución. Usé una lógica un poco distinta, pero me funcionó de guía tu ejercicio. Muchas gracias.

const cupones={ 
    A:30,
    B:25,
    C:15,
    D:10,
    E:50,
    F:75,
    G:60,
};
function sendData(){
    if(cupones[descuento.value]){
    let price=articlePrice.value;
    let discount=cupones[descuento.value];
    ans2.innerHTML='$'+(price*(100-discount))/100;
    return;
    }
}

Rodrigo Abel Gutierrez Insegna

Hace 4 años

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

Juan Castro

Profesor

Hace 4 años

Me encanta que hayas creado la clase para los cupones. :clap:

Andres Cavedal

Hace 4 años

me seria muy util poder ver todo el codigo, me sirvio mucho

Antonio Mora

Hace 4 años

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

Pueden ver mi código aquí

Juan Castro

Profesor

Hace 4 años

Antonio, en los screenshots tu proyecto se ve SUUUUPER bien. Quería ir a Codepen a darle una estrellita, pero cuando lo abrí no me funcionó. :sob: ¿Podrías revisarlo por fa para darle la merecidísima estrellita?

Antonio Mora

Hace 4 años

Ya lo corregí. Los códigos de descuento que se pueden utilizar son:

platzi
VMX50
MM89X
JUL99

Josue Cerron Tuesta

Hace 4 años

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

});

Ivan Rojas

Hace 4 años

Estas en lo correcto, creo que mas allá de usar objetos. Lo ideal es utilizar arrays, ya que no sabemos cuantos cupones pueden existir en un proyecto real.

Federico Upegui Restrepo

Hace 4 años

Objetos con forEach

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

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

btn.addEventListener('click', calcularPrecioConDescuento)

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

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

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

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

Laura Roa

Hace 4 años

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

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

btn.addEventListener('click', calculatePriceWithDiscount);

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

console.log(coupons);

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

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

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

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

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

}

Paula Inés Cudicio

Hace 4 años

Aquí mi calculador de descuentos

José Fernando Fuentes Roa

Hace 4 años

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

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

Nestor Rios Garcia

Hace 4 años

Antes del minuto 1:00

Me tardé varias horas, pero me gusto el resultado. !Clase-8

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

Gabriel Diego Cejas

Hace 4 años

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

Santiago Quintero

Hace 4 años

Les comparto mi código.

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

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

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

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

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

SIn embargo, encontré :



let claves =Object.keys(cupones);

Que me permitió volverlo iterable.

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

Les dejo mi solución:

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

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

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



button.addEventListener("click", mostrarResultado);



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

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

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

}
    
    
}

JORGE MANRIQUE CHAVARRO

Hace 3 años

MI aporte aplicando cupones de descuento.

Este es mi aporte.

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

Ricardo Leal Piñeres

Hace 3 años

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

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

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

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

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


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

El HTML quedaría así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Descuentos</title>
</head>
<body>
    <label for="precio">Ingresa el precio del producto</label>
    <input type="text" class="precio"><br>
    <label for="descto">Ingresa el porcentaje de descuento</label>
    <input type="text" class="descto"><br>
    <label for="cupon">Ingresa el Cupón</label>
    <input type="text" class="cupon"><br>
    <button type="button" name="Enviar" class="btnDcto">Calcular</button>
  <div>
    <p class="resultado"></p>
  </div>
</body>
<script type="text/javascript" src="descuentos.js"></script>
</html>

Rouseld Bayardo Castilblanco Gonzalez

Hace 3 años

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

Por aca dejo el Javascript

Script 1

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

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

]

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

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

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

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

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


function sumadeporcentaje(event){

  if(sumadeporcentaje = true){

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

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

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

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

  }



    
}




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


    if(coupondiscountvalue){
    

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

}

Script 2

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

returnbutton.addEventListener('click', pager)

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

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

Script 3

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

returnbutton.addEventListener('click', pager);

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

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

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

Juan Castro

Profesor

Hace 3 años

Espectacular! Lo tienes publicado en algún repo?

Rouseld Bayardo Castilblanco Gonzalez

Hace 3 años

Acabo de publicarlo para que puedan probarlo , puedes pobrar con el cupon mothersday para comprobar su funciona o no

https://rouseld.github.io/calculadora/index.html

Katherine Cruz

Hace 3 años

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

Aqui el codigo JS :P

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

botonCalculo.addEventListener('click', calcularPrecioFinal);

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

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

aqui el codigo HTML

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

Y aqui el codigo CSS :)

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

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

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

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

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

.valores {
  margin: 5px;
}

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

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

Sebastián Caraballo Marzola

Hace 3 años

    <script>
        const price = document.querySelector('.price');
        const percentage = document.querySelector('.percentage');
        const result = document.querySelector('.result')
        const buttonCalculate = document.querySelector('.Calculate')
        //sacar porcentaje 
        const inputCupon = document.querySelector('.nameCupon')
        const arrayCupones = [
            {name:'DEVERANO', descuento : 15},
            {name:'FINDELOKOS', descuento : 55},
            {name:'CYBERLUNES', descuento : 35},
            {name:'CASIREGALADO', descuento : 90}
        ] 

        function discount (thePrice, thePercentage, cupon){

            if (cupon == ''){
                let operation = (parseInt(thePrice) * (100 - parseInt(thePercentage))) / 100
                result.textContent = operation;
            }else{

                let nCupon = cupon; 
                let tipoCupon = arrayCupones.filter(function (name) {
                    return name.name == nCupon
                })
                
                let descuentoCupon = tipoCupon[0].descuento
                
                let operation = (parseInt(thePrice) * (100 - descuentoCupon)) / 100
                result.textContent = operation;
                
            }
            
        }

        buttonCalculate.addEventListener('click', function () {
            discount(price.value, percentage.value, inputCupon.value)
        })

    </script>

Alejandro López Aguilar

Hace 3 años

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

Javascript:

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

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

Alejandro López Aguilar

Hace 3 años

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

un solo if:

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

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

Un solo caso:

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

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

Para resolver los errores en cada ejercicio hize lo siguiente:

un solo if:

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

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

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

Un solo caso:

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

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

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

Matías Wasiak

Hace 3 años

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

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

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

  let discount;

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

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

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

Alexis Daniel Sanchez Arias

Hace 4 años

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

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./maqueta2.css">
    <title>Cupones de descuento</title>
</head>
<body>
    <nav class="nav_container">
        <h3>Los mejores descuentos los encuentras aqui</h3>
    </nav>
    <main class="main_container">
        <aside class="aside_container">  <!-- este va del lado izquierdo y aqui ponemos los inputs -->
            <h4> calcule un descuento o coloque un cupon válido </h4>
            <label for="price">Precio base
                <input type="number" id="price" placeholder="precio del producto en MXN">
            </label>
            <label for="discount"> Introduzca un descuento
                <input type="number" name="" id="discount"  placeholder="0 a 70% de descuento">
            </label>
            <label for="coupon"> Introduzca su cupon
                <input type="text" name="" id="coupon" placeholder="pida un cupón">
            </label>
            <input type="button" value="calcular" id="calculate" class="button">
            <input type="button" value="cancelar" id="cancel" class="button">
        </aside>
        <section class="section_container">
            <!-- aqui vamos a poner el poderosisimo descuento con el div y una imagen -->
            <figure>
                <img src="./4.png" alt="" srcset="">
            </figure>
            <div class="alert">
                <p id="alert"></p>
                <p id="cancel__alert"></p>
            </div>
        </section>
    </main>
    <script src="./maqueta2.js"></script>
</body>
</html>

CSS ESTE ES EL CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.section_container img {
    width: 100%;
}

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

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

JAVASCRIPT LO DEJO EN COMENTARIOS

Alexis Daniel Sanchez Arias

Hace 4 años

const inputPrice = document.getElementById('price');
const inputDiscount = document.getElementById('discount');
const inputCoupon = document.getElementById('coupon');
const btn = document.querySelector('#calculate');
const pAlert = document.querySelector('#alert');
const pCancel = document.querySelector('#cancel__alert');
const btnCancel= document.getElementById('cancel');

btn.addEventListener('click', calculateDiscount);
// btnCanel es un boton que se va a usar para eliminar el resultado de la funcion principal
btnCancel.addEventListener('click', cancel);

function calculateDiscount() {
  const price = Number(inputPrice.value);
  const discount = Number(inputDiscount.value);
  const strikeCoupon = inputCoupon.value.trim().toLowerCase();
  // Este pCancel es para que se elimine el mensaje de cancelacion
  pCancel.innerText='';
  if (!price) {
    pAlert.innerText = 'Por favor, ingrese un precio válido.';
    return;
  }

  if (discount > 70) {
    pAlert.innerText = 'Lo siento, no se pueden aplicar descuentos mayores al 70%.';
    return;
  }

  let newPrice = price * (100 - discount) / 100;
  let couponDiscount = 0;
  if (strikeCoupon === 'z10') {
    couponDiscount = 10;
    newPrice = price * (100 - couponDiscount) / 100;
    pAlert.innerText = `El precio a pagar con el cupón es: $${newPrice.toFixed(2)}`;
  } else {
    pAlert.innerText = `El precio a pagar es: $${newPrice.toFixed(2)}`;
  }
}
// Esta funcion es para eliminar los resultados del boton azul
function cancel() {
  pAlert.innerText ='';
  pCancel.innerText ='Descuento cancelado satisfactoriamente';
}
// Este add es para que se pueda ejecutar si presionamos "enter"
document.addEventListener('keypress',keyEnter);
function keyEnter(e) {
  if(e.key ==='Enter'){
    calculateDiscount();
  }
}

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Promedio Ponderado en JavaScript: Fórmulas y Casos de Uso

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos

Resumen

Ejercicio de crear cupones de descuento