2023.10.19
계산기
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>calculator</title>
</head>
<style></style>
<body>
<fieldset>
<div id="result1" class="group1">0</div>
<div id="result2" class="group1">0</div>
<button class="functions" id="AC" onclick="allClear()">AC</button>
<button class="functions" id="clac" onclick="clac()">=</button>
<div class="group2">
<button id="num" onclick="btnNum('7')">7</button>
<button id="num" onclick="btnNum('8')">8</button>
<button id="num" onclick="btnNum('9')">9</button>
<button id="oper" onclick="btnOper('+')">+</button>
</div>
<div class="group2">
<button id="num" onclick="btnNum('4')">4</button>
<button id="num" onclick="btnNum('5')">5</button>
<button id="num" onclick="btnNum('6')">6</button>
<button id="oper" onclick="btnOper('-')">-</button>
</div>
<div class="group2">
<button id="num" onclick="btnNum('1')">1</button>
<button id="num" onclick="btnNum('2')">2</button>
<button id="num" onclick="btnNum('3')">3</button>
<button id="oper" onclick="btnOper('*')">*</button>
</div>
<div class="group2">
<button id="num0" onclick="btnNum('0')">0</button>
<button id="num" onclick="btnNum('.')">.</button>
<button id="oper" onclick="btnOper('/')">/</button>
</div>
</fieldset>
</body>
<script src="./calcMain.js"></script>
</html>
css
fieldset {
background-color:chocolate;
text-align:center;
border-radius:10px;
padding:10px;
width: 360px;
}
div {
border-radius:10px;
margin:10px
}
.group1 {
background-color: aquamarine;
color:blue;
font-size: 20px;
height:50px;
line-height: 50px;
}
.functions {
background-color: chartreuse;
border-radius: 10px;
font-size:18px;
width:160px;
height:40px;
line-height:40px;
}
#num {
background-color:darkslateblue;
color:aliceblue;
border-radius: 10px;
font-size: 15px;
width:80px;
height:40px;
line-height:40px;
}
#num0 {
background-color:darkslateblue;
color:aliceblue;
border-radius: 10px;
font-size: 15px;
width:165px;
height:40px;
line-height:40px;
}
#oper {
background-color:deeppink;
color:aliceblue;
border-radius:10px;
font-size:20px;
width:70px;
height:40px;
line-height:40px;
}
#num:active {
background-color:cornflowerblue;
color:aliceblue;
}
#num0:active {
background-color:cornflowerblue;
color:aliceblue;
}
#oper:active {
background-color: gold;
color:black;
}
.functions:active {
background-color:orchid;
color:black;
}
js
let txt = "";
let temp = "";
let cnt = 0;
let result1 = document.getElementById("result1");
let result2 = document.getElementById("result2");
function btnNum(num) {
if (cnt == 0) {
txt += num;
result1.innerHTML = txt;
result2.innerHTML = txt;
} else {
txt += num;
result2.innerHTML = txt;
}
}
function btnOper(oper) {
if (cnt == 0) {
txt += oper;
result1.innerHTML = txt;
txt = "";
cnt++;
} else {
// div 요소의 값은 .value가 아닌 .innerHTML(or .innerTEXT)로 가져와야 함
temp = result1.innerHTML + result2.innerHTML;
let resultTemp = eval(temp);
result1.innerHTML = resultTemp + oper;
result2.innerHTML = resultTemp;
txt = "";
}
}
function allClear() {
txt = "";
result1.innerHTML = "0";
result2.innerHTML = "0";
cnt = 0;
}
function clac() {
temp = result1.innerHTML + result2.innerHTML;
let resultTemp = eval(temp);
result1.innerHTML = resultTemp;
result2.innerHTML = resultTemp;
txt = "";
cnt = 0;
}
실행결과
ATM
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>ATM</title>
</head>
<style></style>
<body>
<fieldset>
<legend><img src="./img/ATM.PNG"></legend>
<input type="text" id="input" placeholder="금액을 입력하세요"/><br/><br/>
<input type="image" id="deposit" src="./img/입금.PNG">
<input type="image" id="withdraw" src="./img/출금.PNG">
<input type="image" id="balance" src="./img/잔액.PNG"><br/>
<h2>=====================</h2>
<div id="result"></div>
</fieldset>
</body>
<script src="./AtmMain.js">
</script>
</html>
css
fieldset {
width:300px;
height:550px;
text-align:center;
}
#balance {
width:80px;
height:70px;
}
js
let txt = "";
let result = document.getElementById("result");
let Account = {};
Account.balance = 0;
// input 태그에 커서 활성화(focus)하기 위한 함수
function focusOn(tagName) {
document.getElementById(`${tagName}`).focus();
}
// 숫자에 10^3 단위로 comma(,) 찍어주는 함수
function toKcurrency(num) {
let kCurrency = new Intl.NumberFormat('ko-KR').format(num);
return kCurrency;
}
// 입력한 값이 숫자일 때만 입력한 문자열을 int로 parsing 후 리턴
function inputMoney() {
txt = document.getElementById("input").value;
if (isNaN(txt)) {
return false;
} else {
let money = parseInt(txt);
return money;
}
}
let deposit = document.getElementById("deposit");
deposit.addEventListener("click", () => {
focusOn("input");
if (!inputMoney()) {
txt = `잘못된 입력입니다. 다시 입력하세요...`;
result.innerHTML = txt;
} else {
Account.balance += inputMoney();
txt = `${toKcurrency(inputMoney())}원 입금 성공!<br/>잔액 : ${toKcurrency(Account.balance)}원`
result.innerHTML = txt;
}
})
let withdraw = document.getElementById("withdraw");
withdraw.addEventListener("click", () => {
focusOn("input");
if (!inputMoney()) {
txt = `잘못된 입력입니다. 다시 입력하세요...`;
result.innerHTML = txt;
} else {
if (inputMoney() > Account.balance) {
txt = `출금 실패!<br/> 잔액이 ${toKcurrency(inputMoney() - Account.balance)}원 부족합니다.`;
result.innerHTML = txt;
} else {
Account.balance -= inputMoney();
txt = `${toKcurrency(inputMoney())}원 출금 성공!<br/>잔액 : ${toKcurrency(Account.balance)}원`;
result.innerHTML = txt;
}
}
})
let checkBalance = document.getElementById("balance");
checkBalance.addEventListener("click", () => {
focusOn("input");
txt = `잔액 : ${toKcurrency(Account.balance)}원`;
result.innerHTML = txt;
})
실행결과
'Spring-Java > Front-End' 카테고리의 다른 글
| Day45_Interval 함수, Date(), Timer예제 (3) | 2023.10.22 |
|---|---|
| Day43_객체 (0) | 2023.10.21 |
| Day42_배열, 배열의 다양한 기능 (1) | 2023.10.21 |
| Day41_자바스크립트, 자료형, 변수와 함수(addEventListener, jQuery) (1) | 2023.10.21 |
| Day40_상속, 넘침 (0) | 2023.10.16 |