Calculando descuentos con JavaScript

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:0015:42

Calculando descuentos con JavaScript

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

Clase 6 de 27

Clase 6 / 27

Lucino Adan Pelcastre Roblero

Hace 4 años

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>Descuentos</title>
    <link rel="stylesheet" href="./css/discounts.css" />
  </head>
  <body>
    <main>
      <a class="linkHome" href="/">Regresar</a>
      <section class="card__container">
        <h5 class="main--title">Descuentos</h6>
        <form action="">
          <input type="number" id="price" autofocus />
          <label class="price" for="price"
            ><span class="label-text">Precio</span></label
          >

          <input type="number" id="discount" maxlength="2" />
          <label class="discount" for="discount"
            ><span class="label-text">Descuento</span></label
          >

          <div id="couponSection" style="display: none">
            <input
              autocomplete="off"
              type="text"
              id="couponId"
              autofocus
            /><label class="coupon" for="couponId">
              <span class="label-text">CUPON</span>
            </label>
          </div>
          <button id="toggleButton" type="button">
            Dame un clic para cambiar tu cupon!!!
          </button>

          <div id="emptyValue"></div>

          <div class="table">
            <div class="table--container">
              <div id="Pprice"></div>
              <div id="Pdiscount"></div>
              <div id="Pcoupon"></div>
              <div id="resultDiscount"></div>
            </div>
          </div>
          <div>
            <p></p>
            <p></p>
          </div>
        </form>
      </section>
    </main>

    <script src="./js/index.js"></script>
    <script src="./js/showInputSection.js"></script>
    <script src="./js/couponReader.js"></script>
    <script src="./DB/Coupons.js"></script>
  </body>
</html>

const couponReader = () => {
  const inputCouponValue = couponId.value;

  const couponValue = coupons.map((item) => {
    // console.log(item.coupon);
    if (item.coupon === inputCouponValue) {
      return item.discount;
    }
  });
  let strWithoutComma = couponValue.join('');
  const match = couponValue.filter((item) => item !== undefined);
  const inputPrice = parseFloat(price.value);
  const couponCalculate = (inputPrice * (100 - match)) / 100;

  if (match.length > 0) {
    console.log('Hay match', match[0]);
    console.log({ couponCalculate });
    Pcoupon.innerHTML = `
      <div class="table--content">
        <p>Cupon utilizado</p>
        <p>${!inputCouponValue == '' ? inputCouponValue : '0'}</p>
      </div>`;
    Pdiscount.innerHTML = `
      <div class="table--content">
        <p>Descuento</p>
        <p>${!strWithoutComma == '' ? strWithoutComma : '0'}%</p>
      </div>`;
    resultDiscount.innerHTML = `
      <div class="table--content">
        <p>Precio Total</p>
        <p>$${!couponCalculate == '' ? couponCalculate : '0'}</p>
      </div>`;
    console.log(parseFloat(couponValue));
  } else {
    console.log('no hay match');
  }
  console.log(inputCouponValue);
};

couponId.addEventListener('input', couponReader);

const coupons = [
  { coupon: 'FEBRERO-2023', discount: 20 },
  { coupon: 'MARZO-2023', discount: 30 },
  { coupon: 'ABRIL-2023', discount: 40 },
  { coupon: 'MAYO-2023', discount: 50 },
  { coupon: 'JUNIO-2023', discount: 80 },
  { coupon: 'JULIO-2023', discount: 90 },
];

const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
const resultDiscount = document.querySelector('#resultDiscount');
const emptyValue = document.querySelector('#emptyValue');
const Pprice = document.querySelector('#Pprice');
const Pdiscount = document.querySelector('#Pdiscount');
const couponId = document.querySelector('#couponId');

const calculateDiscount = () => {
  const inputPrice = parseFloat(price.value);
  const inputDiscount = parseFloat(discount.value);

  if (inputPrice <= 0 || inputPrice == '') {
    emptyValue.innerHTML =
      '<p class="message">Ingrese el precio y el descuento(no mayor a 100%) en los campos correspondientes 😊</p>';
    return;
  }
  if (inputDiscount > 100) {
    emptyValue.innerHTML =
      '<p class="message">Ingrese el precio y el descuento(no mayor a 100%) en los campos correspondientes 😊</p>';
    return;
  }

  const calculate = (inputPrice * (100 - inputDiscount)) / 100;
  Pprice.innerHTML = `
      <div class="table--content">
        <p>Precio</p>
        <p>$${!inputPrice == '' ? inputPrice : '0'}</p>
      </div>`;
  Pdiscount.innerHTML = `
      <div class="table--content">
        <p>Descuento</p>
        <p>${!inputDiscount == '' ? inputDiscount : '0'}%</p>
      </div>`;
  resultDiscount.innerHTML = `
      <div class="table--content">
        <p>Precio Total</p>
        <p>$${!calculate == '' ? calculate : '0'}</p>
      </div>`;
};

