Fit string in HTML calculator

Question

Fit string in HTML calculator

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have this calculator that is not my own and works perfectly.

The problem is that when we multiply, the display shows asterisk and not x . I would like that when clicking to multiply, x appears in the display and not asterisks.

$(function(){
    $(".val").click(function(e){
         e.preventDefault();
          var a = $(this).attr("href");

           if(a == '*'){ a = 'x'; }else{ a = a; } // Alterei aqui!

         $(".screen").append(a);
           $(".outcome").val($(".outcome").val() + a);
    });

     $(".equal").click(function(){
          $(".outcome").val(eval($(".outcome").val()));
          $(".screen").html(eval($(".outcome").val()));
     });

     $(".clear").click(function(){
          $(".outcome").val("");
          $(".screen").html("");
     });

     $(".min").click(function(){
         $(".cal").stop().animate({width: "0px", height: "0px", marginLeft: "700px", marginTop: "1000px"}, 500);
        setTimeout(function(){$(".cal").css("display", "none")}, 600);
     });

     $(".close").click(function(){
          $(".cal").css("display", "none");
     })
})

.calculator {
    width:480px;
    height:auto;
    padding:10px 0;
    margin: auto;
    background:#232323;
    border:#000 1px solid;
    border-radius:7px;
    -webkit-border-radius:7px;
     -moz-border-radius:7px;
     box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     -webkit-box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     -moz-box-shadow:rgba(0,0,0,0.4) 0px 2px 5px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
     background-image:-moz-linear-gradient(top, #333333, #1f1f1f);
      background-image:-webkit-linear-gradient(top, #333333, #1f1f1f);
       background-image:linear-gradient(top, #333333, #1f1f1f);
     overflow: hidden;
     text-align: center;
}

.screen {
     width:424px;
     height:93px;
    margin: 12px auto 30px;
     padding:15px 20px;
     color:#c0c0c0;
     text-align: right;
     font-size: 3em;
     letter-spacing: 3px;
     overflow:hidden;
     border:#000 1px solid;
     border-radius:7px;
     -webkit-border-radius:7px;
     -moz-border-radius:7px;
     box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
     background-image: -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
      background-image: -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
      background-image: linear-gradient(top, #3e3e3e 0%, #303030 100%);
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
}

.buttons {
     padding:0;
     width:423px;
     margin:auto;
     overflow: hidden;
     list-style: none;
}
.buttons li {
     display:inline;
     float:left;
     padding:0px;
     margin-right:13px;
     margin-bottom:10px;
}
.buttons li:nth-child(4n) {
     margin-right:0;
}

.buttons a{
     display:block;
     width:95px;
     height:68px;
     padding:18px 0 12px;
     color:#c0c0c0 !important;
     font-family: "Myriad Pro", Arial, sans-serif;
     font-size:1.6em;
     font-weight: 500;
    letter-spacing: -2px;
    background-color:#2f2f2f;
     border: #000 1px solid;
     border-radius:5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     text-align: center;
     text-decoration: none;
    text-shadow:#000 0px -1px 0px;
     box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
     -webkit-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
     -moz-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
    background-image:-moz-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
      background-image:-webkit-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
       background-image:linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     cursor: pointer;
}
.buttons a:active{
     box-shadow: inset rgba(0,0,0,0.5) 0px 2px 8px;
     background-image:-moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
      background-image:-webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
       background-image:linear-gradient(top, #2f2f2f 0%, #363636 100%);
}
.tall{height:151px !important;}
.wide{width:205px !important;}
.shift{margin-top:-78px;}

.ctrls{
 list-style: none;
 margin:5px 0 0 20px;
 padding:0;
 position: absolute;
}
.ctrls li{
 float:left;
 display:inline;
}
.ctrls li a{
 display: block;
 width:18px;
 height:18px;
 margin-right:10px;
 border-radius:100%;
 box-shadow:rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(0,0,0,1) 0px 1px 2px 1px;
 background-image: -moz-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -moz-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
 background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
 background-image: radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="content">
    <div class="calculator">
        <div class="screen"></div>
        <input type="hidden" value="" class="outcome" />
        <ul class="buttons">
            <li class="clear"><a>C</a></li>
            <li><a href="-" class="val">&plusmn;</a></li>
            <li><a href="/" class="val">&divide;</a></li>
            <li><a href="*" class="val">&times;</a></li>
            <li><a href="7" class="val">7</a></li>
            <li><a href="8" class="val">8</a></li>
            <li><a href="9" class="val">9</a></li>
            <li><a href="-" class="val">-</a></li>
            <li><a href="4" class="val">4</a></li>
            <li><a href="5" class="val">5</a></li>
            <li><a href="6" class="val">6</a></li>
            <li><a href="+" class="val">+</a></li>
            <li><a href="1" class="val">1</a></li>
            <li><a href="2" class="val">2</a></li>
            <li><a href="3" class="val">3</a></li>
            <li><a class="equal tall">=</a></li>
            <li><a href="0" class="val wide shift">0</a></li>
            <li><a href="." class="val shift">.</a></li>
        </ul>
    </div>
</div>

jquery

asked by anonymous 28.06.2017 / 20:54

2 answers

1

Since you changed * to x at show time, you need to roll back this before calculating:

$(".equal").click(function(){
    $(".outcome").val(eval($(".outcome").val().replace("x","*")));
    $(".screen").html(eval($(".outcome").val()));
});

See it working

28.06.2017 / 21:15

How to omit char array size in function? search and replace string javascript

score 2 · Accepted Answer

Just reverse the order of the functions. I've highlighted the code below, but basically you keep the .val() call with a = * , so eval will work. Enter the .append() , which displays the values in the display down and replace the character before calling this function. Thus, the substitution will occur only at the time of displaying the character, not at the time of parsing it.

$(function() {
  $(".val").click(function(e) {
    e.preventDefault();
    var a = $(this).attr("href");
    
    // ----------------------------------------------------
    // Altere a ordem de .val() e .append() aqui.
    // E coloque o seu if após o .val()
    
    $(".outcome").val($(".outcome").val() + a);
    
    if (a == "*") { a = "x"; }
    $(".screen").append(a);
    
    // ----------------------------------------------------
  });

  $(".equal").click(function() {
    $(".outcome").val(eval($(".outcome").val()));
    $(".screen").html(eval($(".outcome").val()));
  });

  $(".clear").click(function() {
    $(".outcome").val("");
    $(".screen").html("");
  });

  $(".min").click(function() {
    $(".cal").stop().animate({
      width: "0px",
      height: "0px",
      marginLeft: "700px",
      marginTop: "1000px"
    }, 500);
    setTimeout(function() {
      $(".cal").css("display", "none")
    }, 600);
  });

  $(".close").click(function() {
    $(".cal").css("display", "none");
  })
})

.calculator {
  width: 480px;
  height: auto;
  padding: 10px 0;
  margin: auto;
  background: #232323;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px, inset rgba(255, 255, 255, 0.9) 0px 1px 1px -1px;
  background-image: -moz-linear-gradient(top, #333333, #1f1f1f);
  background-image: -webkit-linear-gradient(top, #333333, #1f1f1f);
  background-image: linear-gradient(top, #333333, #1f1f1f);
  overflow: hidden;
  text-align: center;
}

.screen {
  width: 424px;
  height: 93px;
  margin: 12px auto 30px;
  padding: 15px 20px;
  color: #c0c0c0;
  text-align: right;
  font-size: 3em;
  letter-spacing: 3px;
  overflow: hidden;
  border: #000 1px solid;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  -webkit-box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  -moz-box-shadow: inset rgba(0, 0, 0, 1) 0px 1px 4px, inset rgba(225, 225, 225, 0.3) 0px -2px 4px -2px;
  background-image: -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
  background-image: -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
  background-image: linear-gradient(top, #3e3e3e 0%, #303030 100%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.buttons {
  padding: 0;
  width: 423px;
  margin: auto;
  overflow: hidden;
  list-style: none;
}

.buttons li {
  display: inline;
  float: left;
  padding: 0px;
  margin-right: 13px;
  margin-bottom: 10px;
}

.buttons li:nth-child(4n) {
  margin-right: 0;
}

.buttons a {
  display: block;
  width: 95px;
  height: 68px;
  padding: 18px 0 12px;
  color: #c0c0c0 !important;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  letter-spacing: -2px;
  background-color: #2f2f2f;
  border: #000 1px solid;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-align: center;
  text-decoration: none;
  text-shadow: #000 0px -1px 0px;
  box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.1) 0px 1px 0px, inset rgba(0, 0, 0, 0.2) 0px -2px 2px;
  background-image: -moz-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  background-image: -webkit-linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  background-image: linear-gradient(top, #363636 0%, #313234 40%, #2f2f2f 100%);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

.buttons a:active {
  box-shadow: inset rgba(0, 0, 0, 0.5) 0px 2px 8px;
  background-image: -moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
  background-image: -webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
  background-image: linear-gradient(top, #2f2f2f 0%, #363636 100%);
}

.tall {
  height: 151px !important;
}

.wide {
  width: 205px !important;
}

.shift {
  margin-top: -78px;
}

.ctrls {
  list-style: none;
  margin: 5px 0 0 20px;
  padding: 0;
  position: absolute;
}

.ctrls li {
  float: left;
  display: inline;
}

.ctrls li a {
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 100%;
  box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px, inset rgba(0, 0, 0, 1) 0px 1px 2px 1px;
  background-image: -moz-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255, 255, 255, 0) 4px), linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="content">
  <div class="calculator">
    <div class="screen"></div>
    <input type="hidden" value="" class="outcome" />
    <ul class="buttons">
      <li class="clear"><a>C</a></li>
      <li><a href="-" class="val">&plusmn;</a></li>
      <li><a href="/" class="val">&divide;</a></li>
      <li><a href="*" class="val">&times;</a></li>
      <li><a href="7" class="val">7</a></li>
      <li><a href="8" class="val">8</a></li>
      <li><a href="9" class="val">9</a></li>
      <li><a href="-" class="val">-</a></li>
      <li><a href="4" class="val">4</a></li>
      <li><a href="5" class="val">5</a></li>
      <li><a href="6" class="val">6</a></li>
      <li><a href="+" class="val">+</a></li>
      <li><a href="1" class="val">1</a></li>
      <li><a href="2" class="val">2</a></li>
      <li><a href="3" class="val">3</a></li>
      <li><a class="equal tall">=</a></li>
      <li><a href="0" class="val wide shift">0</a></li>
      <li><a href="." class="val shift">.</a></li>
    </ul>
  </div>
</div>