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

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

Tomar examen

Ejercicio de crear cupones de descuento

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Resumen

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

Rouseld Bayardo Castilblanco Gonzalez

Estudiante

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

Estudiante

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

Ejercicio de crear cupones de descuento

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

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

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

Playground: Transforma Objetos en Arrays

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

Todos los cursos GRATIS

Resumen