# UI/UX
HTML 코드
<!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>calulator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<form name="forms">
<input type="text" class="display" name="output" readonly>
<input type="button" class="clear" value="C" onclick="reset()">
<input type="button" class="operator" value="/" onclick="add('/')">
<input type="button" value="1" onclick="add(1)">
<input type="button" value="2" onclick="add(2)">
<input type="button" value="3" onclick="add(3)">
<input type="button" class="operator" value="*" onclick="add('*')">
<input type="button" value="4" onclick="add(4)">
<input type="button" value="5" onclick="add(5)">
<input type="button" value="6" onclick="add(6)">
<input type="button" class="operator" value="+" onclick="add('+')">
<input type="button" value="7" onclick="add(7)">
<input type="button" value="8" onclick="add(8)">
<input type="button" value="9" onclick="add(9)">
<input type="button" class="operator" value="-" onclick="add('-')">
<input type="button" class="dot" value="." onclick="add('.')">
<input type="button" value="0" onclick="add(0)">
<input type="button" class="operator result" value="=" onclick="calculate()">
</form>
</div>
<script src="./main.js"></script>
</body>
</html>html 요소에 직접적으로 onclick 함수를 사용해서 사칙연산이 가능하게 만들었습니다.
javascript 코드
<script>
const display = document.querySelector(".display");
function add (char) {
display.value = display.value + char;
}
function calculate () {
const resulted = eval(display.value);
display.value = "";
display.value = resulted;
}
function reset () {
display.value = "";
}
</script>자바스크립트 코드로는 계산 결과를 보여주는 display를 제어하고 결과창을 지울 수 있는 reset 함수등을 만들었습니다.
Dreams don't run away It is always myself who runs away.