간단한 사칙연산이 가능한 계산기를 만들어 보려고한다.
3가지 방식으로 만들어볼 계획이며 코드 작성 후 velog에 리뷰해 볼 계획이다.
이번에 만든 계산기는 js파일을 따로 생성하지 않고 html 안에 javascript언어를 사용하여 간단하게만 코드를 작성하여 만들어주었다.
✍ 계산기 만들기 개발 순서
1. html로 뼈대 만들기
2. display: grid를 이용하여 배치하기
3. css로 디자인
4. type="button" 클릭시 type="text"에 화면에 출력되도록 하기
5. eval 함수를 이용하여 계산 기능 구현하기( = 버튼 눌렀을때)
📌 index.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>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly />
<input type="button"value="1"onclick="document.forms.output.value+='1'"/>
<input type="button" value="2" onclick="document.forms.output.value +='2'" />
<input type="button" value="3" onclick="document.forms.output.value+='3'" />
<input type="button" value="+" class="operator" onclick="document.forms.output.value+='+'" />
<input type="button" value="4" onclick="document.forms.output.value+='4'" />
<input type="button" value="5" onclick="document.forms.output.value+='5'" />
<input type="button" value="6" onclick="document.forms.output.value+='6'" />
<input type="button" value="-" class="operator" onclick="document.forms.output.value+='-'" />
<input type="button" value="7" onclick="document.forms.output.value+='7'" />
<input type="button" value="8" onclick="document.forms.output.value+='8'" />
<input type="button" value="9" onclick="document.forms.output.value+='9'" />
<input type="button" value="*" class="operator" onclick="document.forms.output.value+='*'" />
<input type="button" value="AC" class="clear" onclick="document.forms.output.value=''" />
<input type="button" value="0" onclick="document.forms.output.value+='0'" />
<input type="button" value="=" class="operator_result" onclick="document.forms.output.value=eval(document.forms.output.value)" />
<input type="button" value="/" class="operator" onclick="document.forms.output.value+='/'" />
</form>
</div>
</body>
</html>
📌 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 287px;
border: 1px solid #333;
background-color: #ccc;
padding: 5px;
}
.calculator form {
display: grid;
grid-template-columns: repeat(4, 65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculator form input {
border: 2px solid #333;
cursor: pointer;
font-size: 19px;
}
.calculator form input:hover {
box-shadow: 1px 1px 2px #333;
}
.calculator form input[type="text"] {
grid-column: span 4;
text-align: right;
padding: 0 10px;
}
✍ code reveiw
<!-- html
1) 총 17개 input 태그를 만든 후 form으로 감싸주었다.
결과 화면은 type="text"로 숫자와 연산자는 type="button"로 만들어주었다.
-->
<form name="forms">
<input type="text" name="output" readonly />
<input type="button"value="1"onclick="document.forms.output.value+='1'"/>
<input type="button" value="2" onclick="document.forms.output.value +='2'" />
<input type="button" value="3" onclick="document.forms.output.value+='3'" />
<input type="button" value="+" class="operator" onclick="document.forms.output.value+='+'" />
<input type="button" value="4" onclick="document.forms.output.value+='4'" />
<input type="button" value="5" onclick="document.forms.output.value+='5'" />
<input type="button" value="6" onclick="document.forms.output.value+='6'" />
<input type="button" value="-" class="operator" onclick="document.forms.output.value+='-'" />
<input type="button" value="7" onclick="document.forms.output.value+='7'" />
<input type="button" value="8" onclick="document.forms.output.value+='8'" />
<input type="button" value="9" onclick="document.forms.output.value+='9'" />
<input type="button" value="*" class="operator" onclick="document.forms.output.value+='*'" />
<input type="button" value="AC" class="clear" onclick="document.forms.output.value=''" />
<input type="button" value="0" onclick="document.forms.output.value+='0'" />
<input type="button" value="=" class="operator_result" onclick="document.forms.output.value=eval(document.forms.output.value)" />
<input type="button" value="/" class="operator" onclick="document.forms.output.value+='/'" />
</form>/* css
2) display: grid를 이용하여 input 태그들을 행과 열로 나누어 배치해준다.
*/
.calculator form {
display: grid;
grid-template-columns: repeat(4, 65px); /* repeat() 함수를 사용하여 반복되는 크기 설정 가능 */
grid-auto-rows: 65px;
grid-gap: 5px; /* 그리드 아이템 사이의 간격 */
}<!-- html
3) js파일을 따로 만들지 않고 html에서 input type="button" onclick에 js기능을 추가하여 만들었다.
1. form과 input type="text"(출력창)에 name을 설정해준다.
2. button 태그를 가진 input 안에 onclick을 주어 해당 키패드를 눌렀을때 출력창에 표시되게끔 설정해준다.
이때, value가 "AC" 인경우 화면에 아무것도 출력되지 않도록 다른것과 다르게 설정해준다.
3. 마지막으로 eval() 함수를 통해서 화면에 출력된 계산식이 실제로 계산될 수 있도록 만들어준다.
-->
<form name="forms">
<input type="text" name="output" readonly />
<input
type="button"
value="1"
onclick="document.forms.output.value+='1'"
/> <!--버튼클릭시 name이 "output"인 화면에 value로 '1'을 더해준다.-->
<input
type="button"
value="2"
onclick="document.forms.output.value +='2'"
/>
<input
type="button"
value="3"
onclick="document.forms.output.value+='3'"
/>
<input
type="button"
value="+"
class="operator"
onclick="document.forms.output.value+='+'"
/> <!--버튼클릭시 name이 "output"인 화면에 value로 '+'를 더해준다.-->
<input
type="button"
value="4"
onclick="document.forms.output.value+='4'"
/>
<input
type="button"
value="5"
onclick="document.forms.output.value+='5'"
/>
<input
type="button"
value="6"
onclick="document.forms.output.value+='6'"
/>
<input
type="button"
value="-"
class="operator"
onclick="document.forms.output.value+='-'"
/>
<input
type="button"
value="7"
onclick="document.forms.output.value+='7'"
/>
<input
type="button"
value="8"
onclick="document.forms.output.value+='8'"
/>
<input
type="button"
value="9"
onclick="document.forms.output.value+='9'"
/>
<input
type="button"
value="*"
class="operator"
onclick="document.forms.output.value+='*'"
/>
<input
type="button"
value="AC"
class="clear"
onclick="document.forms.output.value=''"
/> <!--버튼클릭시 name이 "output"인 화면에 value로 ''를 준다.-->
<input
type="button"
value="0"
onclick="document.forms.output.value+='0'"
/>
<input
type="button"
value="="
class="operator_result"
onclick="document.forms.output.value=eval(document.forms.output.value)"
/> <!-- eval() 함수를 통해서 화면에 출력된 계산식이 실제로 계산될 수 있도록 만들어준다. -->
<input
type="button"
value="/"
class="operator"
onclick="document.forms.output.value+='/'"
/>
</form>
📚 다음에 만들 계산기는?
이번엔 javascript 언어 사용을 최소한으로 써서 간단하게 만들어봤지만, 다음번에 만들 계산기는 html을 간단하게 작성하고 javascript로 최대한 기능 구현을 해서 만들어보려고 한다.
여러 프로젝트를 만들어보는것도 좋은 방법이지만 한가지를 여러 방법으로(기능구현) 만들어보는게 더 재밌고 공부가 될것같아서 이 방법으로 진행해보려고 한다.
