HTML, CSS y Javascript

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