Hola que tal, bueno en esta ocasión vamos a realizar un tutorial para crear una pagina utilizando HTML, CSS y Javascript.
Por la opresión de los pobres, por el gemido de los menesterosos, Ahora me levantaré, dice Dios;Pondré en salvo al que por ello suspira.
Salmos 12:5
Muchas veces no podemos evitar de ser nosotros, con nuestros pensamientos, es por eso que hoy te invito ha realizar una hoja y anotar todas las cosas que te llevaron a estudiar programación. Guardalo y dentro de un año de la fecha que lo realizes vuelve a leerlo, te dejo aquí algunos de los comentarios que me han dejado en los cursos:
- Para conseguir un trabajo
- Por mis hijos, ya que al ser madre soltera es difícil poder conseguir un trabajo desde casa y hoy en día veo demasiadas publicaciones de vacantes de programadores.
- Para poder ayudar a mis padres, mis padres ya son grandes y quiero aprender a programar porque los salarios son del doble o triple del promedio.
Manos a la obra
Vamos a definir el problema en este tutorial: Necesitamos un simulador de cajero automático. Las funcionalidades serán: Ver balance, Ingresar, Retirar.
CSS, en esta ocasión no crearemos ninguna clase, pero aremos uso de bootstrap.
HTML, el html es sencillo colocando identificadores en los elementos que son 3: 1 donde vamos a poner el balance, 2 el input del dinero a ingresar y 3 el input para retirar dinero. Adicional pondremos los botones para ingresar y retirar ligados a los metodos de javascript.
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<p class="alert alert-info"> Tu Balance <strong id="balance_id"></strong>
</p>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header text-white bg-success"><h5>Ingresar</h5></div>
<div class="card-body">
<div class="form-group">
<input id="ingresar_id" type="number" class="form-control">
</div>
<button onclick="cajero.ingresar()" class="btn btn-success">Ingrear</button>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-warning"><h5>Retirar</h5></div>
<div class="card-body">
<div class="form-group">
<input id="retiro_id" type="number" class="form-control">
</div>
<button onclick="cajero.retirar()" class="btn btn-warning">Retirar</button>
</div>
</div>
</div>
</div>
</div>
Javascript
let cajero = {
balance:0,
retirar:function(){
let monto = parseInt(document.getElementById('retiro_id').value);
if (monto <= this.balance){
this.balance -= monto;
this.paintBalance();
document.getElementById('retiro_id').value = '';
}else alert('No tienes fondos suficientes');
},
ingresar:function(){
this.balance += parseInt(document.getElementById('ingresar_id').value);
this.paintBalance();
alert('Saldo agregado correctamente');
document.getElementById('ingresar_id').value = '';
},
paintBalance:function(){
let b = this.balance.toFixed(2);
document.getElementById('balance_id').innerHTML = '$'+ b;
},
}
cajero.paintBalance();
Crearemos un objeto llamado «cajero», tiene un atributo balance inicializado con 0, un método para retirar otro para ingresar y el ultimo método paintBalance, este método sencillo lo que hace es tomar el valor del balance y pintarlo en el lugar que dejamos en el HTML.
Les dejo el ejemplo completo en: https://codepen.io/abrahamstalin/pen/zYYmBoP