Kalkulator

by tymek04

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <div id="main">
       <div id="area">
         <div id="inarea"></div>
         <div id="inarea2">0</div>
       </div>
       <button id= "CE">CE</button>
       <button id= "C">C</button>
       <button id= "backspace"><i class="fas fa-backspace"></i></button>
       <button class = "operation" id= "divide"><i class="fas fa-divide"></i></button>
       <button class = "number" id = "n7">7</button>
       <button class = "number" id = "n8">8</button>
       <button class = "number" id = "n9">9</button>
       <button class = "operation" id= "times"><i class="fas fa-times"></i></button>
       <button class = "number" id = "n4">4</button>
       <button class = "number" id = "n5">5</button>
       <button class = "number" id = "n6">6</button>
       <button class = "operation" id= "minus"><i class="fas fa-minus"></i></button>
       <button class = "number" id = "n1">1</button>
       <button class = "number" id = "n2">2</button>
       <button class = "number" id = "n3">3</button>
       <button class = "operation" id= "plus"><i class="fas fa-plus"></i></button>
       <button></button>
       <button class = "number" id = "n0">0</button>
       <button class = "comma" id = "comma">.</button>
       <button class = "operation" id= "equals"><i class="fas fa-equals"></i></button>
    </div>
  </body>
</html>

CSS

#main {
  display: grid;
  width: 320px;
  height: 420px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid black;
}

#area {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
  padding-top: 30px;
}

#inarea {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  text-align: right;
  padding-top: 10px;
  padding-right: 5px;
}

#inarea2 {
  font-size: 47px;
  text-align: right;
}

JavaScript

var nums = [0, null];
var cur = 0;
var operation = " ";
var add_comma = false;

function myToString(x){
	if(x != null){
  	return x.toString();
  }
  else{
  	return "";
  }
}

function show(){
	let x = myToString(nums[cur]);
  if(x === ""){
  	x = myToString(nums[0]);
  }
  let len = x.length;
  switch (len) {
  	case 14:
    	document.querySelector("#inarea2").style.fontSize = "46px";
      break;
  	case 15:
    	document.querySelector("#inarea2").style.fontSize = "43px";
      break;
    case 16:
    	document.querySelector("#inarea2").style.fontSize = "40px";
      break;
    case 17:
    	document.querySelector("#inarea2").style.fontSize = "37px";
      break;
    case 18:
    	document.querySelector("#inarea2").style.fontSize = "34px";
      break;
    case 19:
    	document.querySelector("#inarea2").style.fontSize = "31px";
      break;
    case 20:
    	document.querySelector("#inarea2").style.fontSize = "28px";
      break;
  }
	document.querySelector("#inarea2").innerHTML = x;
  document.querySelector("#inarea").innerHTML = myToString(nums[0])+operation+myToString(nums[1]);
}

function operate(n1, n2, op){
	let x = 0;
	switch(op){
  	case "+":
    	x = n1+n2;
      break;
    case "-":
    	x = n1-n2;
      break;
    case "*":
    	x = n1*n2;
      break;
    case "/":
    	if(n2 === 0){
      	return "error";
      }
    	x = n1/n2;
      break;
    case " ":
    	x = n1;
      break;
  }
  return x;
}

document.querySelector("#CE").addEventListener("click", function(){
	nums[0] = 0;
  nums[1] = null;
  cur = 0;
  operation = " ";
  add_comma = false;
  show();
});

document.querySelector("#C").addEventListener("click", function(){
	nums[cur] = 0;
  add_comma = false;
  show();
});

document.querySelector("#backspace").addEventListener("click", function(){
	if(cur != -1){
    let res = nums[cur].toString(10);
    let res2 = "";
    for(var i = 0; i < res.length; i++)
    {
      if(i < res.length-1){
        res2 += res[i];
      }
    }
   ...