<!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>
*{margin: 0; padding: 0; list-style: none;}
body{
position: fixed;
top: 0;left:0;width:100%;height: 100%;
background-color: darkseagreen;
}
#calc{
box-shadow: 5px 5px 7px rgba(0,0,0,0.35);
font-family: fantasy;
position: fixed;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 400px; height: max-content;
border: 22px solid lightgoldenrodyellow;
border-style: outset;
border-radius: 10px;
padding: 20px;
background-color: beige;
}
.output:after{content: "_";}
.output{
color: lawngreen;
padding: 0 15px;
box-sizing: border-box;
text-align: right;
height: 104px; line-height: 80px;
font-size: 40px;
margin-bottom: 45px;
font-weight: bold;
background-color: #555;
border: 12px solid #888;
border-style: inset;
}
ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul li{
cursor: pointer;
color: #666;
user-select: none;
text-align: center;
padding: 10px 0;
margin-bottom: 15px;
width: calc((100% - 45px) / 4);
border: 1px solid #000;
box-sizing: border-box;
border: 7px solid #ccc;
border-style: outset;
background-color: #ccc;
border-radius: 5px;
}
ul li:active{
border-style: inset;
background-color: #bbb;
border-color: #bbb;
}
</style>
</head>
<body>
<div id="calc">
<div class="output"></div>
<ul class="btns">
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="op" data-operator="div">/</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="op" data-operator="mul">*</li>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="op" data-operator="sub">-</li>
<li class="num">0</li>
<li class="op">.</li>
<li class="equal">=</li>
<li class="op" data-operator="sum">+</li>
</ul>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
// 이항산술이 가능한 사칙연산 계산기
// var arr = ["7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+"];
// console.log(arr.length);
// var sum = arr[15]; //$("ul li").eq(15).show();
// console.log(sum);
// var sub = arr[11];
// console.log(sub);
// var mul = arr[7];
// console.log(mul);
// var div = arr[3];
// console.log(div);
//arr = $(".btns");
//console.log(arr);
function sum (x, y) {
return x + y;
}
function sub (x, y) {
return x - y;
}
function mul (x, y) {
return x * y;
}
function div (x, y) {
return x / y;
}
//console.log(sum(1, 2));
var num; // 연산의 1항과 2항의 역할을 함
var tmp; // 연산의 1항
var userOp;
$("ul li.num").on("click", function() {
//var i = $(this).index();
//console.log(i);
// console.log(sum(parseInt($("ul li").eq(0)), parseInt($("ul li").eq(2))));
// console.log(typeof($("ul li").eq(0)));
num = $(this).text(); // text() 메소드
num = $(".output").text() + num;
$(".output").text(num);
});
$("ul li.op").on("click", function() {
// 1. 1항에 대한 정의
// var tmp;
// tmp = num;
// console.log(tmp);
// var tmp;
// tmp = a;
console.log(num);
tmp = num; // 1항 정의 끝
userOp = $(this).attr("data-operator");
console.log(tmp, userOp);
$(".output").empty(); // 연산자를 누르는 순간 텍스트 비움
});
// 2. 연산이 되는 시점
$("ul li.equal").on("click", function() {
// sum(tmp, num);
// sub(tmp, num);
// mul(tmp, num);
// div(tmp, num);
// if ($("ul li.equal") == true && $("ul li.equal") == "+") {
// sum(tmp, num);
// } else if($("ul li.equal") == true && $("ul li.equal") == "-") {
// sub(tmp, num);
// } else if($("ul li.equal") == true && $("ul li.equal") == "*") {
// mul(tmp, num);
// } else if($("ul li.equal") == true && $("ul li.equal") == "/") {
// div(tmp, num);
// }
var result;
num = Number(num); // 문자열을 숫자로 변환
tmp = Number(tmp); // 문자열을 숫자로 변환
switch(userOp) {
case "sum" : result = tmp + num;
break;
case "sub" : result = tmp - num;
break;
case "mul" : result = tmp * num;
break;
case "div" : result = tmp / num;
break;
default : result = "Error";
}
$(".output").text(result); // 문자와 문자의 합이 결과로 나옴
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.