price.addEventListener('input', calculateDiscount);
discount.addEventListener('input', calculateDiscount);

css

body {
  height: 100vh;
  background-image: url('../../../assets/bgClr.jpg');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: hidden;
}
main {
  display: grid;
  place-content: center;
  height: 100vh;
}
.linkHome {
  position: absolute;
  top: 5vh;
  left: 5vw;
  color: #fff;
  font-size: 25px;
}

.card__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  width: 740px;
  /* max-width: 360px; */
  height: 590px;
  background: linear-gradient(
    109.56deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 126.32%
  );
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 20px 100px rgba(255, 255, 255, 0.19),
    0 20px 100px rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(30px);
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.main--title {
  position: absolute;
  top: 0;
  font-size: 30px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 25px;
}
form {
  position: relative;
  width: 80%;
  margin-top: 80px;
}
textarea {
  resize: none;
}
input,
textarea {
  width: 100%;
  margin: 15px 0;
  padding: 8px;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: inherit;
}
input:focus,
textarea:focus {
  outline: 0;
}
label {
  position: absolute;
  left: 0;
  width: 100%;
}
label::before,
label::after {
  content: ' ';
  position: absolute;
  height: 2.25em;
  width: 5%;
  border-width: 1px;
  border-style: solid;
  pointer-events: none;
  transition: 0.75s;
  z-index: 1;
}
label::before {
  border-right: 0;
}
label::after {
  right: 0;
  border-left: 0;
}
.label-text {
  position: absolute;
  right: 0;
  display: block;
  padding: 0.5em 1em;
  background: linear-gradient(
    109.56deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 126.32%
  );
  transition: 0.5s;
}
.label-text::after {
  content: ' ';
  display: block;
  border-top: 1px solid;
  transition: 0.5s;
}
input:focus + label::before,
input:focus + label::after {
  width: 50%;
}
input:focus + label .label-text {
  transform: translate3d(100%, 0, 0);
}
input:focus + label .label-text::after {
  width: 1em;
  transform: translate3d(-100%, -0.75em, 0);
}
#price {
  color: #dbcdd9;
}
#discount {
  color: #bcafd1;
}

#couponId:focus + label::before,
#couponId:focus + label::after,
#discount:focus + label::before,
#discount:focus + label::after,
#price:focus + label::before,
#price:focus + label::after {
  border-color: #fff;
}

.price {
  color: #fff;
  top: 0.5em;
}
.coupon::before,
.coupon::after,
.discount::before,
.discount::after,
.price::before,
.price::after {
  border-color: rgba(219, 205, 217, 0.3);
  top: 0;
}
.discount {
  color: #fff;
  top: 3.85em;
}
.coupon {
  top: 7.18em;
}
.couponSection input {
  padding: 5px;
}

.table {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-end;
  /* height: 100%; */
}

.table--container {
  display: flex;
  flex-direction: column;
}

.table--content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
.message {
  position: absolute;
}
#toggleButton {
  position: relative;
  width: 100%;
  margin: 15px 0;
  padding: 8px 0;
  background: transparent;
  color: #dfa6b9;
  border: 1px solid;
  font-size: bold;
  font-size: 18px;
  transition: 0.3s;
}
#toggleButton:hover {
  background: rgba(233, 22, 93, 0.2);
}

@media (min-width: 660px) and (max-width: 856px) {
  body {
    max-width: calc(100% - 12em);
  }
}

Yimi Alejandro Gaviria Escobar

Hace 3 años

gracias a tu codigo conoci algo nuevo hoy, muchas gracias

Comentarios (91)91 comentarios

Juan Fernando Yepes Muñoz

Juan David Reyes

Carlos Andres Alavez Santiago

Paul Vazquez Cervantes

Nestor Rios Garcia

Laura Roa

Orlando Rodriguez

Sergio Alejandro Saldaña Rangel

Gustavo Muñiz Barrios

Miguel Negron Garcia

Fabian Camilo Huertas Suarez

Sebastián Ricardo Ochoa Pete

Roberto Fernández Romero

Stivenson David Mejia Palacios

Juan Castro

Profesor

Ricardo Alfonso Chavez Vilcapoma

Sebastián Caraballo Marzola

Josue Cerron Tuesta

Ivan Camilo Buitrago Buitrago

Héctor Galindo

Luis Miguel Rodríguez

Irving Saenz

Brandon Cortes Rivera

Estefania Ballesteros

Jesús Eduardo Vásquez Monsalve

Kevin Daniel Hincapie Lumbaque

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

Calculando descuentos con JavaScript