[TIL] DAY13_1. Making a Calculator

Wednesday. November 01, 2017 - 4 mins

Summary:

DAY13

2017/11/01

My Coding

Making a calculator

My Solution

html

<!DOCTYPE html>
<html lang = "jack">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./cs-style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1 id = 'h1'>head</h1>
<p id = 'p'>title</p>
  <div>
    <div id = 'display' class = 'display'>display</div>
    <button id = 'clear' onclick = 'clearNum()'>C</button><br>

    <button id = 'btn7' onclick="pushNum(7)" value = '7'>7</button>
    <button id = 'btn8' onclick="pushNum(8)" value = '8'>8</button>
    <button id = 'btn9' onclick="pushNum(9)" value = '9'>9</button>
    <button id = 'opt1' onclick="pushOpt(1)" value = '+'>+</button><br>

    <button id = 'btn4' onclick="pushNum(4)" value = '4'>4</button>
    <button id = 'btn5' onclick="pushNum(5)" value = '5'>5</button>
    <button id = 'btn6' onclick="pushNum(6)" value = '6'>6</button>
    <button id = 'opt2' onclick="pushOpt(2)" value = '-'>-</button><br>

    <button id = 'btn1' onclick="pushNum(1)" value = '1'>1</button>
    <button id = 'btn2' onclick="pushNum(2)" value = '2'>2</button>
    <button id = 'btn3' onclick="pushNum(3)" value = '3'>3</button>
    <button id = 'opt3' onclick="pushOpt(3)" value = '*'>*</button><br>

    <button id = 'btn0' onclick="pushNum(0)" value = '0'>0</button>
    <button>.</button>
    <button id = 'result' onclick="calNum()">=</button>
    <button id = 'opt4' onclick="pushOpt(4)" value = '/'>/</button>
  </div>
<script src = "./index.js"></script>
</body>
</html>

javascript

var h = document.getElementById("h1");
h.innerHTML = "Making a calculator";
var p = document.getElementById("p");
p.innerHTML = "Jack's FirstCal";
var crtNum = '';
var result = '';
var dp = document.getElementById("display");
dp.innerHTML = crtNum;

function pushNum(num) {
crtNum = document.getElementById('btn' + num).value;
dp.innerHTML += crtNum;
}

function clearNum() {
dp.innerHTML = "";
}

function pushOpt(num) {
crtNum = document.getElementById('opt' + num).value;
dp.innerHTML += crtNum;
}

function calNum() {
result = eval(dp.innerHTML);
dp.innerHTML = result;
}

css

body {
  background-color: orange;
}
p {
  font-family: verdana;
  font-size: 20px;
}
h1 {
  color: black;
}
button {
  font-family: verdana;
  text-align: center;
  font-size: 40px;
  width : 2em;
  height: 2em;
}
.display {
background-color : gray;
font-family: orange;
text-align: right;
font-size: 40px;
width : 8.5em;
height: 1.5em;
}

Jaewook Kwon

dreaming a iOS developer