No quiero sonar explotador pero por favor pongan a Juan David a hacer todos los cursos jajajajaj, explica muy bien!!
XD se ve que juan está como un poquillo cansado pero le agradecemos el esfuerzo
Yo no soy compatible con su forma de enseñanza, con algunos alumnos uso ese tipo de forma de enseñar, pero yo no soy compatible, me cuesta, mi concentración se pierde, lo bonito es que haya diferentes maestros por que no todos aprendemos de igual manera
Muy fancy c:
:) Ame esta clase siento que estoy aprendiendo mucho! Esta es la solución al reto! Use radio buttons y aplique algo de css!
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="./styles.css"><title>Coupons</title></head><body><div class="container"><h2>Coupons</h2><section class="price-input"><label for="course-price">Please enter the price of the course you want to take:</label><input id="course-price"type="number"></section><form class="coupons"><p>Which coupon would you like to apply?</p><label for="summer-coupon"><input id="summer-coupon" type="radio" name="coupon">SummerCoupon20%Discount.</label><label for="fall-coupon"><input id="fall-coupon" type="radio" name="coupon">FallCoupon25%Discount.</label><label for="winter-coupon"><input id="winter-coupon" type="radio" name="coupon">WinterCoupon30%Discount.</label></form><button id="calculatePriceBtn" type="button">CalculateDiscount</button><p id="priceWithDiscount">Pricewith selected discount:</p></div><script src="./coupons.js"></script></body></html>
const price =document.querySelector('#price');const discount =document.querySelector('#discount');const resultDiscount =document.querySelector('#resultDiscount');const emptyValue =document.querySelector('#emptyValue');constPprice=document.querySelector('#Pprice');constPdiscount=document.querySelector('#Pdiscount');const couponId =document.querySelector('#couponId');constcalculateDiscount=()=>{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=`<divclass="table--content"><p>Precio</p><p>$${!inputPrice ==''? inputPrice :'0'}</p></div>`;Pdiscount.innerHTML=`<divclass="table--content"><p>Descuento</p><p>${!inputDiscount ==''? inputDiscount :'0'}%</p></div>`; resultDiscount.innerHTML=`<divclass="table--content"><p>Precio Total</p><p>$${!calculate ==''? calculate :'0'}</p></div>`;};price.addEventListener('input', calculateDiscount);discount.addEventListener('input', calculateDiscount);
gracias a tu codigo conoci algo nuevo hoy, muchas gracias
Aquí mi aporte, espero que les guste.
HTML:
JS:
Comparto mi solución, reutilice un poco el codigo del reto anterior sin embargo cree unas nuevas constantes locales para alli guardar el "Codigo del Cupon" y así preguntarle a javaScript si el cupón que se ingresó en el input es el mimo que tenemos en la variable del cupón.
Me gusta
¿Lo tienes publicado en algún repo?
Claro que sí Profe Juanda :D.
hace poco lo subí en github
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');input1.setAttribute('placeholder','Insert the price');input1.setAttribute('required',"");/* Creating a label and an input. */const label2 =document.createElement('label');label2.innerHTML='<b>Promotion code:</b> ';const input2 =document.createElement('input');input2.setAttribute('type','text');input2.setAttribute('placeholder','Insert code');const btn =document.createElement('button');btn.setAttribute('type','button');btn.innerText='Get Discount';const p =document.createElement('p');btn.addEventListener('click',()=>{if(input2.value==='15Platzi'){let discount =(+input1.value*(100-parseInt(input2.value)))/100; p.innerText=`You get a 15% off. Price with discount: $${discount}`;}elseif(input2.value==='30Platzi'){let discount =(+input1.value*(100-parseInt(input2.value)))/100; p.innerText=`You get a 15% off. Price with discount: $${discount}`;}else{ p.innerText='There is no promotion with this code.';}});app.appendChild(label1);label1.appendChild(input1);app.appendChild(label2);label2.appendChild(input2);app.appendChild(btn);app.appendChild(br);app.appendChild(p);
grande Juan David!!
Mi solucion
la clase pasada, lo realicé sin validaciones y quedó así:
con lo visto en esta clase agregué varias cositas, un boton custom y las validaciones, como no se pueden subir gifs, comparto link, para auquel que desee ver
¡Hola!
¿Qué tal les quedaron sus descuentos usando el DOM?
Lo que hice fue aplicarlo al total de una compra. El usuario ingresa un código válido y se le aplica el descuento.
La verdad no sé por qué me toma el valor del input sin llamarlo pero así quedo.
Tienes tu código en GitHub, Brandon? Se ve espectacular
Seguro esta es la liga
repositorio
Solución al reto:
Hola! por acá dejo lo que hice
<code>const inputPrice =document.querySelector("#price");const inputDiscount =document.querySelector('#discount');const calcBtn =document.querySelector(".btn-calc");const result =document.querySelector(".result");const clean =document.querySelector(".clean");functioncalcDiscount(event){const price =Number(inputPrice.value);const discount =Number(inputDiscount.value);if(!price ||!discount){ result.innerText="Por favor digita el valor y descuento"; result.classList.remove("inactive"); event.preventDefault();return;}if(discount >100){ result.classList.remove("inactive"); event.preventDefault(); result.innerText="Los descuentos no pueden ser mayor al 100%!"; inputDiscount.style.color="red";return;} result.classList.remove("inactive"); clean.classList.remove('inactive'); event.preventDefault();let finalPrice =(price *(100- discount))/100;return result.textContent="El precio con descuento es de: $"+ finalPrice;}functioncleanAll(){ result.classList.add("inactive"); clean.classList.add('inactive'); inputPrice.value=""; inputDiscount.value="";}
Hola Compañeros, yo ya había echo el curso anterior hace poco y pues lo que hice fue regresar a ese código y mejorarlo con lo que hemos aprendido: puse un par de event Listeners y le puse estilos.
Espero les guste :3
