자바스크립트를 활용하여 계산기 프로그램을 만들었다.
아래는 계산 버튼을 누른 결과이다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result{
width: 200px;
height: 50px;
font-size: x-large;
text-align: right;
padding-right: 10px;
}
.button{
width: 100px;
height: 60px;
font-size: x-large;
margin-right: 10px;
margin-bottom: 5px;
}
#cal{
border: 1px solid black;
padding: 20px;
position: absolute;
top: 0;
left: 0;
}
#items{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#number{
justify-content: center;
}
</style>
</head>
<body>
<div id="cal">
<h1 style="text-align: center;">계산기 프로그램 만들기</h1>
<div>
<input type="text" id="result" readonly>
<input type="button" class="button" id="resultBtn" value="계산">
<input type="button" class="button" id="resetBtn" value="리셋">
</div>
<div id="items">
<table id="operator">
<tr>
<td><input type="button" class="button" id="plus" value="+"></td>
<td><input type="button" class="button" id="minus" value="-"></td>
<td><input type="button" class="button" id="multi" value="*"></td>
<td><input type="button" class="button" id="devide" value="/"></td>
</tr>
</table>
<table id="number">
<tr>
<td><input type="button" class="button" id="btn1" value="1"></td>
<td><input type="button" class="button" id="btn2" value="2"></td>
<td><input type="button" class="button" id="btn3" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" id="btn4" value="4"></td>
<td><input type="button" class="button" id="btn5" value="5"></td>
<td><input type="button" class="button" id="btn6" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" id="btn7" value="7"></td>
<td><input type="button" class="button" id="btn8" value="8"></td>
<td><input type="button" class="button" id="btn9" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" id="btn0" value="0"></td>
</tr>
</table>
</div>
</div>
<script>
const items = document.getElementById("items");
const buttons = document.querySelectorAll("button");
items.addEventListener("click",input);
const resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click",reset);
const resultBtn = document.getElementById("resultBtn");
resultBtn.addEventListener("click",calculate);
const result = document.getElementById("result");
let arr = new Array();
let str;
function reset(){
result.value="";
}
function input(e){
result.value = result.value + e.target.getAttribute("value");
// for(let i=0; i<result.value.length; i++){
// arr[i] = result.value[i];
// }
str = result.value;
//alert(str);
return str;
}
let val = 0;
let val1;
let val2;
function calculate(){
//1. result.value=eval(str);
//2.
if(str.includes("+")){
arr = str.split("+");
val1 = parseFloat(arr[0]);
val2 = parseFloat(arr[1]);
val = val1 + val2;
result.value = val;
}else if(str.includes("-")){
arr = str.split("-")
val1 = parseFloat(arr[0]);
val2 = parseFloat(arr[1]);
val = val1 - val2;
result.value = val;
}else if(str.includes("*")){
arr = str.split("*")
val1 = parseFloat(arr[0]);
val2 = parseFloat(arr[1]);
val = val1 * val2;
result.value = val;
}else if(str.includes("/")){
arr = str.split("/")
val1 = parseFloat(arr[0]);
val2 = parseFloat(arr[1]);
val = val1 / val2;
result.value = val;
}else{
alert("사칙연산 기호가 없습니다.");
}
}
</script>
</body>
</html>'Web-Frontend > JavaScript' 카테고리의 다른 글
| [JS] JSON타입으로 변경 후 테이블 생성하기 (0) | 2024.04.05 |
|---|---|
| [JS] 이벤트 연습 (0) | 2024.04.05 |
| [JS] 팝업창 구현하기 (0) | 2024.04.03 |
| [JS] 가위바위보 페이지 구현하기 (0) | 2024.04.02 |
| [JS] 배열 문법 연습 (0) | 2024.04.02 |
