Javascript/연습
계산기 ㅇㅅㅇ버블링 사용 전 노가다로 하기
by SEOKIHOUSE
2023. 6. 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
section {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(5, 100px);
gap: 2px;
}
section div {
border: 1px solid black;
margin: 2px;
line-height: 100px;
}
#div1 {
grid-column: 1/5;
text-align: right;
font-size: 25px;
padding-right: 10px;
}
.colorbox {
background-color: cornflowerblue;
}
#wrap {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn:active {
background-color: aqua;
/* 누르는 느낌주게 */
border: 2px solid black;
}
button {
border: 1px solid black;
font-size: 25px;
}
.colorbox:active {
background-color: coral;
border: 2px solid black;
}
.btnOutput:active {
background-color: rgb(171, 100, 237);
border: 2px solid black;
}
</style>
<script>
window.onload = function () {
let total = document.getElementById("wrap");
let buttonNum = document.querySelectorAll(".btn");
let div1 = document.getElementById("div1");
let buttonCal = document.querySelectorAll(".btncal");
let buttonClear = document.querySelector(".btnClear");
let buttonResult = document.querySelector(".btnOutput");
for (var i = 0; i < buttonNum.length; i++) {
buttonNum[i].addEventListener("click", f);
}
for (let i = 0; i < buttonCal.length; i++) {
buttonCal[i].addEventListener("click", c);
}
function f() {
if (div1.innerHTML == 0) {
div1.innerHTML = "";
}
let getid = this.getAttribute("id");
let check = document.getElementById(getid);
div1.innerHTML += check.innerHTML;
}
function c() {
let getid = this.getAttribute("id");
let check = document.getElementById(getid);
div1.innerHTML += check.innerHTML;
}
buttonClear.addEventListener("click", clear);
function clear() {
div1.innerHTML = "0";
}
buttonResult.addEventListener("click", result);
function result() {
div1.innerHTML = eval(div1.innerHTML).toFixed(2);
}
};
</script>
</head>
<body>
<!-- calWin.innerHtml = eval(expression).toFixed(2) -->
<!-- eval 요새 안쓰는데 수식으로 연산해줌 -->
<!-- ex) eval("8+2") 해주면 10으로 계산돼서 나온다-->
<!-- tofixed - 소수2자리수로만 나타내준다 -->
<div id="wrap">
<section>
<div id="div1">0</div>
<button id="btn7" class="btn">7</button>
<button id="btn8" class="btn">8</button>
<button id="btn9" class="btn">9</button>
<button id="btnplus" class="btncal colorbox">+</button>
<button id="btn4" class="btn">4</button>
<button id="btn5" class="btn">5</button>
<button id="btn6" class="btn">6</button>
<button id="btnminus" class="btncal colorbox">-</button>
<button id="btn1" class="btn">1</button>
<button id="btn2" class="btn">2</button>
<button id="btn3" class="btn">3</button>
<button id="btnsub" id="bt1" class="btncal colorbox">*</button>
<button id="btndiv" class="btn colorbox">/</button>
<button id="btn0" class="btn">0</button>
<button id="btnclear" class="btnClear colorbox">C</button>
<button id="btnresult" class="btnOutput">=</button>
</section>
</div>
</body>
</html>
