JavaScript Challenges

1) Crear una función para calcular la altura de un triángulo isósceles. La función debe recibir, como parámetros, la longitud de los 3 lados del triángulo. La función debe validar que la longitud de los 3 lados del triángulo corresponden a un triángulo isósceles. La función debe retornar la altura del triángulo.

Fórmula:
Tenemos que según el teorema de pitágoras:
(base/2)² + altura (h)² = lado² (a)
por lo tanto, en nuestro caso:
h = √(a² - base²/4)

const e1BtnCalc = document.querySelector("#e1 .btn__calc");
e1BtnCalc.addEventListener("click", () => {
  let a = document.querySelector(".input__a").value;
  let b = document.querySelector(".input__b").value;
  let c = document.querySelector(".input__c").value;
  let h = 0;
  if (a === "" || b === "" || c === "") {
    document.querySelector(
      "#e1 .result"
    ).innerHTML = \`Debes introducir tres números\`;
  } else {
    if (a === b && c < (2 * a || 2 * b)) {
      h = Math.sqrt(a * a - (c * c) / 4).toFixed(2);
      document.querySelector(
        "#e1 .result"
      ).innerHTML = \`Es un triangulo isósceles: Lado 1 = \${a} Lado 2 = \${b} Base = \${c} Altura = \${h}\`;
    } else if (a === c && b < (2 * a || 2 * c)) {
      h = Math.sqrt(a * a - (b * b) / 4).toFixed(2);
      document.querySelector(
        "#e1 .result"
      ).innerHTML = \`Es un triangulo isósceles: Lado 1 = \${a} Lado 2 = \${c} Base = \${b} Altura = \${h}\`;
    } else if (c === b && a < (2 * c || 2 * b)) {
      h = Math.sqrt(c * c - (a * a) / 4).toFixed(2);
      document.querySelector(
        "#e1 .result"
      ).innerHTML = \`Es un triangulo isósceles: Lado 1 = \${c} Lado 2 = \${b} Base = \${a} Altura = \${h}\`;
    } else {
      document.querySelector("#e1 .result").innerHTML =
        "No es un triangulo isósceles";
    }
  }
});

2) Calcular el precio final de un determinado producto después de aplicarle un descuento mediante cupones válidos.

const coupons = [];
const btnAddCoupon = document.querySelector("#e2 .btn__add-coupon");
const btnDelCoupon = document.querySelector("#e2 .btn__del-coupon");
const btnCalcPrice = document.querySelector("#e2 .btn__calc-price");

btnAddCoupon.addEventListener("click", () => {
  const inputCouponName = document.querySelector(
    "#e2 .input__coupon-name"
  ).value;
  const inputDiscountValue = document.querySelector(
    "#e2 .input__coupon-discount"
  ).value;
  const couponsList = document.querySelector("#e2 .coupons-list");
  const couponInfo = document.querySelector("#e2 .info");

  if (
    inputCouponName === "" ||
    inputDiscountValue < 1 ||
    inputDiscountValue > 99
  ) {
    couponInfo.innerHTML = ` Introduce nombre y número entre 1 - 99`;
    setTimeout(() => {
      couponInfo.innerHTML = "";
    }, 3000);
  } else {
    coupons.push({
      name: inputCouponName,
      discount: Number(inputDiscountValue),
    });

    const allCouponsNames = coupons.map((coupon) => coupon.name);
    couponsList.innerHTML = `'${allCouponsNames}'`;
  }
});

btnDelCoupon.addEventListener("click", () => {
  coupons.pop();
  const allCouponsNames = coupons.map((coupon) => coupon.name);

  if (coupons.length == 0) {
    document.querySelector(
      "#e2 .coupons-list"
    ).innerHTML = `No hay cupones disponibles.`;
  } else {
    document.querySelector(
      "#e2 .coupons-list"
    ).innerHTML = `'${allCouponsNames}'`;
  }
});

btnCalcPrice.addEventListener("click", () => {
  const inputPrice = Number(document.querySelector("#e2 .input__price").value);
  const inputCoupon = document.querySelector("#e2 .input__coupon").value;
  const couponError = document.querySelector("#e2 .error");

  //Función para buscar cupón en una lista de cupones, devuelve true si coincide su nombre con el introducido por el usuario
  let couponSearch = (coupon) => {
    return coupon.name === inputCoupon;
  };
  // Valida que el nombre del cupón se encuentra en la lista de cupones
  let couponValidation = coupons.find(couponSearch);

  // Si existe el cupón obtenemos el descuento y calculamos precio final
  if (!couponValidation) {
    couponError.innerHTML = ` El cupón "${inputCoupon}" no existe`;
    setTimeout(() => {
      couponError.innerHTML = "";
    }, 3000);
  } else {
    let discount = couponValidation.discount;
    let finalPrice = inputPrice - inputPrice * (discount / 100);
    document.querySelector(
      "#e2 .result"
    ).innerHTML = `El cupón introducido le aplicará un descuento del ${discount} % 
 El precio final es ${finalPrice.toFixed(
      2
    )} €`;
  }
});

3) Calcular el promedio (media aritmética), mediana y moda (elemento que más se repite) de una lista.

const numbersList = [];
const btnAddNumber = document.querySelector("#e3 .btn__add-number");
const btnDelNumber = document.querySelector("#e3 .btn__del-number");
const btnCalcMedia = document.querySelector("#e3 .btn__calc-media");
const btnCalcMediana = document.querySelector("#e3 .btn__calc-mediana");
const btnCalcModa = document.querySelector("#e3 .btn__calc-moda");
const showNumberList = document.querySelector("#e3 .show-number-list");

btnAddNumber.addEventListener("click", () => {
  numbersList.push(
    Number(document.querySelector("#e3 .input__add-number").value)
  );
  showNumberList.innerHTML = `Lista actual es = (${numbersList})`;
});

btnDelNumber.addEventListener("click", () => {
  numbersList.pop();
  if (numbersList.length == 0) {
    showNumberList.innerHTML = `La lista está vacía`;
  } else {
    showNumberList.innerHTML = `Lista actual es = (${numbersList})`;
  }
});

btnCalcMedia.addEventListener("click", () => {
  let suma = 0;
  for (i = 0; i < numbersList.length; i++) {
    suma += numbersList[i];
  }
  let result = suma / numbersList.length;
  document.querySelector(
    "#e3 .result"
  ).innerHTML = `La media aritmética de la lista es = ${result.toFixed(2)}`;
});

btnCalcMediana.addEventListener("click", () => {
  let listaOrdenada = numbersList.sort((a, b) => a - b);
  let mediana;

  if (listaOrdenada.length % 2 == 0) {
    mediana = numbersList[parseInt(listaOrdenada.length / 2)];
  } else {
    mediana = numbersList[parseInt(listaOrdenada.length / 2)];
  }

  document.querySelector(
    "#e3 .result"
  ).innerHTML = `La lista ordenada es: (${listaOrdenada}) 

  La mediana es = ${mediana}`;
});

4) Rueda dado.

dado

document.querySelector("#e4 .btn__roll-dice ").addEventListener("click", () => {
document.querySelector("#e4 .img-dice").src = "img/rollingdice.gif";
setTimeout(() => {
  let diceNumber = Number(Math.floor(Math.random() * (6 - 1 + 1)) + 1);
  document.querySelector(
    "#e4 .result"
  ).innerHTML = `Has sacado un: ${diceNumber}`;
  switch (diceNumber) {
    case 1:
      document.querySelector("#e4 .img-dice").src = "img/dado_1.jpg";
      break;
    case 2:
      document.querySelector("#e4 .img-dice").src = "img/dado_2.jpg";
      break;
    case 3:
      document.querySelector("#e4 .img-dice").src = "img/dado_3.jpg";
      break;
    case 4:
      document.querySelector("#e4 .img-dice").src = "img/dado_4.jpg";
      break;
    case 5:
      document.querySelector("#e4 .img-dice").src = "img/dado_5.jpg";
      break;
    case 6:
      document.querySelector("#e4 .img-dice").src = "img/dado_6.jpg";
      break;
  }
}, 3000);
});