Calculator

Calculator.markdown

Calculator

Simpel calculator

A Pen by Niels Gregers Johansen on CodePen.

License.

index.html

<!-- Her starter lommeregnerens visning-->
<div class="container">

  <div class="row">
    <h1>Coding Pirates Lommeregner</h1>
    <div class="col-md-12" id="digits">0</div>

    <div class="col-md-3">
      <button onclick="tryk('1')">1</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('2')">2</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('3')">3</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('+')">+</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('4')">4</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('5')">5</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('6')">6</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('-')">-</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('7')">7</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('8')">8</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('9')">9</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('*')">*</button>
    </div>
    <div class="col-md-6">
      <button onclick="tryk('C')">C</button>
    </div>
    <div class="col-md-3">
      <button onclick="tryk('0')">0</button>
    </div>
    <div class="col-md-3">
      
    </div>
    <div class="col-md-3">
      <button onclick="tryk('/')">/</button>
    </div>
    <div class="col-md-12">
      <button onclick="tryk('=')">=</button>
    </div>

  </div>
</div>

script.js

/*
kode eksempel på en simpelt lomme
*/
var hvadSkalJeg = "";
var forrigeTal = "";
var mode = "normal"; 

function tryk(knap) {

  // Først skal jeg finde ud af hvad der står i displayet 
  var tallet = $("#digits").text();

  // med console.log viser jeg hvad tallet er

  console.log("Tallet var ", tallet);
  switch (knap){
  case '+':
    {
      // Læg sammen
      hvadSkalJeg = knap;
      forrigeTal = tallet;
      mode = "regn";
      break;
    }
  case '-':
    {
      hvadSkalJeg = knap;
      forrigeTal = tallet;
      mode = "regn";
      break;
    }
  case '*':
    {
      hvadSkalJeg = knap;
      forrigeTal = tallet;
      mode = "regn";
      break;
    }
  case '/':
    {
      hvadSkalJeg = knap;
      forrigeTal = tallet;
      mode = "regn";
      break;
    }
  case 'C':
    {
      hvadSkalJeg = "";
      forrigeTal = "";
      tallet = "0";
      break;
    }
  case '=':
    {
      if (hvadSkalJeg === '+') {
        tallet = parseInt(forrigeTal) + parseInt(tallet);
      }
      if (hvadSkalJeg === '-') {
        tallet = parseInt(forrigeTal) - parseInt(tallet);
      }
      if (hvadSkalJeg === '*') {
        tallet = parseInt(forrigeTal) * parseInt(tallet);
      }
      if (hvadSkalJeg === '/') {
        tallet = parseInt(forrigeTal) / parseInt(tallet);
      }
      break;

    }
  case '.':
    {
      break;
    }
  default:
    {
      // vi kommer kun hertil i programmet hvis der er trykket på et tal 
      if (mode === "regn"){
        tallet = "0";
        mode = "normal";
      }
      // hvis tallet er 0, så er der ikke tastet noget endnu 
      if (tallet === '0') {
        // tallet var 0 - det betyder at der ikke har været tastet noget
        console.log("Tallet var nul");
        // derfor skal tallet være det samme som den knap som jeg trykkede på
        tallet = knap;
      } else {
        tallet = tallet + knap;
      }
    }
}
//console.log("beregnet",eval(tallet));
$("#digits").html(tallet);
// nu viser jeg hvad tallet er
console.log("Tallet er nu ", tallet);

}

scripts

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

style.css

* {
  font-size: 40px;
}
body{
  background-image: url("https://www.aakb.dk/sites/www.aakb.dk/files/list_image/news/codingpirates_basiccharacter_trans.png");
    background-repeat: no-repeat;
    
}
button {
  width: 100%;
  margin:10px;
}

#digits {
  margin: 15px;
  background-color: black;
  color: green;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />