Funcionó 😂
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
Reto: calcula otros tipos de promedio
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
Reto: extiende tu análisis salarial
Próximos pasos
Toma el Taller Práctico de JavaScript: Videojuegos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
14 Días
15 Hrs
29 Min
34 Seg
Cómo calcular porcentajes
6/30Recursos
Aportes 96
Preguntas 0
Ordenar por:
Recordatorio: al momento de generar el evento para el calculo, usar el metodo preventDefault() para cancelar su acción por defecto(refrescar pagina) e imprima el total en elemento HTML de su preferencia 💚.
Codio JS💛
// selectors
let inputPrice = document.querySelector('.price');
let inputDiscount = document.querySelector('.amount');
const btn = document.querySelector('.btn__calc');
const result = document.querySelector('.result__amount');
btn.addEventListener('click', totalAmount);
function totalAmount(event) {
console.log({event})
// d = price * (100 - discount) / 100
event.preventDefault();
const price = inputPrice.value;
const discount = inputDiscount.value;
const newPrice = (price * (100 - discount)) / 100;
result.innerHTML = 'Total Amount: $' + newPrice
}
Les comparto mi solución al reto de esté módulo. 😄
Cualquier comentario es bienvenido.
Repositorio de GitHub
El mío es muy sencillo artísticamente pero agregue otro botón con la opción de aumentar el precio
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>porcentajes</title>
</head>
<body>
<input type="number" class="numero" placeholder="Numero"><br><br>
<input type="number" class="porcentaje" placeholder="Porcentaje a calcular"><br><br>
<input type="button" value="aumentar" class="aumentar"><br><br>
<input type="button" value="disminuir" class="disminuir"><br><br>
<p class="resultado"></p>
<script src="./main.js"></script>
</body>
</html>
JS
let aumentar = document.querySelector(".aumentar");
let disminuir = document.querySelector(".disminuir");
let resultado = document.querySelector(".resultado");
aumentar.addEventListener("click", sumar);
disminuir.addEventListener("click", restar);
function sumar() {
let numero = parseFloat(document.querySelector(".numero").value);
let porcentaje = parseFloat(document.querySelector(".porcentaje").value);
aumentarPrecio = (numero * (100 + porcentaje)) / 100;
resultado.innerHTML ="Su nuevo precio con el aumento de " + porcentaje + "% es " + aumentarPrecio;
}
function restar() {
let numero = parseFloat(document.querySelector(".numero").value);
let porcentaje = parseFloat(document.querySelector(".porcentaje").value)
disminuirPrecio = (numero * (100 - porcentaje)) / 100;
resultado.innerHTML = "Su nuevo precio con el descuento de " + porcentaje + "% es " + disminuirPrecio;
}
Mi aporte (hay mucho que limpiar. Se aceptan sugerencias.) :
/******************* PRECIOS Y DESCUENTOS***********************/
const app = document.getElementById('app');
const br = document.createElement('br');
/* Creating a label and an input. */
const label1 = document.createElement('label');
label1.innerHTML = '<b>Price:</b> ';
const input1 = document.createElement('input');
input1.setAttribute('type', 'number')
/* Creating a label and an input. */
const label2 = document.createElement('label');
label2.innerHTML = '<b>Discount:</b> ';
const input2 = document.createElement('input');
input2.setAttribute('type', 'number');
const btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.innerText = 'Get Discount';
const p = document.createElement('p');
p.innerHTML = '<b style="color:blue">Total payment:</b> '
btn.addEventListener('click', () => {
const span = document.createElement('span');
let discount = (input1.value * (100 - input2.value)) / 100;
span.innerText = `$${discount}`;
p.appendChild(span);
});
app.appendChild(label1);
label1.appendChild(input1);
// app.appendChild(br);
app.appendChild(label2);
label2.appendChild(input2);
app.appendChild(btn);
app.appendChild(br);
app.appendChild(p);
No se si era la manera que tenia que hacer lo del descuento, pero mi solucion es esta:
HTML
<code>
<!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">
<link rel="stylesheet" href="style.css">
<title>Calcula tu descuento</title>
</head>
<body>
<section class="main-containerz">
<div class="disc-container">
<h1>Calcula tu descuento</h1>
<label>Ingresa el Precio</label>
<input type="text" id="price">
<label>Ingresa el descuento</label>
<input type="text" id="discount">
<button onclick="descuento()" id="btn">Generar Descuento</button>
<span id="result"></span>
</div>
</section>
<script src="discount.js"></script>
</body>
</html>
Codigo Javascript
<code>
function descuento() {
const price = document.querySelector('#price').value;
const discount = document.querySelector('#discount').value;
const result = document.querySelector('#result');
const total = price*(100-discount)/100
result.innerText = "El descuento sera de " + total;
}
Aquí mi aporte
<form action="" method="post">
<label for="InputPrice">Escribe el precio de tu producto:</label>
<input id="InputPrice" type="number" placeholder="Inserte números..">
<label for="InputDiscount">Escribe el descuento de tu producto:</label>
<input id="InputDiscount" type="number" placeholder="Inserte números..">
<button type="button" onclick="onClickButtonPriceDiscount()">
Calcular el precio con descuento
</button>
<p id="resultPrice"></p>
</form>
function calcularPrecioConDescuento(precio, descuento){
const porcentajePrecioConDescuento = 100 - descuento
const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100
return precioConDescuento
}
function onClickButtonPriceDiscount(){
const InputPrice = document.getElementById("InputPrice")
const priceValue = InputPrice.value
const InputDiscount = document.getElementById("InputDiscount")
const discountValue = InputDiscount.value
const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue)
const resultPrice = document.getElementById("resultPrice")
resultPrice.innerText = "El precio con descuento son: $" + precioConDescuento
}
Que lindo saludar y ser saludado dicen en mi pais Colombia 🤭
Les comparto la funcionalidad y el codigo:
<form action="">
<input class="valorProducto" type="number" placeholder="Valor del producto">
<input class="porcentajeDescuento" type="number" placeholder="Porcentaje de descuento">
<button type="button">calcular</button>
</form>
const valorProducto = document.querySelector('.valorProducto');
const porcentajeDescuento = document.querySelector('.porcentajeDescuento');
const btnDescuentoProducto = document.querySelector('button');
btnDescuentoProducto.addEventListener('click', calcularDescuentoProducto);
function calcularDescuentoProducto () {
const precioFinal = valorProducto.value * (100 - porcentajeDescuento.value) / 100;
return alert(`El valor del producto con descuento es de ${precioFinal}`);
}
Le agregué unos pocos estilos de una forma rápida,
HTML
<body>
<h1>Taller de Matemáticas con JS</h1>
<p>Ingresa la cantidad y el porcentaje para optener el descuento y el precio total</p>
<form id="Form">
<input id="Precio" placeholder="Escribe el precio" type="number">
<input id="Descuento" placeholder="Escribe el descuento sin "%"; " type="number">
<button type="button" id="btnCalcular">Calcular</button>
<p id="resultDescuento">Descuento total</p>
<p id="result">Precio total</p>
</form>
<script src="./math.js"></script>
JS
const precioInicial = document.getElementById('Precio');
const porcentajeDeDescuento = document.getElementById('Descuento');
const btnCalcular = document.getElementById('btnCalcular');
const pResult = document.getElementById('result');
const pDescuento = document.getElementById('resultDescuento');
btnCalcular.addEventListener("click", calcularTotalDelPrecio);
function calcularTotalDelPrecio() {
const porcenjateDelValor = ((100 - porcentajeDeDescuento.value) / 100);
const precioConDescuento = precioInicial.value * porcenjateDelValor;
const descuentoDelPrecio = precioInicial.value - precioConDescuento;
console.log(porcenjateDelValor);
console.log(porcentajeDeDescuento.value)
console.log("precio con descuento " + descuentoDelPrecio);
pDescuento.innerText = "El descuento total es de: " + descuentoDelPrecio.toFixed(2);
pResult.innerText = "El precio final de tu producto es: " + precioConDescuento;
}
Este es el resultado de sangre sudor y lagrimas 😣
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<title>Calcula tu descuento</title>
<style>
:root {
--lila: #B1AFFF;
--cielo: #B8E8FC;
--limon: #C8FFD4;
--lima: #FDFDBD;
--text-input-field: #8b8989;
--sm: 14px;
--md: 16px;
--lg: 18px
}
body {
background: white;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Josefin Sans', sans-serif;
margin-top: 100px;
}
.cupon-descuento {
background: var(--limon);
display: flex;
border: 1px var(--lila);
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
height: 500px;
}
.cupon-descuento img {
width: 250px;
height: 200px;
border-radius: 5px;
}
.title {
text-align: center;
font-size: var(--sm);
}
.botones {
display: flex;
flex-direction:row;
}
.botones button {
background: var(--lila);
border: transparent;
border-radius: 5px;
width: 150px;
height: 50px;
margin: 10px 10px;
font-family: 'Josefin Sans', sans-serif;
margin-top: 10px;
}
.price, .discount {
display: flex;
flex-direction: column-reverse;
align-items: center;
margin-bottom: 0;
margin-top: 5px;
}
.precio, .descuento {
width: 150px;
height: 20px;
border: transparent;
border-radius: 4px;
margin-bottom: 10px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="cupon-descuento">
<div class="title">
<h1> Calcule el precio neto de su compra</h1>
</div>
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7agkGdALMlUFh8RfdDy3vBx0x0kl8jh_G_A&usqp=CAU" alt="cupon de descuento">
</div>
<div class="price">
<input class="precio" type="number" placeholder="$"></input>
<label for="precio"> Ingrese el precio de su compra</label>
</div>
<div class="discount">
<input class="descuento" type="number" placeholder="%"> </input>
<label for="descuento"> Ingrese el porcentaje de descuento de su cupón</label>
</div>
<div class="oferta">
</div>
<div class="botones">
<button class="btn-calcular">Calcular</button>
<button type="reset" class="btn-reset"> Reiniciar</button>
</div>
</div>
</body>
<script>
const precio = document.getElementsByClassName('precio')[0];
const descuento = document.getElementsByClassName('descuento')[0];
const oferta = document.getElementsByClassName('oferta')[0];
const btnCalcular = document.getElementsByClassName('btn-calcular')[0];
const btnReset = document.getElementsByClassName('btn-reset')[0];
const precioDescuento = precio.value*(100-descuento.value)/100;
btnCalcular.addEventListener('click', calcularDescuento);
btnReset.addEventListener('click', _ => {location.reload();})
function calcularDescuento() {
const precioDescuento = "El costo de su compra es de: $" + precio.value*(100-descuento.value)/100;
const ofertaProducto = document.createElement('span');
ofertaProducto.innerText = precioDescuento;
oferta.appendChild(ofertaProducto)
btnCalcular.disabled = true;
}
</script>
</html>
PD: Gracias Teff por las enseñanzas 🤗
Reto cumplido
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>Saca tu cuenta!</title>
</head>
<body>
<h1>Estamos de ofertas!!!</h1>
<label for="monto">Introduzca el monto</label>
<input type="number" name="pruebaaa" id="monto">
<label for="descuento">Descuento</label>
<input type="number" id="descuento">
<button type="submit" id="btn">Enviar</button>
<p id="text">Muy sencillo, coloca el monto, luego abajo coloca el descuento y pulsa el boton de Enviar.</p>
<script src="./retoPorcentaje.js"></script>
</body>
</html>
JavaScript
const monto = document.getElementById("monto");
const descuento = document.getElementById("descuento");
const btn = document.getElementById("btn")
const texto = document.getElementById("text");
btn.addEventListener("click", cuentaTotal)
function cuentaTotal(){
const total = (monto.value) - (monto.value * (descuento.value / 100));
console.log(total);
texto.innerText = `El monto total a pagar es de: $${total}`;
}
tuve que volver al curso practico de javascript básico y recordar un poco sobre la manipulación del Doom para darle el lado interactivo en una web, quedo genial 😄
Otra forma de calcular descuento:
es dividir el porcentaje de descuento entre 100, para convertirlo en un decimal. Por ejemplo, si queremos calcular un descuento que es del 40%, debemos dividir 40 entre 100, y ya tenemos el decimal que es 0,4.
Una vez que tengamos este decimal, lo multiplicaremos por el descuento convertido en decimal por el precio original, y de esta manera conseguiremos saber el porcentaje de descuento.
Ejemplo: La prenda vale 120 y el descuento es del 40%
40 / 100 = 0,40
Descuento = precio * decimal
Descuento = 120 * 0,40 = 48
Esta fue mi solución:
<code>
const input = document.getElementById("calculo")
const input1 = document.getElementById("calculo1")
const boton = document.getElementById("btn_calcular")
const resultdo1 = document.getElementById("resultado")
function btnonclick (e) {
e.preventDefault();
const value1= parseInt(input.value)
const value2=parseInt(input1.value)
const resultado=( value1*(100-value2))/100
//(p.value*(100-d.value))/100
resultdo1.innerText = "el resultado es:"+resultado;
}
const form = document.getElementById("form");
const escuchar= form.addEventListener('submit',btnonclick, )
Mi intento para hacerlo “dinámico” y que el precio final se actualice cada vez que el usuario cambia el precio o el descuento:
HTML
<form action="" class="percentages__form">
<label for="price">Precio completo</label>
<input
class="input"
min="0"
id="price"
type="number"
placeholder="Escribe el precio"
value="100"
/>
<label for="price">Descuento</label>
<input
class="input"
min="0"
max="100"
id="discount"
type="number"
placeholder="Escribe el descuento"
value="0"
/>
<!-- <button id="btnClick" type="button">Calcular precio</button> -->
</form>
<span id="result"></span>
JavaScript
const result = document.querySelector("#result");
const inputPrice = document.querySelector("#price");
const inputDiscount = document.querySelector("#discount");
result.innerText = `Precio con descuento: ${100}`;
const calculateDiscount = (price, discount) => {
return (price * (100 - discount)) / 100;
};
document.querySelectorAll(".input").forEach((element) => {
element.addEventListener("input", () => {
result.innerText = `Precio con descuento del ${
inputDiscount.value
}%: ${calculateDiscount(inputPrice.value, inputDiscount.value)}`;
});
});
HTML
<h1>Calculemos porcentajes de descuentos con JS</h1>
<div class="container">
<p>Ingresa el precio del producto, y el descuento quye quieres aplicar en los siguientes campos:</p>
<label for="price">Precio</label>
<input type="number" id="price">
<label for="desc">% Descuento</label>
<input type="number" id="desc">
<input type="button" value="Calcular" class="buttom">
</div>
JS
const price = document.querySelector('#price');
const descuento = document.querySelector('#desc');
const buttom = document.querySelector('.buttom');
const container = document.querySelector('.container');
buttom.addEventListener('click', calcDescuento);
const resultP= document.createElement('p');
resultP.classList.add('discount');
container.appendChild(resultP);
function calcDescuento(){
resultP.innerHTML='';
if(price.value !== '' && descuento.value !== ''){
let precio = parseInt(price.value);
let desc = parseInt(descuento.value);
let resultadoDescuento = precio * (100 - desc) / 100;
resultP.innerHTML = `Aplicando el descuento el monto es de ${resultadoDescuento}$`;
}
else{
resultP.innerHTML = "Ingresa los datos correspondientes";
}
}
Preview
Mi 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>Calculando porcentajes</title>
<link rel="stylesheet" href="../styles/porcentaje.css">
</head>
<body>
<section>
<h1>Calcula tu proximo descuento</h1>
<form>
<label for="price">
<span>Enter the price of the product</span>
<input id="price" type="number">
</label>
<label for="discount">
<span>Enter the product discount</span>
<input id="discount" type="number">
</label>
<button>Calcular</button>
</form>
<div class="results">
</div>
</section>
<script src="../js/porcentaje.js"></script>
</body>
</html>
Mi codigo
JavaScript
const btn = document.querySelector('button')
btn.addEventListener('click', e => {
e.preventDefault()
const inputDiscount = document.querySelector('#discount').value
const inputPrice = document.querySelector('#price').value
if(inputPrice === '' || inputDiscount === '') {
showResults('Revisa que los campos esten llenos')
}
else {
const price = parseInt(inputPrice)
const discount = parseInt(inputDiscount)
const total = (price * (100 - discount)) / 100
showResults(`${total}$`)
}
})
function showResults(total) {
const div = document.querySelector('.results')
div.removeChild(div.firstChild)
const p = document.createElement('p')
p.innerText = total
div.appendChild(p)
}
Este es mi aporte.
DEMO: https://jmanriquecha.github.io/javascript-math/caja.html
Code: https://github.com/jmanriquecha/javascript-math/tree/main
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./js/porcentaje.js"></script>
<title>Tienda online</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center h2 mt-5 bg-warning">Aprovecha nuestros últimos productos en descuento!</h1>
<h2>Estos son los cupones que tenemos disponibles</h2>
<div id="descuentos"></div>
<p>Ingresa uno de estos cupones para obtener su descueno</p>
<table>
<thead>
<tr>
<th>Producto</th>
<th>Precio sin decuento</th>
<th>Cupon de descuento</th>
<th>Comprar</th>
</tr>
</thead>
<tbody id="contenido"></tbody>
</table>
</div>
</body>
</html>
JAVASCRIPT
//
// Array con los productos
const productos = [
{ producto: 'Nevera', precio: 4599999 },
{ producto: 'Computador', precio: 2999999 },
{ producto: 'Automovil', precio: 99999999 },
{ producto: 'Tablet', precio: 1500999 },
{ producto: 'Celular Android', precio: 1350000 },
{ producto: 'Lavadora', precio: 3000000 },
];
// Array con cupones activos
const cupones = [
{ name: "cincuenta", descuento: 50 },
{ name: "veinticinco", descuento: 25 },
{ name: "quince", descuento: 15 },
{ name: "diez", descuento: 10 }
];
// Mostramos los cupones disponibles
cupones.forEach(cupon => {
let list = `
<ul>
<li>Codigo: <strong>${cupon.name}</strong> cupón ${cupon.descuento}%</li>
</ul>
`;
document.getElementById('descuentos').innerHTML += list;
});
// Se ejecuta cuando carga la aplicación
window.addEventListener('load', function () {
tablaProductos();
rowsTable();
});
// Genera tabla con los productos del array
function tablaProductos() {
for (let i = 0; i < productos.length; i++) {
let tr = `
<tr id='row-${i}'>
<td id='product-${i}'>${productos[i].producto}</td>
<td id='precio-${i}'>${productos[i].precio}</td>
<td><input type='text' id='cupon-${i}' required /></td>
<td><button id='btn-${i}'">Comprar</button></td>
</tr>
`;
document.getElementById('contenido').innerHTML += tr;
}
}
// retorna el valor total despues del descuento
function caja(precio, cupon = null) {
let total = precio;
let descuento = 0;
let msg;
if (cupon === null) {
descuento = 0;
}
for (let i = 0; i < cupones.length; i++) {
if (cupon === cupones[i].name) {
descuento += cupones[i].descuento;
total = (precio * (100 - descuento)) / 100;
}
}
if (descuento === 0) {
msg = `El cupon que ingresaste no es valido! por favor verifica, precio final sin descuentos ${total}`;
} else {
msg = `Total a pagar con descuento del ${descuento}% es $ ${total}`
}
alert(msg);
}
// comprar
// Identifica cada fila
function rowsTable() {
for (let i = 0; i < productos.length; i++) {
let boton = document.getElementById(`btn-${i}`);
boton.addEventListener('click', function () {
let txtCupon = document.getElementById('cupon-' + i).value;
let txtPrecio = document.getElementById('precio-' + i).textContent;
caja(txtPrecio, txtCupon);
});
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Calculador de precio final</h1>
<form action="">
<label for="input-precio">Digita el precio</label>
<input type="number" id="input-precio">
<label for="input-descuento">Digita el % de descuento</label>
<input type="number" id="input-descuento">
<button class="btn-calcular" type="button">Calcular</button>
<p class="Impresion"></p>
</form>
<script src="./retoPrecioPorcentaje.js"></script>
</body>
</html>
const inputPrecio = document.querySelector('#input-precio');
const inputPorcentaje = document.querySelector('#input-descuento');
const impresion = document.querySelector('.Impresion');
const button = document.querySelector('.btn-calcular');
const calculador = () => {
let precioFinal = inputPrecio.value * (100 - inputPorcentaje.value) / 100;
impresion.innerText = `El precion con descuento es de: ${precioFinal}$`;
}
button.addEventListener('click', calculador);
Hola a todos.
Me tarde mas dandole estilo que lo que tarde en hacer el js, XD. Pero me encanto hacerlo, asi practique un poco.
codigo:
const valorPrecio = document.querySelector('.input-precio');
const valorDescuento = document.querySelector('.input-descuento');
const btn_descuento = document.querySelector('.primary-button');
let respuesta = document.querySelector('.respuesta-container');
function aplicarDescuento(p,d){
return Math.floor((p * (100 - d)) / 100);
}
btn_descuento.addEventListener('click',()=>{
const res = aplicarDescuento(Number(valorPrecio.value),Number(valorDescuento.value));
console.log(res);
respuesta.innerText = `Total real: ${res}`;
});
Foto:
![](
<!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>Document</title>
<style>
.title{
text-align: center;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
div{
display: flex;
justify-content: center;
padding-bottom: 20px;
}
section{
display: flex;
justify-content: center;
}
section label, span{
color: rgb(70, 79, 80);
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
font-size: 20px;
}
section input{
border-radius: 10px;
margin: 0 10px 0 10px;
}
main{
display: flex;
justify-content: center;
}
main h2{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
}
main p{
padding-top: 5px;
color: rgb(70, 79, 80);
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="title">Descuento de produtos</h1>
<div>
<img src="./img/OFERTAS.jpg" alt="">
</div>
<section>
<label for="">Precio del producto</label>
<input type="number" class="price">
<label for="">Descuento de producto porcentaje</label>
<input type="number" class="percentage">
<button class="Calculate">Calcular</button>
<span>%🤪👀</span>
</section>
<main>
<h2>Precio descontado es de :</h2>
<p class="result"></p>
<p>$</p>
</main>
<script>
const price = document.querySelector('.price');
const percentage = document.querySelector('.percentage');
const result = document.querySelector('.result')
const buttonCalculate = document.querySelector('.Calculate')
//sacar porcentaje
function discount (thePrice, thePercentage){
let operation = thePrice * (100 - thePercentage) / 100
result.textContent = operation;
}
buttonCalculate.addEventListener('click', function () {
discount(price.value, percentage.value)
})
</script>
</body>
</html>
Aca dejo el mio , lo tome un poco mas avanzado por asi decirlo , lo hice mas complejo y me llevo bastante tiempo
Este es el 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>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header></header>
<section class="hero__section">
<div class="hero__section__container">
<div class="hero__section__container--leftside">
<div class="hero__section__container__left__side__formcontainer">
<h1 class="hero__section__container__left__side__formcontainer--title">Calcula El Porcentaje De Descuento De Tus Compras!</h1>
<p class="hero__section__container__left__side__formcontainer--text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae rem eius doloribus consequatur, accusantium, consectetur ipsum voluptatibus, iure sequi quo reprehenderit pariatur impedit incidunt illum recusandae ducimus cumque non suscipit.</p>
<form class="hero__section__container__left_side__formcontainer--form" action="">
<div class="hero__section__container__left_side__formcontainer--subcontainer">
<div class="hero__section__container__left_side__formcontainer--subcontainer-labelcontainer1">
<label class="hero__section__container__left_side--labelinputnumber" for="hero__section__container__left_side--inputnumber">Ingresa el costo del producto</label>
<img class="hero__section__container__left_side--labelinputnumber-icon1" src="./media/Asset_Coin.svg" alt="">
<img class="hero__section__container__left_side--labelinputnumber-icon3" src="./media/Asset_Stripes.svg" alt="">
</div>
<span class="hero__section__container__left__side--inputicon1">$</span>
<input class="hero__section__container__left__side--inputnumber" type="number" name="" id="">
<div class="hero__section__container__left_side__formcontainer--subcontainer-labelcontainer2">
<label class="hero__section__container__left_side--labelpercent" for="hero__section__container__left_side--inputnumber">Ingresa el porcentaje</label>
<img class="hero__section__container__left_side--labelinputnumber-icon2" src="./media/Asset_DiscountTag.svg" alt="">
<img class="hero__section__container__left_side--labelinputnumber-icon3" src="./media/Asset_Stripes.svg" alt="">
</div>
<span class="hero__section__container__left__side--inputicon1">%</span><input min="0" max="100" class="hero__section__container__left__side--inputpercent" type="number" name="" id="">
<button class="hero__section__container__left__side--buttonsubmit" type="submit">Calcular Porcentaje<img class="hero__section__container__left_side--labelinputnumber-icon2" src="./media/Asset_Play.svg" alt=""></button>
</div>
</form>
</div>
<div class="hero__section__container_left__side__formresults">
</div>
</div>
<div class="hero__section__container--rightside">
<figure class="hero__section__container__rightside--image1">
<img src="media/Asset_ProductsImg.png" alt="">
</figure>
</div>
</div>
</section>
<script src="scripts.js"></script>
</body>
</html>
Esto son los scripts
<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 form1 = document.querySelector('.hero__section__container__left_side__formcontainer--form')
const textresult = document.querySelector('.hero__section__container__left__side__formcontainer--text')
let productvalue1, productpercent1;
form1.addEventListener('submit' , sumadeporcentaje)
function sumadeporcentaje(event){
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';
}>
<!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>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header></header>
<section class="resulthero">
<div class="resulthero__leftcontainer">
<figure class="result__hero__leftcontainer--img1">
<img src="./media/Group 1.svg" alt="">
</figure>
<h2 class="result__hero__leftcontainer--title">Tu Descuento se ha generado</h2>
<p class="result__hero__leftcontainer--text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="result__hero__leftcontainer--buttoncontainer">
<button class=" result__hero__leftcontainer--returnbutton">Realizar otro descuento</button>
<img class="result__hero__leftcontainer--iconbutton" src="./media/Asset_Stripes.svg">
</div>
</div>
<div class="resulthero__rightcontainer">
<div class="resulthero__rightcontainer--innercontainer">
<div class="resulthero__rightcontainer__titlerow1">
<div class="resulthero__rightcontainer__titlerow1--line1"></div>
<p class="resulthero__rightcontainer__titlerow1--text">El Valor Inicial De Tu Producto Es</p>
<div class="resulthero__rightcontainer__titlerow1--line2"></div>
</div>
<div class="resulthero__rightcontainer__titlerow1--productvalue">
<h3 class="resulthero__rightcontainer__titlerow1--productvaluetitle"></h3>
</div>
<div class="resulthero__rightcontainer__titlerow2">
<div class="resulthero__rightcontainer__titlerow2--line1"></div>
<p class="resulthero__rightcontainer__titlerow2--text">El Valor Final De Tu Producto Es</p>
<div class="resulthero__rightcontainer__titlerow2--line2"></div>
</div>
<div class="resulthero__rightcontainer__titlerow2--productfinalvaluecontainer">
<h3 class="resulthero__rightcontainer__titlerow2--productfinalvalue"></h3>
<h3 class="resulthero__rightcontainer__titlerow2--productdiscount">sxsads</h3>
</div>
</div>
</div>
</section>
<script src="scripts2.js"></script>
</body>
</html>
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 + ")";
CSS en general para
@font-face {
font-family: 'ClashDisplay-Extralight';
src: url('./fonts/ClashDisplay-Light.otf') format('otf');
font-weight: 200;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'ClashDisplay-Light';
src: url('./fonts/ClashDisplay-Light.otf') format('otf');
font-weight: 300;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'ClashDisplay-Regular';
src: url('./fonts/ClashDisplay-Regular.otf') format('otf');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'ClashDisplay-Medium';
src: url('./fonts/ClashDisplay-Medium.otf') format('otf');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'ClashDisplay-Semibold';
src: url('./fonts/ClashDisplay-Semibold.otf') format('otf');
font-weight: 600;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'ClashDisplay-Bold';
src: url('./fonts/ClashDisplay-Bold.otf') format('otf');
font-weight: 700;
font-display: swap;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
:root{
--primary-font: 'Orbitron', sans-serif;
--secondary-font: 'ClashDisplay-Light', sans-serif;
--font-size-xlarge: 3.5rem;
--font-size-large: 2rem;
--font-size-medium:1.5rem;
--font-size_small:0.8rem;
--color-bg: #0D2302;
--color-primary: #76B28A;
--color-secondary:#3F6743
}
.hero__section{
background-color: aqua;
width: 100%;
}
.hero__section__container , .resulthero{
background-color: var(--color-bg);
background-image: url(./media/Asset_pattern.svg);
height: 900px;
width: 100%;
display: flex;
flex-direction: row;
}
/* Estilos para el contenedor Izquierdo */
.hero__section__container--leftside{
width: 50%;
display: flex;
flex-direction: column;
}
/* estilos para el contenedor del formularios */
.hero__section__container__left__side__formcontainer{
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
justify-content: center;
height: 100%;
}
.hero__section__container__left_side__formcontainer--form{
width: 100%;
display: flex;
align-items: flex-start;
margin-left:35px
}
.hero__section__container__left_side__formcontainer--subcontainer{
display: flex;
flex-direction: column;
width: 80%;
}
.hero__section__container__left_side__formcontainer--subcontainer-labelcontainer1 , .hero__section__container__left_side__formcontainer--subcontainer-labelcontainer2{
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
padding-top: 20px;
}
.hero__section__container__left__side__formcontainer--title , .hero__section__container__left__side__formcontainer--text{
color: white;
font-family: var(--secondary-font);
padding: 35px;
}
.hero__section__container__left__side__formcontainer--title{
text-transform: uppercase;
text-align: left;
font-family: var(--primary-font);
font-weight: 900;
color: var(--color-primary);
padding: 0px 0px 0px 35px;
font-size: var(--font-size-large);
}
.hero__section__container__left__side__formcontainer--text{
font-weight: 300;
text-align: left;
color: var(--color-primary);
}
.hero__section__container__left_side--labelinputnumber , .hero__section__container__left_side--labelpercent{
color: var(--color-primary);
background-color: var(--color-secondary);
height: 41px;
display: flex;
align-items: center;
width: 90%;
font-family: var(--primary-font);
padding-left: 10px;
}
.hero__section__container__left__side--inputnumber , .hero__section__container__left__side--inputpercent{
color: var(--color-primary);
font-family: var(--primary-font);
font-size: var(--font-size-small);
text-align: right;
z-index: 0;
}
.hero__section__container__left__side--inputnumber:focus ,.hero__section__container__left__side--inputpercent{
color: var(--color-primary);
font-family: var(--primary-font);
font-size: var(--font-size-small);
text-align: right;
z-index: 5;
}
.hero__section__container__left__side--inputicon1{
color: var(--color-primary);
font-family: var(--primary-font);
font-size: var(--font-size-large);
font-weight: 800;
position: relative;
top: 50px;
}
.hero__section__container__left_side--labelinputnumber-icon1{
background-color: var(--color-primary);
padding: 7px;
margin-right: 10px;
}
.hero__section__container__left_side--labelinputnumber-icon2{
background-color: var(--color-primary);
padding: 5px;
margin-right: 10px;
}
.hero__section__container__left_side--labelinputnumber-icon3{
width: 10%;
height: 41px;
}
.hero__section__container__left__side--inputnumber , .hero__section__container__left__side--inputpercent {
background-color: transparent;
border: #76B28A solid 0px;
border-bottom: #76B28C solid 2px;
padding-bottom: 20px;
padding-top: 20px;
}
.hero__section__container__left__side--buttonsubmit{
background-color: transparent;
padding-top: 20px;
border: none;
}
.hero__section__container__left__side--buttonsubmit{
background-color: var(--color-primary);
width: 60%;
margin-top: 20px;
font-family: var(--primary-font);
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
font-weight: 900;
text-transform: uppercase;
font-size: var(--font-size-small);
}
/* Estilos del contenedor derecho */
.hero__section__container--rightside{
width: 50%;
overflow: hidden;
}
.hero__section__container__rightside--image1{
width: 100%;
}
.hero__section__container__rightside--image1 img{
width: 100%;
object-fit: contain;
}
/* estilado para la pagina de resultados */
.resulthero__leftcontainer {
width: 40%;
}
.resulthero__rightcontainer{
width: 60%;
}
.resulthero__leftcontainer{
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
}
.result__hero__leftcontainer--title{
color: var(--color-primary);
font-family: var(--primary-font);
font-weight: 900;
text-transform: uppercase;
font-size: var(--font-size-large);
}
.result__hero__leftcontainer--text{
color: var(--color-primary);
font-family: var(--secondary-font);
font-size: var(--font-size-medium);
}
.result__hero__leftcontainer--buttoncontainer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.result__hero__leftcontainer--returnbutton{
background-color: var(--color-primary);
width: 60%;
margin-top: 20px;
font-family: var(--primary-font);
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
font-weight: 900;
text-transform: uppercase;
font-size: var(--font-size-small);
height: 50px;
border: 0px;
}
.result__hero__leftcontainer--iconbutton{
width: 10%;
margin-top: 18px;
height: 52px;
margin-left: 6px;
}
.resulthero__rightcontainer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(./media/Group\ \(3\).svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: 40px 180px;
}
.resulthero__rightcontainer--innercontainer{
background-color: var(--color-primary);
width: 75%;
height: 350px;
}
.resulthero__rightcontainer__titlerow1,.resulthero__rightcontainer__titlerow2{
display: flex;
flex-direction: row;
align-items: center;
padding-top: 20px;
}
.resulthero__rightcontainer__titlerow1--line1, .resulthero__rightcontainer__titlerow1--line2 ,.resulthero__rightcontainer__titlerow2--line1 , .resulthero__rightcontainer__titlerow2--line2{
background-color: black;
width: 5%;
height: 1px;
}
.resulthero__rightcontainer__titlerow1--line1,.resulthero__rightcontainer__titlerow2--line1{
margin-left: 20px;
}
.resulthero__rightcontainer__titlerow1--line2,.resulthero__rightcontainer__titlerow2--line2{
width: 40% !important;
}
.resulthero__rightcontainer__titlerow1--text,.resulthero__rightcontainer__titlerow2--text{
font-family: var(--secondary-font);
font-size: 1.2rem;
text-transform: uppercase;
font-weight: 500;
padding-left: 20px;
padding-right: 20px;
width: auto;
}
.resulthero__rightcontainer__titlerow1--productvaluetitle,.resulthero__rightcontainer__titlerow2--productfinalvalue ,.resulthero__rightcontainer__titlerow2--productdiscount{
padding-top: 10px;
font-family: var(--primary-font);
font-size: var(--font-size-xlarge);
font-weight: 1000;
margin-left: 20px;
}
.resulthero__rightcontainer__titlerow1--productvaluetitle ,.resulthero__rightcontainer__titlerow2--productdiscount{
color: #568761;
}
.resulthero__rightcontainer__titlerow2--productdiscount{
font-size: var(--font-size-large) !important;
}
.resulthero__rightcontainer__titlerow2--productfinalvaluecontainer{
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
asi me quedo:
Este es el codigo:
html
<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>Porcentajes y descuentos</title>
<style>
.box{
width: 70%;
height: auto;
margin: 0px auto;
text-align: center;
background-color: #ddd;
}
.box__content{
display: inline-block;
width: 42%;
}
.box__content--button{
display: inline-block;
background-color: #fff;
}
.box__content--result{
width: 56%;
height: 81px;
margin: 14px auto;
text-align: center;
background-color: gray;
}
.box__content--result__title{
margin: 1px 1px;
padding-top: 7px;
}
.box__content--result__result{
width: 76%;
height: 41%;
line-height: 29px;
margin-top: 10px;
margin: 7px auto 0px;
text-align: center;
background-color: white;
}
</style>
</head>
<body>
<div class="box">
<h1 class="box__title">!!CALCULA TU DESCUENTO</h1>
<div class="box__content">
<input class="box__input1" type="number">
</div>
<div class="box__content--button">
<button onclick="descuento()" class="box__content--button__button">
Calcular
</button>
</div>
<div class="box__content">
<input class="box__input2" type="number">
</div>
<div class="box__content--result">
<h3 class="box__content--result__title">RESULTADO</h3>
<p class="box__content--result__result"></p>
</div>
</div>
<script src="./descuentos.js"></script>
</body>
Javascript:
const input1 = document.querySelector('.box__input1');
const input2 = document.querySelector('.box__input2');
const result = document.querySelector('.box__content--result__result');
function descuento(){
result.innerHTML = input1.value * (100 - input2.value) / 100;
}
<"use strict";
const price = document.querySelector(".js-price");
const descount = document.querySelector(".js-descount");
const finalPrice = document.querySelector(".js-finalPrice");
const btnCalculate = document.querySelector(".js-calculate");
const btnClear = document.querySelector(".js-clear");
function calculateFinalPrice(ev) {
ev.preventDefault();
const result = (price.value * (100 - descount.value)) / 100;
finalPrice.innerHTML = result;
}
function clear() {
price.innerHTML = "";
descount.innerHTML = "";
finalPrice.innerHTML = "";
}
btnCalculate.addEventListener("click", calculateFinalPrice);
btnClear.addEventListener("click", clear);
>
Calcular Porcentajes
Resultado ✍🏻
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" />
<link rel="stylesheet" href="./discount.css" />
<title>Calculadora de Descuentos</title>
</head>
<body>
<section>
<h1>Calculadora de Descuentos</h1>
<p>
Ingresa el precio original y el descuento a aplicar para calcular el
precio final.
</p>
<form>
<input
type="number"
id="original"
placeholder="Ingresa el precio original"
min="0"
/>
<input
type="number"
id="discount"
placeholder="Ingresa el descuento"
min="0"
max="100"
/>
<button type="button" id="calculate">Calcular</button>
</form>
<p id="result"></p>
</section>
<script src="discount.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: aquamarine;
}
section {
width: max-content;
padding: 2rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
font-size: 2.5rem;
font-weight: 500;
margin: 2rem 0;
}
p {
margin-bottom: 2rem;
font-size: 1.3rem;
font-weight: 300;
}
form {
display: flex;
flex-direction: column;
width: 300px;
margin: 0 auto;
}
form input {
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}
form button {
padding: 0.5rem;
border: none;
border-radius: 5px;
background-color: #ccc;
font-size: 1rem;
cursor: pointer;
}
form button:hover {
background-color: #bbb;
}
#result {
text-align: center;
font-size: 1.5rem;
font-weight: 500;
margin-top: 2rem;
}
JAVASCRIPT
const originalPrice = document.querySelector("#original");
const discount = document.querySelector("#discount");
const calculate = document.querySelector("#calculate");
const result = document.querySelector("#result");
calculate.addEventListener("click", () => {
if (originalPrice.value === "" || discount.value === "") {
result.innerHTML = "Por favor, ingrese los datos";
return;
}
if (originalPrice.value < 0 || discount.value < 0) {
result.innerHTML = "Por favor, ingrese valores positivos";
return;
}
const finalPrice = originalPrice.value * (1 - discount.value / 100);
result.innerHTML = `Precio final: ${finalPrice}`;
});
const precio = 100;
const descuento = 15;
function calcularporcentajes (precio,descuento) {
const porcentaje = (precio * descuento) /100;
console.warn( `el descuento de la compra es ${porcentaje}`
)
}
calcularporcentajes(350,50);//175
Aqui mi aporte, en la imagen no se aprecia la interactivida.
Se puede optimizar mas y mejorar la UX pero es un ejercicio rapido.
;
const calcular = document.querySelector('#calcular');
const resultDiscount = document.querySelector('#resultDiscount');
const finalPrice = document.querySelector('#finalPrice');
const boton = document.querySelector(".active-button");
const reloaded = document.querySelector('#button-reload')
boton.addEventListener("mousedown", function() {
boton.classList.add("active-button");
});
reloaded.addEventListener("click", function() {
location.reload();
});
confirmPrice.addEventListener('click', agreepriceManual);
calcular.addEventListener('click', calcularTotal);
var price;
let discount;
var totalPrice;
var totalDiscount;
function agreepriceManual(){
price = document.getElementById('price-input').value;
console.log(price);
if (price > 0){
showDiscountSection()
}
}
function showDiscountSection(){
var discountSection = document.getElementById("discount-container");
discountSection.style.display = "block";
}
function calcularTotal(){
discount = document.getElementById('discount-input').value;
totalDiscount=(discount*price)/100;
resultDiscount.innerHTML = "Total descuento: " + totalDiscount + " €";
totalPrice = (price-totalDiscount);
finalPrice.innerHTML = "El precio final con descuento es de: " + totalPrice + " €";
var totalContainer = document.getElementById("total-container");
if (discount > 0){
totalContainer.style.display = "flex";
}
};
function addArticle1(){
document.getElementById('price-input').value = "100";
console.log(document.getElementById('price-input').value);
agreepriceManual()
showDiscountSection()
}
function addArticle2(){
document.getElementById('price-input').value = "600";
console.log(document.getElementById('price-input').value);
agreepriceManual()
showDiscountSection()
}
function addArticle3(){
document.getElementById('price-input').value = "1359";
console.log(document.getElementById('price-input').value);
agreepriceManual()
showDiscountSection()
}
function addDiscount1(){
document.getElementById('discount-input').value = "10";
console.log(document.getElementById('discount-input').value);
calcularTotal()
}
function addDiscount2(){
document.getElementById('discount-input').value = "15";
console.log(document.getElementById('discount-input').value);
calcularTotal()
}
function addDiscount3(){
document.getElementById('discount-input').value = "30";
console.log(document.getElementById('discount-input').value);
calcularTotal()
}
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@500;700&family=Roboto+Condensed:wght@300;700&family=Roboto+Mono:wght@100;300;700&family=Roboto:wght@100;300;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Tienda Online</title>
</head>
<body>
<section class="container">
<header>
<h1 class="title">TIENDA ONLINE</h1>
</header>
<section class="prices-container">
<h3>Seleccione un articulo o introduzca el precio manualmente.</h3>
<div class="articles">
<button id="article1" class="articles-card active-button" type="button" onclick="addArticle1()">
<p>ARTICULO 1</p>
<p>100€</p>
</button>
<button id="article2" class="articles-card active-button" type="button" onclick="addArticle2()">
<p>ARTICULO 2</p>
<p>600€</p>
</button>
<button id="article3" class="articles-card active-button" type="button" onclick="addArticle3()">
<p>ARTICULO 3</p>
<p>1359€</p>
</button>
</div>
<div class="price-article">
<p>Precio: <input type="number" class="input-manual" id="price-input" placeholder=" Introduzca precio"> €</p>
<button type="submit" id="confirmBtnPrice" class="ConfirmBtn active-button" >Confirmar</button>
</div>
</section>
<section id="discount-container" class="input-manual" style="display: none;">
<h3>Seleccione un descuento o introduzca el descuento manualmente.</h3>
<div class="discounts">
<button id="discount1" class="discount-card active-button" type="button" onclick="addDiscount1()">
<p>DESCUENTO </p>
<p>10%</p>
</button>
<button id="discount2" class="discount-card active-button" type="button" onclick="addDiscount2()">
<p>DESCUENTO 2</p>
<p>15%</p>
</button>
<button id="discount3" class="discount-card active-button" type="button" onclick="addDiscount3()">
<p>DESCUENTO 3</p>
<p>30%</p>
</button>
</div>
<div class="discount-article ">
<p>Descuento: <input type="number" class="input-manual" id="discount-input" placeholder=" Introduzca descuento"> %</p>
<button class="calcular-button active-button" id="calcular">Calcular</button>
</div>
</section>
<section id="total-container" style="display: none;">
<div class="total-discount"><span id="resultDiscount"></span></div>
<div class="total-price"><span id ="finalPrice"></span></div>
<button id="button-reload" class="reload active-button">Hazlo otra vez</button>
</section>
</section>
<script src="./script.js"></script>
</body>
</html>
:root{
/*--Linear-BG: background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);*/
--Header: #FEFF86;
--Prices-section: #B0DAFF;
--discount-section: #B9E9FC;
--total-section: #DAF5FF;
--Warm-Black: #201E1C;
--Warm-Black-1: #282623;
--Grey: #BABABA;
--Off-White: #FAF8F7;
--Just-White: #FFFFFF;
--size-G: 2.2rem;
--size-M: 1.8rem;
--size-S: 1.4rem;
/*
font-family: 'DM Sans', sans-serif;
font-family: 'Inter', sans-serif;
*/
}
*{
box-sizing: border-box;
margin: 0px;
padding: 0;
}
html {
font-size: 62.5%;
font-family: 'DM Sans', sans-serif;
}
.container{
max-width: 920px;
display: flex;
justify-content: center;
flex-direction: column;
margin: 0 auto;
margin-top: 40px;
}
h1{
font-size: var(--size-G);
}
h3{
font-size: var(--size-M);
margin-bottom: 12px;
}
.title{
background-color: var(--Header);
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.prices-container{
background-color: var(--Prices-section);
margin-bottom: 20px;
padding: 8px;
}
.articles{
display: flex;
justify-content: space-around;
margin-bottom: 24px;
}
.articles-card{
width: 120px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--total-section);
border-radius: 8px;
border: none;
}
.articles-card:hover{
cursor: pointer;
background-color: var(--Header);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);;
}
.articles-card :nth-child(1){
font-size: var(--size-S);
font-weight: bold;
margin-bottom: 8px;
}
.articles-card :nth-child(2){
font-size: var(--size-S);
font-weight: bold;
}
.price-article p{
font-size: var(--size-S);
font-weight: bold;
margin: 16px 0px 12px 0px;
}
.input-manual{
border-radius: 4px;
}
.ConfirmBtn{
width: 120px;
height: 30px;
margin: 16px 0px 12px 0px;
font-size: var(--size-S);
font-weight: bold;
background-color: var(--total-section);
border-radius: 8px;
border: none;
}
.ConfirmBtn:hover{
cursor: pointer;
background-color: var(--Header);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);;
}
#discount-container{
background-color: var(--discount-section);
margin-bottom: 20px;
padding: 8px;
}
.discounts{
display: flex;
justify-content: space-around;
margin-bottom: 24px;
}
.discount-card{
width: 120px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--total-section);
border-radius: 8px;
border:none;
}
.discount-card:hover{
cursor: pointer;
background-color: var(--Header);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);;
}
.discount-card :nth-child(1){
font-size: var(--size-S);
font-weight: bold;
margin-bottom: 8px;
}
.discount-card :nth-child(2){
font-size: var(--size-S);
font-weight: bold;
}
.discount-article p{
font-size: var(--size-S);
font-weight: bold;
margin: 16px 0px 12px 0px;
}
#total-container{
background-color: var(--total-section);
padding: 12px 8px 8px 8px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.button{
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.calcular-button{
width: 120px;
height: 30px;
margin: 16px 0px 12px 0px;
font-size: var(--size-S);
font-weight: bold;
background-color: var(--total-section);
border-radius: 8px;
border: none;
}
.calcular-button:hover{
cursor: pointer;
background-color: var(--Header);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);;
}
.total-discount{
font-size: var(--size-S);
font-weight: bold;
}
.total-price{
font-size: var(--size-S);
font-weight: bold;
}
.reload{
width: 160px;
height: 30px;
margin: 16px 0px 12px 0px;
font-size: var(--size-S);
font-weight: bold;
background-color: var(--Header);
border-radius: 8px;
border: none;
}
.reload:hover{
cursor: pointer;
background-color: var(--Header);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);;
}
.active-button:active{
background-color: var(--Header);
box-shadow: none;
}
<code>
no me lleve bien con los porcentajes en mi época de escolar xd
Comparto mi solución:
6. Cómo calcular porcentajes
Regla de 3:
Ejemplo 01
- Precio: $100
- Descuento: 15%
- Pago: 85%
| $100 | 100% |
|---|---|
x = $85 |
85% |
x = (85% * $100) / 100%
También:
x = 100 * 0.85
Ejemplo 02
- Precio: $120
- Descuento: 15%
- Pago: 85%
| $120 | 100% |
|---|---|
x = $102 |
85% |
x = (85% * $120) / 100%
También:
x = 120 * 0.85
6. Cómo calcular porcentajes
Regla de 3:
.
Ejemplo 01
- Precio: $100
- Descuento: 15%
- Pago: 85%
.
| $100 | 100% |
|---|---|
x = $85 |
85% |
.
x = (85% * $100) / 100%
.
También:
x = 100 * 0.85
.
Ejemplo 02
- Precio: $120
- Descuento: 15%
- Pago: 85%
.
| $120 | 100% |
|---|---|
x = $102 |
85% |
.
x = (85% * $120) / 100%
.
También:
x = 120 * 0.85
hice una loquera jajajaja miren lo que hice la pagina te permite decir cuantos articulos cas a comprar y cuanto% de descuento tendra cada uno, te da lo que tienes que pagar de cada uno y cuanto te ahorras de cada uno y te da los totales, le hacen falta estilos no tiene nada de eso pero ahi va
https://razec2112.github.io/Aprendiendo-matematicas-en-JavaScript/descuentos
Gracias a la guía de Juan y Javascript, desde hoy las matemáticas se convirtieron en mis mejores amigas 😃
Yo lo hice así:
function porcentaje(P, D) {
if (D < 101 && D > -1) {
let precioFinal = P - (P * (D/100));
return "El precio con descuento es de: " + precioFinal + "$";
}
else {
return "There was a mistake :c";
}
}
Tome de referencia el codigo de la WebStore que usamos en el Curso Practico de JS y le aplique tres tipos de descuentos basados en el precio de los objetos que inclui en el array hardcodeado, trate desclarando una funcion que tome como refencia el precio de los articulos y ahi me di cuenta que no funcionaba debido a que para trabajar con dicha propiedad tenia que aguardar a que se registre su valor primero y luego añadir la propiedad de descuento (la cual trabaja con el numero que obtiene de price). Luego incorpore los valores de esta propiedad en la secuencia de armado HTML que renderizaba las demas propiedades
// este for each se ejecuta luego de haber sido creado el array con los objetos y añade las propiedades de tipo de descuento y su porcentaje //
productList.forEach((element) => {
if (element.price <= 500){
element.discountedPrice = (element.price * (100 - 30)) / 100
element.typeOfDiscount = "30%"
}
else if (element.price > 500 && element.price <= 1000){
element.discountedPrice = (element.price * (100 - 20)) / 100
element.typeOfDiscount = "20%"
}
if (element.price > 1000){
element.discountedPrice = (element.price * (100 - 15)) / 100
element.typeOfDiscount = "15%"
}
})
// Y aqui se añade en render products los elementos HTML correspondientes a estas propiedades//
const productPrice = document.createElement('p');
productPrice.innerHTML = '<del>' + '$' + product.price + '</del>' + " " + product.typeOfDiscount + "Off"
const discountProductPrice = document.createElement('p');
discountProductPrice.innerText = '$' + product.discountedPrice
function precioDescuento () {
let precio = parseInt(prompt('Ingresa el precio'));
let descuento = parseInt(prompt('Ingresa el descuento'));
let precioTotal = precio * (100 - descuento) / 100;
document.querySelector('.price').innerHTML = `El precio es: $${precio} y el descuento: ${descuento}%, por lo tanto el total es: $${precioTotal}`
}
precioDescuento()
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</h5>
<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="number"
><span class="label-text">Descuento</span></label
>
<div id="emptyValue"></div>
<div class="table">
<div class="table--container">
<div id="Pprice"></div>
<div id="Pdiscount"></div>
<div id="resultDiscount"></div>
</div>
</div>
</form>
<div>
<p></p>
<p></p>
</div>
</section>
</main>
<script src="./js/index.js"></script>
</body>
</html>
JS
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 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%;
}
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;
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;
}
#price:focus + label::before,
#price:focus + label::after {
border-color: #fff;
}
#discount:focus + label::before,
#discount:focus + label::after {
border-color: #fff;
}
.price {
color: #fff;
top: 0.5em;
}
.price::before,
.price::after {
border-color: rgba(219, 205, 217, 0.3);
top: 0;
}
.discount {
color: #fff;
top: 3.85em;
}
.discount::before,
.discount::after {
border-color: rgba(188, 175, 209, 0.3);
top: 0;
}
.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;
}
@media (min-width: 660px) and (max-width: 856px) {
body {
max-width: calc(100% - 12em);
}
}
En mi solucíon lo que hice fue, dejar unos botones determinado con cierto porcentajem asi quedó:
let btnsDecuentos = document.querySelectorAll('.btn-descuento');
let descuento = document.querySelector('.total-descuento');
let totalAhorro = document.querySelector('.total-producto');
let precioinicial = document.querySelector('#precio')
let porcentajeDescuento=0;
btnsDecuentos.forEach(btn=>{
btn.addEventListener('click',event=>{
porcentajeDescuento=parseInt(event.target.innerText.slice(0,-1));
let precio=parseFloat(precioinicial.value);
calcularDescuento(porcentajeDescuento,precio)
});
});
function calcularDescuento(porcentaje,precio) {
let calcularDescuento=(precio*(100-porcentaje)/100);
console.log(calcularDescuento);
descuento.innerHTML = "Su nuevo precio con el descuento de " + porcentaje + "% es $" + calcularDescuento;
totalAhorro.innerHTML = "Su ahorro fue de: $" +(precio-calcularDescuento);
}
Mi Calculadora de Descuentos (%)
-
Repositorio: Proyecto en GitHub
-
Slides con proceso:
const btnCalcular = document.getElementById('btn-calcular');
btnCalcular.addEventListener('click', ()=>{
const precio = document.getElementById('precio').value;
const descuento = document.getElementById('descuento').value;
const precioFinal = document.getElementById('precio-final');
console.log(precio, descuento);
return precioFinal.innerText = Math.floor(precio - (precio * (descuento/100)));
});
Aca esta mi practica, me di el lujo de darle un poco de css y html, dejo un link de github pages para que puedan ver la interactividad: https://ivanromero-io.github.io/Curso-Matematicas-Js/MODULO 2/CLASE 1/
reto cumplido:
Mi aporte y funcionando. Igual hay cosas que se pueden mejorar.
const containerMain = document.querySelector(’#container-main’);
const containerProductElectronics = document.querySelector(’#container-electronics’);
const textTitleProducts = document.querySelector(’#title-products’);
const imgProductsElectronics = document.querySelector(’#product-eletronics’);
const textDescription = document.querySelector(’#description-products’);
const priceProducts = document.querySelector(’#price-products’);
const cupon = document.querySelector(’#cupon-descuento’);
const buttonDiscount = document.querySelector(’#button-discount’);
const producList = [];
producList.push({
name : ‘Smart TV Samsung Series 4 UN32T4300AKXZL LED HD 32" 100V/240V’,
price : 200,
description : ‘Resolution hd, sound dolby digital plus.’,
image : ‘https://televisores.com.co/wp-content/uploads/2020/08/32-T4300-HD-Smart-TV-2020.jpg’,
});
for(product of producList) {
const productImage = document.createElement('img');
productImage.setAttribute('src',product.image);
imgProductsElectronics.appendChild(productImage);
productImage.classList.add('product-img');
textTitleProducts.innerText = product.name;
textDescription.innerText = product.description;
priceProducts.innerText = 'Precio :' + ' ' + product.price;
}
buttonDiscount.addEventListener(‘click’,addDiscount);
const discountBasic = producList[0].price* (100-15) / 100;
function addDiscount(){
for(let i = 0; i < 1;i++){
const newPrice = document.createElement(‘p’);
newPrice.innerText = ‘Congratulation!, your new price is’ + ’ ’ + discountBasic;
containerProductElectronics.appendChild(newPrice);
}
}
Hay varios métodos que llevan al mismo camino por ejemplo (precio - (precio * porcentaje)) quedaría de la siguiente manera si el porcentaje de descuento es del 15% queda (120 - (120 *0.15)) = 102 …
así salió el mío, en la otra sección pondré el código.
Reto completado:
Mi solución del reto =3
<
const form = document.querySelector('#form');
const inputPrecio = document.querySelector('#precio');
const inputDescuento = document.querySelector('#procentaje');
const btn = document.querySelector('#btnCalcular');
const pResultado = document.querySelector("#text");
form.addEventListener('click',calcularDescuento);
function calcularDescuento(event){
event.preventDefault();
const descuento = ((parseInt(inputPrecio.value) * (100 - parseInt(inputDescuento.value)) / 100)) ;
pResultado.innerText = "El valor total con el descuento es de $: " + descuento + " 💵";
}
>
Contribuyo con mi aporte…
// Sección Porcentaje
const button = document.querySelector('.calc');
const result = document.querySelector('.result');
const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
button.addEventListener('click', calcPorcentaje);
function calcPorcentaje() {
if(price.value == '' || discount.value == ''){
alert('Favor rellenar los campos');
}
let res = ((Number(price.value) * (100 - Number(discount.value)) / 100)).toFixed(2);
if(res > 0){
result.innerText = `El precio final del producto es: $${res} con un descuento aplicado del ${discount.value}%`;
price.value = '';
discount.value = '';
res = 0;
}
}
Trabajo Honesto 😃
mi codigo
asi quedo
No es el código más elegante del mundo, pero de que funciona funciona:
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculo de porcentajes</title>
</head>
<body>
Cálculo de Porcentaje
Con esta herramienta vas a ser capaz de identificar el valor final de tu producto una vez que ingreses el valor inicial y el porcentaje de descuento.
Valor producto:
<input type="number" name="" id="price">Porcentaje descuento:
<input type="number" id="discount"> <button id="calculo">Calcular</button> <script src="porcentajes.js"></script>Valor con descuento:
<input type="text" id="final-value"> </body> </html> ``````js document.addEventListener('DOMContentLoaded', function() { const botonCalculo = document.querySelector('#calculo'); const resultado = document.querySelector('#final-value'); botonCalculo.addEventListener('click', calcularDescuento); function calcularDescuento() { const precio = parseFloat(document.querySelector('#price').value); const descuento = parseFloat(document.querySelector('#discount').value); const valorFinal = precio - (precio * (descuento / 100)); resultado.value = ('$ ' + valorFinal); } }); ```
function calcularDescuento(precio,descuento){
return (precio*(100-descuento))/100;
}
Está VIIIIVOOO!!! 😎
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<!-- <h1>Taller de matemáticas con Javascript</h1>
<p>Por favor, abre la consola... Lerdo!</p> -->
<div class="header">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB00lEQVR4nO2YLUwDQRCFP0OAhJDg+HG1yBpCisMQQGLBgUQiOVmLA4tEAg4HBFWLxFBSHAkhAYI5ssmUbJotvd5d0971fckzN9Pt3Mvs7rQghBBCCCH+ZRN4AeKCqAlskCPNEXipfvWcpwHxELVqNdRSPCuFAT5ZnhXWgJrVsJbiWSkMiHPqHhmQhbigyoUosPCpF98OxBtefDFhcaGcBS/eCMS3vPhZIF4fxMs/AJMWnwaeAjn7PQxKaoD/ggeBuPvuKYtPALd5mhAFFnsFlnrkfACzPXKSGuA+22YGeA/kHHs5810m1r5NiAKL/NgV06YCfPXYHo7rDAZcdeSE2vzTammzAnxnMSHqUozf1lhxobxqR14rgwGu43yqXfIuO/L2uuQlMiHOUHAR8wpXsAxAHcBAt4AQ4g9/77ih583UsjG0rUeb1Z3ugRuTmxUuPJ3bMON0Yvdy3WaPI0+HNnc47QI7JjdWr3uq2WzgtGwDUcV+f8x5Sk1cEsmAtMQlkQxISzxAd/Nab+gdkBYZgDoAbQF0BqBDEN0C6BpEcwAahEg2WI3cb4G0pF1v7A24G/cO6EQGULL/A/pFBqAOQFsAnQHoEES3ALlfg0IIIYSgtPwC+PbmFT7XtYgAAAAASUVORK5CYII=">
<h1>APLICA LOS DESCUENTOS!...</h1>
</div>
<section class="calculos">
<label for="valorInput">Valor del articulo</label>
<input id="valor" type="number">
<button id="10" class="descuento-btn" onclick="descuento(10)">Cupon del 10%</button>
<button id="15" class="descuento-btn" onclick="descuento(15)">Cupon del 15%</button>
<button id="20" class="descuento-btn" onclick="descuento(20)">Cupon del 20%</button>
<button id="25" class="descuento-btn" onclick="descuento(25)">Cupon del 25%</button>
<h2>El nuevo valor es de <span id="valor-final"></span></h2>
</section>
<script src="./js/math.js"></script>
</body>
</html>
JS
function descuento(porcentaje) {
let precio = parseFloat(document.getElementById('valor').value);
if (isNaN(precio)) {
alert("Ingresa un valor válido antes de aplicar el descuento.");
return;
}
let nuevoPrecio = precio * (100 - porcentaje) / 100;
document.getElementById('valor-final').innerText = nuevoPrecio.toFixed(2);
}
Así lo hice
reto realizado
const precioProducto = document.querySelector('#precio')
const descuatoAaplicar = document.querySelector('#descuento')
const calcular = document.querySelector('.calcular')
const precioTotalCompra = document.querySelector('.precioTotalCompra')
calcular.addEventListener('click', descuento)
function descuento(event) {
event.preventDefault()
let valor = precioProducto.value
let descuento = descuatoAaplicar.value
const precioTotal = (valor * (100 - descuento)) / 100
precioTotalCompra.innerHTML = 'el total de su compra es: $' + precioTotal
}
Esta fue mi forma de hacer una calculadora de precios y descuentos.
Me tomé el tiempo de diseñar una interfaz simple (porque amo diseñar 😅)
Estoy un poco flojo en lógica, así que quizá haya errores feos, escucho sugerencias :)
> Mi HTML
```js
<section class="flex flex-col gap-5 border bg-black border-white rounded-lg w-96 h-auto p-4 mx-auto">
</section>
```
> Mi JS
```js
const buttonSubmit = document.querySelector('#buttonSubmit').addEventListener("click", function calcDiscount(){
const priceInputEl = document.querySelector('#priceInput')
const discountInputEl = document.querySelector('#discountInput')
// Calcular descuento
const price = parseFloat(priceInputEl.value)
const discount = parseFloat(discountInputEl.value)
const descuento = (price * discount) / 100
const resultado = price - descuento
console.log(resultado)
//Mostrar resultados
const resultsEl = document.querySelector('#results')
resultsEl.textContent = resultado
})
```
<input type="number" id="priceInput"
class="bg-black border border-white text-white text-sm rounded-lg focus:border-lime-500 focus:outline-none block w-full p-2.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
placeholder="Price" required>
<input type="number" id="discountInput"
class="bg-black border border-white text-white text-sm rounded-lg focus:border-lime-500 focus:outline-none block w-full p-2.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
placeholder="Discount Amount" required>
<button class="rounded-lg bg-lime-600 py-2 w-full hover:bg-lime-500 transition-colors" id="buttonSubmit"
type="button">Calcular</button>
Results
Mi aporte, no le hice nada de estilos solo es funcional
Codigo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Descuentos</title>
</head>
<body>
<h1>Precios y Descuentos</h1>
<div>
<label for="precio">Precio</label>
<input type="number" name="precio" id="precio" />
<label for="descuento">Descuento</label>
<input type="number" max="100" name="descuento" id="descuento" />
<button id="calcular" type="button">Calcular</button>
<p id="resultado">Tu precio con descuento es:</p>
</div>
</body>
<script src="descuentos.js"></script>
</html>
Codigo JS
const button = document.querySelector("#calcular");
function precioConDescuento() {
const precio = document.getElementById("precio").value;
const descuento = document.getElementById("descuento").value;
const resultado = (document.getElementById(
"resultado"
).innerText = `Tu precio con descuento es: ${
(precio * (100 - descuento)) / 100
}`);
return resultado;
}
button.addEventListener("click", precioConDescuento);
Comparto mi codigo js.
const inputs = document.querySelectorAll("input")
const btn = document.querySelector('button')
const span = document.querySelector('span')
let values = []
btn.addEventListener("click", e => {
e.preventDefault()
values = []
inputs.forEach(input => {
values.push(input.value)
})
calculateDiscount(values)
})
const calculateDiscount = (values) => {
const price = values[0]
const discount = values[1]
const totalPrice = (price * (100 - discount)) / 100
span.textContent = totalPrice
}
Hello.
Aprendi mucho haciendo el reto, aun no veo la siguiente clase.
Algo que note cuando termine, es que, me urgue llegar a la parte de POO, el codigo es mucho en un solo archivo, me gusta mas cuando se ve bien estructurado y por partes, clases y funciones dedicadas.
Aqui fotos y codigo:
let disacountList = [
{
nombre:'Especial2023',
descuento:45
},
{
nombre:'CuponMaravilla',
descuento:20
},
{
nombre:'CuponBatman',
descuento:90
},
{
nombre:'MusicOn2023',
descuento:10
},
{
nombre:'MusicOn2023',
descuento:10
}
];
let articlesObjects = [
{
nombre:'Smart Tv Lg',
descripcion:'Televisor smart lg, 42 pulgadas',
imagen:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtw88rDdvoXkQq6nCdXmkdx6m1vFDILQAEe0mPLHs06w&s',
precio:35750,
cupones:'Especial2023'
},
{
nombre:'Amazon Fire TV Stick con Alexa Voice Remote',
descripcion:'Torre de sonido super bass Boost',
imagen:'https://m.media-amazon.com/images/I/51TjJOTfslL._AC_SX425_.jpg',
precio:15600,
cupones:'CuponMaravilla'
},
{
nombre:'Airpods',
descripcion:'LLeva tu musica a otro nivel',
imagen:'https://images.macrumors.com/t/Xli73M4hhPje3C5CeyhH1Z_c2Ro=/800x0/smart/article-new/2018/02/airpods-3.jpg?lossy',
precio:2500,
cupones:'MusicOn2023'
},
{
nombre:'Logitech',
descripcion:'Listo para tu android phone',
imagen:'https://webobjects2.cdw.com/is/image/CDW/7194880?$product-detail$',
precio:850,
cupones:'MusicOn2023'
},
{
nombre:'Samsung Buds2 pro',
descripcion:'Airbuds para todo gamer',
imagen:'https://webobjects2.cdw.com/is/image/CDW/7170468?$product-detail$',
precio:7000,
cupones:'Especial2023'
},
{
nombre:'Silex BR-500AC',
descripcion:'El primer BR-500AC Comercial disponible con 802.11ac wave2 2x2',
imagen:'https://webobjects2.cdw.com/is/image/CDW/7050684?$product-detail$',
precio:8500,
cupones:'CuponBatman'
}
];
/**<div class="card-article-container">
<h3>TV LG</h3>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtw88rDdvoXkQq6nCdXmkdx6m1vFDILQAEe0mPLHs06w&s">
<p class="article-price">$35.00</p>
<p class="description-container">Tv lg muy bonito</p>
<button class="primary-button">Aplicar Coupon</button>
</div> */
const cardsContainer = document.querySelector('.cards-container');
articlesObjects.forEach((element)=>{
const cartArticleContainer = document.createElement('div');
cartArticleContainer.classList.add('card-article-container');
const h3 = document.createElement('h3');
h3.innerText = `${element.nombre}`;
cartArticleContainer.appendChild(h3);
const img = document.createElement('img');
img.setAttribute(`src`,`${element.imagen}`);
cartArticleContainer.appendChild(img);
const price = document.createElement('p');
price.classList.add('article-price');
price.innerText = `$${element.precio}`;
cartArticleContainer.appendChild(price);
const description = document.createElement('p');
description.classList.add('description-container');
description.innerText = `${element.descripcion}`;
cartArticleContainer.appendChild(description);
const btn = document.createElement('button');
btn.classList.add('primary-button');
btn.innerHTML = 'Aplicar Coupon';
cartArticleContainer.appendChild(btn);
cardsContainer.appendChild(cartArticleContainer);
});
/*<aside id="product-Detail" class="inactive">
<div class="product-detail-close">
<img src="./icon_close.png.png" alt="close">
</div>
<img class="product-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtw88rDdvoXkQq6nCdXmkdx6m1vFDILQAEe0mPLHs06w&s">
<div class="product-info">
<p class="price-product--detail">3</p>
<p class="name-product--detail">tv</p>
<p class="description-product--detail">tv grande </p>
<div class="coupong-div-container">
<input id="coupon" type="text">
<button class="primary-button">Ver Descuento</button>
</div>
<p class="precio-con-coupon">3</p>
</div>
</aside> */
const btn_aplicarCoupon = document.querySelectorAll('.primary-button');
const btnArray = Array.from(btn_aplicarCoupon);
btn_aplicarCoupon.forEach(element =>{
element.addEventListener('click', ()=>{
const indexActualElement = btnArray.indexOf(element)-1;
//reference on dom to the fields to fill
//getting image
const product_image = document.querySelector('.product-image');
product_image.setAttribute('src', articlesObjects[indexActualElement].imagen);
const product_price = document.querySelector('.price-product--detail');
product_price.innerText = `${articlesObjects[indexActualElement].precio}`;
const product_name = document.querySelector('.name-product--detail');
product_name.innerText = `${articlesObjects[indexActualElement].nombre}`;
//description-product--detail
const product_desc = document.querySelector('.description-product--detail');
product_desc.innerText = `${articlesObjects[indexActualElement].descripcion}`;
const card = document.querySelector('#product-Detail');
card.classList.remove('inactive');
});
});
//product-detail-close
const btn_close = document.querySelector('.product-detail-close');
btn_close.addEventListener('click', ()=>{
const card = document.querySelector('#product-Detail');
card.classList.add('inactive');
});
/*<input id="coupon" type="text">
<button class="primary-button">Ver Descuento</button> */
const input_coupon = document.querySelector('#coupon');
const btn_coupon_aplicado = document.querySelector('#btn_descuento');
const precio_coupon = document.querySelector('.precio-con-coupon');
btn_coupon_aplicado.addEventListener('click',calculateDisacount);
function calculateDisacount(){
precio_coupon.innerText = '';
const product_price = document.querySelector('.price-product--detail');
const precioItem = product_price.textContent;
const productName = document.querySelector('.name-product--detail');
let desc = 0;
let word = input_coupon.value;
for(let i = 0 ; i < articlesObjects.length; i++){
if(articlesObjects[i].nombre === productName.textContent){
for(let j = 0; j < disacountList.length;j++){
if(disacountList[j].nombre === articlesObjects[i].cupones){
console.log(disacountList[j].nombre);
console.log(articlesObjects[i].cupones);
if(word == articlesObjects[i].cupones){
desc = disacountList[j].descuento;
}
}
}
}
}
let desc_applied = Math.floor(((precioItem * (100 - desc)) / 100));
precio_coupon.innerText = ` Descuento de ${desc}% $${desc_applied}`;
desc = 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Include Tailwind CSS stylesheet -->
<link href="path-to-your-tailwind-css-file.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8 h-screen flex flex-col justify-center items-center">
<!-- Header -->
<h1 class="text-2xl font-bold mb-4">Bienvenido a la tienda</h1>
<!-- Form -->
<div class="mb-4">
<label for="precio" class="block">Inserta el precio</label>
<input type="number" id="precio" class="border rounded-md px-3 py-2 w-full">
</div>
<div class="mb-4">
<label for="descuento" class="block">Digita el descuento</label>
<input type="number" id="descuento" class="border rounded-md px-3 py-2 w-full">
</div>
<button id="btn" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Comprar</button>
<!-- Result -->
<h1 id="text" class="mt-4 text-xl font-semibold"></h1>
<!-- Include your JavaScript -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="scripts/math.js"></script>
</body>
</html>
Javascript
Descuento()
function Descuento(){
const btn = document.getElementById('btn');
const text = document.getElementById('text');
btn.addEventListener('click', () => {
// P * (100 - d) / 100;
const precio = document.getElementById('precio').value;
const descuento = document.getElementById('descuento').value;
const descuentoTotal = (precio * ( 100 - descuento)) / 100;
text.innerText = "";
if(descuento > 100){
text.innerText = '🚨 No se pueden hacer descuentos mayores al precio inicial';
}else{
text.innerText = descuentoTotal;
}
}
);
}
Algo simple, tome de referencia una tienda de lentes japos
😃
const inputPrice = document.querySelector("#inputPrice")
const inputDiscount = document.querySelector("#inputDiscount")
const priceWithDiscountice = document.querySelector(".precio-con-descuento")
const btnCalcular = document.querySelector(".btn-calcular")
function calcularDescuentos(){
const precio = parseInt(inputPrice.value)
const ValorDescontado = parseInt(inputDiscount.value)
const descuento = ValorDescontado / 100;
const PrecioDescontado = precio - (precio * descuento);
return priceWithDiscountice.innerText = `precio despues del descuento: $` + PrecioDescontado
}
btnCalcular.addEventListener("click", calcularDescuentos)
Funciona Ok. Gracias
Intenté traer el valor de un input varias veces pero fracasé tal vez más adelante XD
esto fue lo que logre
Dejo aquí el código de javascript por si a alguien le llega a servir
const valorWanda = document.getElementById('newPricewsw');
const valorWw = document.getElementById('newPriceww');
const valorWs = document.getElementById('newPricews');
const valorWft = document.getElementById('newPriceft');
function wandaSW(descuento,precio){
const precioFinal1 = precio - ((descuento / 100) * precio );
return precioFinal1
}
const resultado1 = wandaSW(10, 450);
valorWw.innerHTML = resultado1.toFixed(2);
const resultado2 = wandaSW(30, 350);
valorWanda.innerHTML = resultado2.toFixed(2);
const resultado3 = wandaSW(25, 800);
valorWs.innerHTML = resultado3.toFixed(2);
const resultado4 = wandaSW(55, 650);
valorWft.innerHTML = resultado4.toFixed(2);
Realice un card del producto en donde podemos ingresar el % del descuento hasta un max de 50%, para aplicar al precio original.
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>Store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Case Store</h1>
<div class="container_card">
<div class="card_product">
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MQU73?wid=1144&hei=1144&fmt=jpeg&qlt=90&.v=1676920930838" alt="iPhone case" srcset="">
<div class="product_text">
<h3>iPhone 14 Silicone Case with MagSafe</h3>
<div>
<p><span id="currency">$</span><span id="price">60.000</span></p>
<div class="discount_content">
<label class="label_descount" for="descount">Ingresa % de descuento:</label><br>
<input type="number" id="descount" placeholder="30" min="0" max="50">
<button id="apply_btn">Apply</button>
</div>
</div>
</div>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
// Formula descuento
// (precio * (100- descuento))/100
const apply_btn = document.querySelector("#apply_btn");
const inputDescount = document.querySelector("#descount");
const inputPrice = document.querySelector("#price").textContent;
const titlePrice = document.querySelector("#currency");
const discountContainer = document.querySelector(".discount_content");
const maxDescount = 50;
const onlyNum = /^[0-9]+$/;
const descountPrice = (price, descount) => {
let newPrice = (price * (100 - descount)) / 100;
return newPrice;
};
const convertStringtoNum = (str) => {
return str.replaceAll(".", "");
};
const currencyChile = new Intl.NumberFormat("es-CL", {
currency: "CLP",
style: "currency",
});
const showDescount = () => {
if (descount.value > maxDescount) {
alert(`El valor maximo para descuento es ${maxDescount}%`);
descount.value = "";
} else if (descount.value.match(onlyNum)) {
let descountProduct = parseInt(inputDescount.value);
let price = convertStringtoNum(inputPrice);
let newPrice = descountPrice(price, descountProduct);
titlePrice.remove();
discountContainer.remove();
document.querySelector("#price").textContent =
currencyChile.format(newPrice);
descount.value = "";
} else {
alert("Solo ingrese numeros");
}
};
apply_btn.addEventListener("click", showDescount);
Mi codigo JS
const btnDescount = document.querySelector("btn-descount");
btnDescount.addEventListener("onclick", descount);
function descount() {
//variables
const price = document.querySelector("#price").value;
const descount = document.querySelector("#descount").value;
//Ecuacion
const total = (price * (100 - descount)) / 100;
//Agreamos el total al tag que tiene clase total en html
document.getElementById("total").innerHTML = total;
}
Calcular 3 descuentos diferentes a un precio con botones:
<!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>Calcular los descuentos con precios</title>
</head>
<body>
<h1>Calcular descuentos</h1>
<form action="/">
<input type="text" placeholder="Precio" id="input-precio" />
<button type="button" id="desc-20">20%</button>
<button type="button" id="desc-50">50%</button>
<button type="button" id="desc-80">80%</button>
<h2 id="resultado-desc">Precio Final:</h2>
</form>
<script>
// DOM
const inputPrecio = document.querySelector("#input-precio");
const desc20 = document.querySelector("#desc-20");
const desc50 = document.querySelector("#desc-50");
const desc80 = document.querySelector("#desc-80");
const resultadoDesc = document.querySelector("#resultado-desc");
// Eventos botones
desc20.addEventListener("click", calculo20);
desc50.addEventListener("click", calculo50);
desc80.addEventListener("click", calculo80);
// Calcular 20%
function calculo20() {
let precio = inputPrecio.value;
let resultado = (precio * (100 - 20)) / 100;
resultadoDesc.innerText = `Precio Final: ${resultado}`;
}
// Calcular 50%
function calculo50() {
let precio = inputPrecio.value;
let resultado = (precio * (100 - 50)) / 100;
resultadoDesc.innerText = `Precio Final: ${resultado}`;
}
// Calcular 80%
function calculo80() {
let precio = inputPrecio.value;
let resultado = (precio * (100 - 80)) / 100;
resultadoDesc.innerText = `Precio Final: ${resultado}`;
}
</script>
</body>
</html>
Espero les sea de ayuda, lo realicé con conocimientos de los cursos anteriores de la escuela de Desarrollo Web
codigo 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="./css/style.css">
<title>Descuento de Productos</title>
</head>
<body>
<header>
<h1>Cálculo de Descuentos de Productos</h1>
</header>
<main>
<div class="cards-container">
<div class="m-productTile__container ">
</div>
</div>
</main>
<script src="./main.js"></script>
</body>
</html>
codigo SASS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size:62.5%;
}
header{
h1{
text-align:center;
margin-top: 2rem;
margin-bottom: 2rem;
}
}
main{
.cards-container{
position: relative;
overflow-x: auto;
width: 100%;
max-width: 128rem;
margin: 0 auto;
.m-productTile__container{
display: flex;
gap: 20rem;
background-color: #fff;
width: 20%;
.product-card{
display: flex;
flex-direction: column;
width: 63.6363%;
margin: 0 auto;
position: relative;
height: 100%;
padding: 5.3719% 0;
.m-productTile__previewContainer{
margin: 5% auto 5%;
width: 135.53px;
height: 135.53px;
overflow: hidden;
position: relative;
img{
width: 135.53px;
height: auto;
position: relative;
}
span{
border-radius: 0.3rem;
font-size: 1.2rem;
font-weight: 700;
line-height: 14.4px;
padding: 0.2rem 0.5rem;
position: absolute;
top: 0;
right: 0;
}
}
.product-info{
.product-marca{
color: #767676;
text-transform: uppercase;
line-height: 1.4rem;
font-weight: 700;
letter-spacing: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 12rem;
margin-bottom: 0.5rem;
}
.producto-description{
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
color: #4a4a4a;
height: 3.4rem;
overflow: hidden;
margin-bottom: 0.8rem;
}
}
.producto-precioActual{
margin-top: 0;
line-height: 1.3rem;
min-width: 7.3125rem;
font-size: 1.5rem;
text-align:left;
color: #717171;
}
.producto-precioSecundario{
height:initial;
line-height: 1.2rem;
color: #d35b36;
font-size: 1.4rem;
// text-decoration: line-through;
}
.button-calcular-descuento{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(18, 18, 96, 0.5);;
color: white;
border: 2px solid white;
border-radius: 0.5rem;
padding: 10px 20px;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
&:hover{
opacity: 1;
}
}
.product-card:hover{
opacity: 1;
}
}
}
}
}
codigo Json
{
"productos": [
{
"marca": "Thomas",
"descripcion": "Cafeteria Thomas",
"precioActual": "29.990",
"precioSecundario": "",
"descuento": "25",
"imagen": "https://falabella.scene7.com/is/image/Falabella/15171329_1?wid=180"
},
{
"marca": "Xiaomi",
"descripcion": " Parlante Xioami Mi Compact Bluetooth",
"precioActual": "14.990",
"precioSecundario":"",
"descuento": "33",
"imagen": "https://falabella.scene7.com/is/image/Falabella/gsc_117252542_1721189_1?wid=180"
},
{
"marca": "LHOTSE",
"descripcion": "Smarth Watch blue",
"precioActual": "99.990",
"precioSecundario": "",
"descuento": "50",
"imagen": "https://falabella.scene7.com/is/image/Falabella/8524439_1?wid=180"
},
{
"marca": "Osoji",
"descripcion": "Aspiradora Robot Osoji Dojo San 870",
"precioActual": "89.990",
"precioSecundario": "",
"descuento": "59",
"imagen": "https://falabella.scene7.com/is/image/Falabella/6859718_1?wid=180"
},
{
"marca": "Apple",
"descripcion": "Apple Macbook Pro 13 i5 8GB RAM 512GB SSD",
"precioActual": "299.990",
"precioSecundario": "",
"descuento": "50",
"imagen": "https://falabella.scene7.com/is/image/Falabella/gsc_115555379_1168694_1?wid=180"
},
{
"marca": "Amazon",
"descripcion": "Amazon Alexa",
"precioActual": "19.990",
"precioSecundario": "",
"descuento": "34",
"imagen": "https://falabella.scene7.com/is/image/Falabella/110084722_1?wid=180"
}
]
}
codigo JS
// Obtener el contenedor padre de los productos
const containerPreview = document.querySelector('.m-productTile__container');
let data;
let ultimoButton = null;
// Realizar la solicitud GET al archivo JSON
fetch('./productos.json')
.then(response => response.json()) // Convertir la respuesta a un objeto JSON
.then(data => {
data = data.productos; // Acceder al arreglo de productos
// Para cada producto en el JSON, crear un elemento HTML y agregarlo al contenedor
data.forEach(productos => {
const card = document.createElement('div');
card.className = 'product-card';
const previewContainer = document.createElement('div');
previewContainer.className = 'm-productTile__previewContainer';
const img = document.createElement('img');
img.src = productos.imagen;
img.alt = productos.descripcion;
previewContainer.appendChild(img);
const discount = document.createElement('span');
discount.className = 'carousel_badge__discount';
discount.style.backgroundColor = 'rgb(235, 0, 41)';
discount.style.color = 'rgb(255, 255, 255)';
discount.textContent = `-${productos.descuento}%`;
previewContainer.appendChild(discount);
card.appendChild(previewContainer);
const productoInfo = document.createElement('div');
productoInfo.className = 'producto-info';
const marca = document.createElement('p');
marca.className = 'producto-marca';
marca.textContent = productos.marca;
productoInfo.appendChild(marca);
const descripcion = document.createElement('p');
descripcion.className = 'producto-description';
descripcion.textContent = productos.descripcion;
productoInfo.appendChild(descripcion);
card.appendChild(productoInfo);
const precioActual = document.createElement('p');
precioActual.className = 'producto-precioActual';
precioActual.textContent = `$ ${productos.precioActual}`;
card.appendChild(precioActual);
const precioSecundario = document.createElement('p');
precioSecundario.className = 'producto-precioSecundario';
precioSecundario.textContent = `${productos.precioSecundario}`;
card.appendChild(precioSecundario);
const button = document.createElement('button');
button.className = 'button-calcular-descuento';
button.textContent = 'Calcular descuento';
card.appendChild(button);
button.addEventListener('click', calcularDescuento);
function calcularDescuento(event){
event.preventDefault();
//elimina el resultado anterior
if(ultimoButton !== null){
const card = ultimoButton.closest('.product-card');
const precioSecundario = card.querySelector('.producto-precioSecundario');
precioSecundario.innerText = productos.precioSecundario;
}
const resultado = (productos.precioActual - (productos.precioActual * (productos.descuento/100))).toFixed(3);
precioSecundario.innerText = "Descuento: $ " + resultado;
//asignar el boton presionado a ultimoButton
ultimoButton = event.target;
}
containerPreview.appendChild(card);
});// agregado paréntesis cerrado adicional
});
const precioProducto = document.querySelector('#precio');
const valorDescuento = document.querySelector('#descuento');
const buttonCalcular = document.querySelector('.calcular');
const respuesta = document.querySelector('.resultado');
buttonCalcular.addEventListener('click' , calculo)
function calculo( ) {
const precio = precioProducto.value;
const descuento = valorDescuento.value;
const precioDescuento = (precio * (100 - descuento)) / 100
respuesta.innerHTML = `El precio total es ${precioDescuento}`
}
Me funcionó:
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>Document</title>
</head>
<body>
<h1>Porcentajes y descuentos en Javascript</h1>
<!-- <form action="Calculadora"></form> -->
<label for="purchaseAmount">Ingrese su monto de compra en S/</label>
<input type="number" class="amount--original" placeholder="Monto de compra"> <br/>
<label for="discountPorcentage">Ingrese el porcentaje de descuento</label>
<input type="number" class="discount--porcentage" placeholder="poncentaje de descuento a calcular"> <br/>
<input type="button" value="Resultado" class="get-amount"><br/>
<p class="result"></p>
<script src="./porcentage_oscar.js"></script>
</body>
</html>
Javascript
let getAmount = document.querySelector(".get-amount");
let result = document.querySelector(".result");
getAmount.addEventListener("click", calculate);
function calculate (){
let number = parseFloat(document.querySelector(".amount--original").value);
let porcentage = parseFloat(document.querySelector(".discount--porcentage").value);
getAmount = ( number * ( 100 - porcentage ) ) / 100;
result.innerHTML = `Su nuevo monto a pagar, con el descuento de ${porcentage}%, es de S/${getAmount}.`;
}
Esta es mi propuesta
<code>
//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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: rgb(105, 105, 105);
}
.wrap {
width: 100%;
height: 100vh;
background-color: rgb(241, 241, 241);
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
width: 50%;
height: auto;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(89, 79, 30, 0.16);
}
p {
width: 100%;
margin: 10px 0;
}
label {
color: rgb(158, 158, 158);
font-size: 12px;
}
input {
width: 100%;
height: 35px;
border: 1px solid rgb(226, 226, 226);
border-radius: 5px;
background-color: rgb(252, 252, 252);
}
button {
margin-top: 20px;
padding: 10px;
width: 150px;
text-transform: uppercase;
background-color: dodgerblue;
color: white;
font-weight: bold;
border-radius: 5px;
border: none;
}
h2 {
font-size: 22px;
color: dodgerblue;
margin-top: 25px;
padding: 10%;
background-color: #f8f8f8;
border: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<h1>DESCUENTOS</h1>
<hr>
<p class="parrafo">Calcule el descuento de un precio.</p>
<p>
<label>Precio</label>
<br>
<input id="price" type="number">
</p>
<p>
<label>Descuento</label>
<br>
<input id="amount" type="number">
</p>
<button type="button">calcular</button>
<p id="result"></p>
</div>
</div>
<script src="discount.js"></script>
</body>
</html>
//js
let inputPrice = document.querySelector('#price');
let inputAmount = document.querySelector('#amount');
let actionBtn = document.querySelector('button');
let totalResult = document.querySelector('#result');
actionBtn.addEventListener('click', discount)
function discount() {
let price = Number(inputPrice.value);
let amount = Number(inputAmount.value);
if (!price || !amount) {
alert('!DEBE DILIGENCIAR LOS CAMPOS PARA CALCULAR EL DESCUENTO¡')
}
else{
if (amount > 100) {
alert('El porcentaje de descuento no puede ser mayor a 100')
} else {
let newPrice = (price * (100 - amount)) / 100;
const newResult = document.createElement('h2');
newResult.innerHTML = 'El precio con descuento es ' + newPrice;
totalResult.appendChild(newResult);
}
}
}
Mi solución:
<!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">
<style>
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
form {
background: springgreen;
padding: 1rem;
border-radius: 0.2rem;
}
h1 {
display: flex;
width: 100%;
justify-content: center;
}
fieldset {
display: flex;
flex-wrap: wrap;
border: none;
padding: 0px;
}
label {
width: 100%;
padding: 0.5rem;
font-weight: 800;
}
input {
width: 100%;
padding: 0.5rem;
}
#btn {
width: 100%;
display: block;
margin: 0 auto;
margin-top: 1rem;
padding: 0.5rem;
background: black;
color: white;
font-weight: 800;
text-transform: uppercase;
cursor: pointer;
transition-duration: 0.4s;
border: none;
}
#btn:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
/* background: lightseagreen; */
color: white;
font-size: 1rem;
}
.answer {
margin: 0 0 0 1rem;
padding: 1rem;
background: turquoise;
font-size: 1.5rem;
text-align: center;
font-weight: 800;
}
.inactive {
display: none;
}
</style>
<title>Descuento</title>
<div class="container">
<h1>
Black Friday 🤑
</h1>
<form>
<fieldset>
<label for="">Precio del producto</label>
<input type="text" class="precio" placeholder="00.00">
</fieldset>
<fieldset>
<label for="">Descuento %</label>
<input type="text" class="descuento" placeholder="0">
</fieldset>
<button id="btn" type="button">Aplicar descuento</button>
</form>
<div class="answer inactive">
</div>
</div>
</head>
<body>
<script>
const btnCalc = document.querySelector('#btn');
btnCalc.addEventListener('click', CalcDesc);
function CalcDesc(e) {
e.preventDefault();
const producto = document.querySelector('.precio').value;
const descuento = document.querySelector('.descuento').value;
const answer = document.querySelector('.answer');
const precioFinal = producto - (producto * descuento / 100);
const box = document.createElement('p');
answer.innerHTML = '';
box.innerHTML = `💥¡Felicidades!💥 </br></br>Tienes un descuento de ${descuento}%</br>Cancela en caja $${precioFinal}`;
answer.appendChild(box);
answer.classList.remove('inactive');
}
</script>
</body>
</html>
Asi me quedo
Lo logreeeeeeeeeeeeeeeeee!
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>Reto porcentajes</title>
<link rel="stylesheet" href="/descuentos.css">
</head>
<body>
<header>
<div>
<p class="title">Calculadora de Descuento</p>
<div class="box-input">
<p>Ingresa el precio del producto</p>
<input type="number" id="precio" step="0.001" oninput="calcularDescuento()">
</div>
<div class="box-input">
<p>Ingresa el descuento a aplicarle</p>
<input type="number" id="descuento" step="0.001"oninput="calcularDescuento()"">
</div>
<div class="box-input">
<p>Resultado</p>
<input type="number" id="resultado" step="0.001">
</div>
</div>
</header>
<script src="/descuentos.js"></script>
</body>
</html>
CSS ❤️
header{
display: flex;
justify-content: space-around;
}
div{
width: 80%;
height: 300px;
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
div .box-input{
display: flex;
flex-direction: row;
height: 40px;
}
div p{
font-family: Arial, Helvetica, sans-serif;
color: white;
font-weight: 700;
}
input{
width: 10%;
height: 20px;
}
JS<3
function calcularDescuento(){
const precio = parseFloat(document.getElementById('precio').value);
const descuento = parseFloat(document.getElementById('descuento').value);
document.getElementById("resultado").value = (((100-descuento) * precio)/100);
}
RESULTADO:
Aquí mi código, por semántica de html, lo suyo es que los inputs y el botón vayan dentro de un form, pero ¡ojo! Es importante entonces que al evento del click (en mi caso la función handleClick) le añadamos event.preventDefault() (y no olvidad los paréntesis que sólo eso me tuvo un buen rato sin entender por qué no funcionaba)
<!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>Calcular descuentos</title>
</head>
<body>
<main>
<h1>Calcular descuentos</h1>
<form action="">
<label for="">Introduce el precio:</label>
<input type="number" class="price" />
<label for="">Introduce el porcentaje de descuento</label>
<input type="number" class="discount" />
<button class="calculate-btn">calcula</button>
</form>
<p class="price-result"></p>
</main>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
Y aquí el javascript (yo soy de hacer los query selector en base a clases en lugar de id, pero es muy parecido) . También prefiero dejar lo más limpia posible la función manejada del evento y llamar a otras funciones, en este caso tengo una que hace el cálculo y otra que pinta el resultado en html. (No le he dado estilos, eso sí…por eso no comparto css). ¡Espero que os sirva!
'use strict';
const priceInput = document.querySelector('.price');
const discountInput = document.querySelector('.discount');
const priceResult = document.querySelector('.price-result');
const calculateBtn = document.querySelector('.calculate-btn');
let priceDiscountResult = 0;
// fórmula (p * (100 - d)) / 100
function calculateDiscount() {
const priceValue = parseInt(priceInput.value);
const discountValue = parseInt(discountInput.value);
const totalDiscount = (priceValue * (100 - discountValue)) / 100;
return totalDiscount;
}
function paintHTML(result) {
priceResult.innerHTML = 'El precio con descuento es: ' + result;
}
function handleClick(event) {
event.preventDefault();
const result = calculateDiscount();
paintHTML(result);
}
calculateBtn.addEventListener('click', handleClick);
Este es mi intento. Sé que aun me faltan validaciones para mejorar la interacción con el usuario, pero el codigo cumple su funcion: obtener el precio con descuento 😎😊
Codigo HTML:
<main>
<h1>Discounts app</h1>
<div class="container-calculator">
<div class="container1">
<label for="calculo1">Price:</label>
<input id="calculo1" placeholder="Enter the price of your product" type="number" />
<div class="container-btn">
<button id="btnDesc" onclick="btnOnClick()">Calculate</button>
</div>
<label for="calculo2">Discount:</label>
<input id="calculo2" placeholder="Enter the discount to redeem" type="number" />
</div>
<div class="container2">
<h2 class="title">Result: </h2>
<p id="result"></p>
<p id="errorMessage"></p>
<button id="btnReset" type="button" onclick="location.reload()">Reset</button>
</div>
</div>
</main>
Codigo JavaScript:
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btnCalcular = document.querySelector('#Calcular');
const result = document.querySelector('#result');
const errorMessage = document.querySelector('#errorMessage');
function btnOnClick () {
if(input1.value === "" || input2.value === "") {
errorMessage.innerText = "Please enter correct values";
} else {
const descuento = (parseInt(input1.value) * (100 - parseInt(input2.value)) / 100);
result.innerText = descuento + "%";
}
}
very simple without css just javascript and html
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>Porcentaje de descuento</title>
</head>
<body>
<h1>Calcula el precio a pagar</h1>
<div class="main-container">
<div>
<label for="precio">Precio</label>
<input id="precio" type="number">
<label for="porcentaje">Porcentaje</label>
<input id = "porcentaje" type="number"><span>%</span>
<button id="calculate-button">Calculate</button>
</div>
<div id="result"></div>
</div>
<script src="/calculo.js"></script>
</body>
</html>
javascript:
const calculateButton = document.querySelector("#calculate-button");
const priceInput = document.querySelector("#precio");
const percentageInput = document.querySelector("#porcentaje");
const results = document.querySelector("#result");
calculateButton.addEventListener("click", function(){
const price = parseFloat(priceInput.value);
const percentage = parseFloat(percentageInput.value);
calulo(price, percentage);
});
function calulo(price,percentage){
let finalPrice = price - (price*percentage/100)
results.innerHTML = ("El precios finales es de $" + finalPrice)
}
That’s how it looks:
Tks
Ejemplo sencillo del calculo del descuento!
No le quise invertir mucho en esto:
const compra = (price,discount=0) =>{
let precio = price - ((discount*price)/100)
return precio.toFixed(2);
}
Mi algoritmo con HTML
HTML
<body>
<h1>Calcula el descuento del articulo</h1>
<div>
<input class="inputPrecio" type="number" placeholder="Precio">
<input class="inputDescuento" type="number" placeholder="Descuento">
<button class="operar">Operar</button>
</div>
<p class="parrafoDescuentoAplicado"></p>
<script src="./main.js"></script>
</body>
Js
let inputPrecio = document.querySelector('.inputPrecio');
let inputDescuento = document.querySelector('.inputDescuento');
let botonOperar = document.querySelector('.operar');
let parrafoDescuentoAplicado = document.querySelector('.parrafoDescuentoAplicado');
function descuento(precio, descuento) {
precio = parseInt(inputPrecio.value);
descuento = parseInt(inputDescuento.value);
descuentoDecimal = descuento / 100;
let precioOff = precio * (1 - descuentoDecimal)
parrafoDescuentoAplicado.innerHTML = "El precio final es de $" + precioOff;
}
botonOperar.addEventListener('click', descuento);
Me salió 😃
Hola, les dejo mi aporte, este sitio te da un descuento aleatorio cuando se le da clic al primer botón y el segundo botón lo aplica al precio del producto
Código JS
const obtenerDescuento = document.querySelector('.boton-descuento');
const aplicarDescuento = document.querySelector('.discount-button-gained');
obtenerDescuento.addEventListener('click', randomDiscount);
aplicarDescuento.addEventListener('click', applyDiscount);
const max = 60;
const min = 10;
let discount;
let finalPrice;
let initial = 700;
function randomDiscount() {
console.log('descuento obtenido');
discount = Math.random() * (max - min) + min;
discount = Math.floor(discount);
document.querySelector('.descuento-aplicado').innerText = discount;
console.log(discount);
return (discount);
}
function applyDiscount(){
finalPrice = 700 - (700 * (discount/100));
console.log(finalPrice);
document.querySelector('.precio-con-descuento').innerText = finalPrice;
return(finalPrice);
}
Código 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">
<link rel="stylesheet" href="./math.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Nabla&display=swap" rel="stylesheet">
<title>Mini tienda</title>
</head>
<body>
<header>
<h3>Tienda de descuentos sorpresa</h3>
</header>
<main>
<section class="main-discount-container">
<h1 class="title">Mini tienda con descuentos especiales</h1>
<p class="">Esta es una tienda donde tu tienes un descuento en todas tus compras de entre 10% y 60%
</p>
<button class="boton-descuento">Obtener descuento</button>
<div class="descuento-obtenido">
<h4>Felicidades obtuviste un descuento de: <span class="descuento-aplicado"></span></h4>
<button class="discount-button-gained">Aplicar</button>
</div>
</section>
<section class="main-store-container">
<div class="products-container">
<h5>Gaming mouse Razer Essential</h5>
<img class="product-image" src="https://www.tradeinn.com/f/13806/138068783/razer-deathadder-pro-v2-wireless-gaming-mouse.jpg" alt="Foto de un mouse gamer">
<p>Precio sin descuento de: $<span class="precio-sin-descuento">700</span></p>
<p class="p-descuento">Precio con descuento de: $<span class="precio-con-descuento"></span></p>
</div>
</section>
</main>
<script src="./porcentajes.js"></script>
</body>
</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" />
<title>Practices Javascript</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header></header>
<main>
<h1>Calcular descuento</h1>
<form action="#">
<div class="section-product">
<label for="price">Valor del producto deseado</label>
<input type="text" id="price" name="price">
</div>
<div class="section-discount">
<label for="discount">Descuento a aplicar</label>
<select name="discount" id="discount">
<option value="5" selected>5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
</select>
</div>
<button class="calculate">Aplicar descuento</button>
</form>
<p class="discount-text hidden">
El valor a pagar despúes de aplicar el descuento es
<span class="result"></span>
</p>
</main>
<footer></footer>
<script src="./main.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
font-size: 2.2rem;
background-color: rgb(57, 66, 104);
}
.show {
display: inline-block;
}
.hidden {
display: none;
}
main {
width: 600px;
height: 60vh;
margin: 0 auto;
margin-top: 80px;
background-color: rgb(219, 217, 203);
text-align: center;
border-radius: 25px;
box-shadow: 10px 10px 6px rgb(27, 27, 27);
}
h1 {
padding-top: 60px;
margin-bottom: 60px;
}
form {
width: 100%;
border-bottom: 2px solid #fff;
}
.section-product,.section-discount {
height: 80px;
margin-bottom: 25px;
}
.section-product label, .section-discount label {
display: inline-block;
width: 100%;
}
#price, #discount {
margin-top: 17px;
width: 150px;
height: 40px;
text-align: center;
font-size: 2.2rem;
}
.calculate {
background-color: rgb(37, 151, 37);
color: aliceblue;
width: 200px;
height: 30px;
border-radius: 10px;
font-weight: bold;
border: none;
margin-bottom: 50px;
}
.calculate:hover {
background-color: rgb(20, 71, 20);
cursor: pointer;
}
.discount-text {
width: 100%;
margin-top: 20px;
}
.result {
display: inline-block;
width: 100%;
margin-top: 20px;
font-weight: bold;
font-size: 2.8rem;
}
JS
//Asignar valores del form a variables
const price = document.querySelector('#price');
const discount = document.querySelector('#discount');
const calculate = document.querySelector('.calculate');
//Asignar campo para mostrar el parrafo y valor con descuento
const textDiscount = document.querySelector('.discount-text');
const result = document.querySelector('.result');
calculate.addEventListener('click', calculateDiscount);
function calculateDiscount(event) {
event.preventDefault();
let discountApplied = (price.value * (100 - discount.value)) / 100;
result.innerText = "$" + discountApplied;
textDiscount.classList.remove('hidden');
textDiscount.classList.add('show');
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?