*공부 목적으로 작성된 코드이므로 몇몇의 블로그 코드들이 보일 수 있음.
HTML/JS
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="UTF-8">
<title>Margarets's Calculator</title>
<script>
let remember="";
function cal(num){
myform.win.value += num;
remember+=String(num);
}
function equal(){
try{
myform.win.value = eval(document.myform.win.value);
remember="";
}catch(e){alert('잘못된 연산오류 입니다')}
}
function clean(){
myform.win.value = "";
remember="";
}
function back(){
if(myform.win.value != ""){
remember=remember.slice(0,-1);
myform.win.value=remember;
}
}
</script>
</head>
<body>
<div class="frame">
<div class="display">
<form name="myform" id="calc">
<div class="title" style="margin-bottom: 2px;">
<span style="font-size: 18pt;">똑똑한 계산기</span></div>
<input type="text" id="win">
</form>
</div>
<div class="num_button_frame">
<table class="num_pad">
<tr>
<td><input class="button" type="button" value="C" onclick="clean()"></td>
<td><input class="button" type="button" value="<" onclick="back()"></td>
<td><input class="button" type="button" value="/" onclick="cal('/')"></td>
<td><input class="button" type="button" value="X" onclick="cal('*')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7" onclick="cal(7)"></td>
<td><input class="button" type="button" value="8" onclick="cal(8)"></td>
<td><input class="button" type="button" value="9" onclick="cal(9)"></td>
<td><input class="button" type="button" value="-" onclick="cal('-')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="4" onclick="cal(4)"></td>
<td><input class="button" type="button" value="5" onclick="cal(5)"></td>
<td><input class="button" type="button" value="6" onclick="cal(6)"></td>
<td><input class="button" type="button" value="+" onclick="cal('+')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="cal(1)"></td>
<td><input class="button" type="button" value="2" onclick="cal(2)"></td>
<td><input class="button" type="button" value="3" onclick="cal(3)"></td>
<td rowspan="2"><input class="button" style="height:97%" type="button" value="=" onclick="equal()"></td>
</tr>
<tr>
<td colspan="2"><input class="button" style="width:98%" type="button" value="0" onclick="cal('0')"></td>
<td><input class="button" type="button" value="." onclick="cal('.')"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
솔직히 HTML 파트야 너무 간단한거고, 세로칸을 합치고 가로칸을 합치는 것 쯤이야 다들 알고 있을것 같다.
JS 고자인 나는 JS파트에서 애를 먹었는데 그 애를 먹인 부분은 바로
바로 이 꺽쇠다. 직전 값을 되돌리는 undo와 동일한데 난 이런 JS는 진짜 완전 초짜부분이란 말이지!
나와 똑같이 html, CSS, JS로 짠 사람들 중 가장 간결하고 이해하기 쉬운 사람의 JS코드를 들고와 custom했다.
그 분의 계산기에는 꺽쇠(undo) 기능이 없었기 때문에 직접 구현해야했다.
모르는 코드더라도 침착하게 파악하면 간단한 응용은 가능할테니까! 어떻게 할까 고민했다.
이때까지 입력받은 수와 기호를 문자열에 저장한 후 undo 기능이 들어오면 맨 끝 글자부터 자르면 되지않을까?
라는 생각에 slice를 썼고 그 결과는 꽤 양호했다. if문으로 문자열이 없을땐 자르지 못하도록 처리했으니!
CSS
html,body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: indianred;
}
.frame{
text-align: center;;
display: inline-block;
width: 380px;
height: 600px;
}
.display{
height: 18%;
float: left;
width: 100%;
}
.num_button_frame{
float: left;
width: 100%;
height: 82%;
}
.display form{
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
}
.display input{
width: 96%;
height: 62%;
}
.num_pad{
height: 100%;
width: 100%;
}
.button{
width: 85px;
height: 85px;
border: 0;
outline: 0;
background-color: #4d4d4d;
font-size: 25pt;
color: white;
text-align: center;
}
.button:hover {
background-color: #ffffff;
color: #4d4d4d;
}
tr{
height: 20%;
}
#win{
font-size: 20pt;
}
결과물
'WEB' 카테고리의 다른 글
| Dropbox Api + Node.Js를 사용하여 이미지 호스팅 사이트 만들기 (작성중~) (1) | 2019.11.19 |
|---|
