Clientes y Datos

clientes-y-datos.markdown

Clientes y Datos

A Pen by Luciano Strika on CodePen.

License.

index.html

<p2>Clientes:</p2>
<p>Alberto Pérez</p>
<p class="clicky">Roberto López</p>
<p>Ramiro Estévez</p>

<p2>
El maximo saldo es 
</p2>
<p3 class="maxi"></p3>
<br />
<p3 class = "cliente"></p3>

script.js

/*
los diccionarios 'cuentas' y 'saldos' llevan los datos de los clientes. un cliente cuya data no se mostró reacciona cuando el mouse le pasa por encima.
clickear muestra los datos.



*/


cuentas = {
  "Alberto Pérez":123,
  "Roberto López":456,
  "Ramiro Estévez":789
}
saldos = {  
  "Roberto López":767,
  "Ramiro Estévez":7864,
  "Alberto Pérez":12345
}
function maxSaldo(){
  clientes = Object.keys(saldos);
  console.log(clientes.toString());
  max = 0;
for(i = 0;i<clientes.length;i++){
   console.log(saldos[clientes[i]]+" "+ i); 
  if (saldos[clientes[i]]>max ){
    max = saldos[clientes[i]];
    console.log(max);
  }
}
  return max.toString();
}
function clienteMasSaldo(){
  clientes = Object.keys(saldos);
  max = 0;
  cliente = undefined;
for(i = 0;i<clientes.length;i++){
  if (saldos[clientes[i]]>max ){
    max = saldos[clientes[i]];
    cliente = clientes[i];
  }
}
  return cliente.toString();
}
function getCuenta(key){
  if (cuentas[key]!==undefined) {return cuentas[key];}
  else {return "cuenta inexistente";}
}
function getSaldo(key){
  if (saldos[key]!==undefined) {return saldos[key];}
  else {return "N/A";}
}

$("p").click(function() { if(!$(this).hasClass("infoOut")){
  $(this).html(
    $(this).html()+ "<p class='info'>  numero de cuenta: " + getCuenta($(this).html())+ "</p>"
   + "<p class='info'>  saldo: $" +
    getSaldo($(this).html())+"</p>"
  );
  
  $(this).addClass("infoOut");}
  
  
})
$(document).ready(function() {  
  
   $("p").on("mouseenter",function() {
   
       if(!$(this).hasClass("infoOut")) 
           {    
             var elem = $( this );
             elem.addClass("clicky");}
         
   })
 
   $("p").on("mouseleave",function() {
   var elem = $( this );
   elem.removeClass("clicky");})
  
   
})

$(".maxi").html(maxSaldo())
$(".cliente").html("la cuenta es de "+clienteMasSaldo())

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

p2,p3{
  font-size: 44px;  
}
body {
  background-color: black;
  color: white;
  text-align:center;
}
p {
  font-size: 36px;
}
.clicky {
  color:blue;
  text-decoration: underline;
}
.info {
  color:green;
  font-size:32px;
}