티스토리 뷰
자바스크립트로 간단한 계산기를 작성해 보았습니다.
HTML
data-type 에 연산자(operator), 전체식 삭제(ac), 입력 값 하나만 삭제 (back), 등호(equal) 로 작성하였습니다.
등호(=)는 연산자에 속하지만 계산기 에서는 식의 완료 지점이므로, data-type을 dqual 로 설정하였습니다.
<body>
<h1>Calculator</h1>
<div id = "content">
<h2></h2> //계산 결과가 들어갈 식
<div class = "wrapper">
<div data-type="operator">+</div>
<div data-type="operator">-</div>
<div data-type="operator">×</div>
<div data-type="operator">÷</div>
<div>7</div> <div>8</div> <div>9</div> <div data-type="operator">.</div>
<div>4</div> <div>5</div> <div>6</div> <div class="ac" data-type="ac">AC</div>
<div>1</div> <div>2</div> <div>3</div> <div data-type="back" class = "back">←</div>
<div class = "zero">0</div>
<div class="equal" data-type="equal"><span>=</span></div>
</div>
</div>
</body>
<script src = "Calculator.js"></script>
CSS
CSS가 길어서 이번 코드에서 제일 중요하다고 생각되는 grid 속성 부분만 가지고왔습니다.
사실 자바스크립트를 제외하고 화면 구성만 본다면 아주 쉬웠습니다.
.wrapper{
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 50px 50px 50px 50px ;
}
.equal{
grid-column: 3/5;
}
.zero{
grid-column: 1/3;
}
JavaScript
1. HTML 요소 선택하기 (querySelector)
2. HTML 요소의 내용 읽어오기 (innerText)
3. 문자열의 길이 확인하기 (length)
4. 문자열의 일부분 잘라내기 (substring)
클래스를 작성하기 전에, switch를 사용하여 입력된 값들에 따라 콘솔에 찍어보았습니다.
const btns = document.querySelectorAll(".wrapper>div");
const displayElement = document.querySelector('h2');
const calculator = new Calculator(displayElement);
btns.forEach(btn=>{
btn.addEventListener('click',()=>{
switch (btn.dataset.type) {
case 'operator': //입력값이 연산자
console.log('operator')
break;
case 'equal': //입력값이 등호(=)
console.log('equal');
break;
case 'ac': // 전체 삭제 버튼
console.log('ac');
break;
case 'back': //하나만 삭제 버튼
console.log('back');
break;
default:
console.log('number');
break;
}
});
})
그리고 나서 기본 클래스 틀을 작성합니다.
equation( )이 조금 포인트였다고 생각하는데,
화면에는 곱하기 나누기가 ×, ÷ 로 표시되도록 html 작성시에 × ÷ 로 작성하였습니다.
이 친구들이 displayContent에 들어가게 되면 연산자로서 계산이 안되는 아쉬움이 있어서
*, / 으로 replace를 사용하여 변경하여 연산하도록 해주었습니다.
class Calculator{
constructor(displayElement){
this.displayElement = displayElement;
this.clear();
}
inputNumber(num){ // 숫자가 입력되면
this.displayContent += num; //displayContent에 해당 숫자 추가
}
inputOperator(operator){ // 연산자라면 연산자를 추가
this.displayContent += operator;
}
showDisplay(){ // h2 화면에 출력
this.displayElement.textContent = this.displayContent;
}
clear(){ // 전체 삭제 시에
this.operCheck=true;
this.displayContent='';
this.displayElement.textContent=0;
}
Back(){ // 하나만 삭제시
var text = this.displayContent;
var size = text.length -1;
this.displayContent = text.substring(0,size);
}
equation(){ //등호 입력되었을때
this.displayContent = eval(this.displayContent
.replace('\u00D7', '*')
.replace('\u00F7', '/'));
}
}
이렇게 기본적인 틀을 잡고 보니, 연산자를 이미 한번 입력했는데 또 입력이 되어서 식이 이상하게 변하고
등호(=) 를 입력한 뒤에 식의 결과는 출력되었는데, 다시 식을 입력하여 계산하려면 전체삭제버튼(AC)를 눌러야 하는
문제가 발생하였습니다.
operCheck : 연산자 입력 여부 저장
equalsCheck : 등호 입력 여부 저장
class Calculator{
constructor(displayElement){
this.displayElement = displayElement;
this.operCheck=true; // 연산자 선택 여부 저장
this.equalsCheck = false; //등호 선택 여부 저장
this.clear();
}
inputNumber(num){ //num 이 추가되면
if(this.equalsCheck){ // 등호 입력이 true이면
this.displayContent = num; // displayContent의 결과는 num이야
this.equalsCheck=false;
}
else //등호 입력이 false 라면
{
this.displayContent += num; // displayContent에 num을 추가해
}
this.operCheck=false; // 그리고 나는 연산자는 false야
}
inputOperator(operator){
if(this.operCheck) return false;// operCheck 값이 true 면 함수 탈출
if(this.equalsCheck) this.equalsCheck=false;
this.displayContent += operator;
return this.operCheck=true; // 앞에 연산자가 추가되서 연산자버튼 true를 리턴
}
showDisplay(){
this.displayElement.textContent = this.displayContent;
}
clear(){
this.operCheck=true;
this.displayContent='';
this.displayElement.textContent=0;
//this.displayElement.value=0; input태그에 불러올때는 value에 가져오면 됨
}
Back(){
var text = this.displayContent;
var size = text.length -1;
this.displayContent = text.substring(0,size);
}
equation(){ //등호가 입력되면 eval함수를 사용해서 연산하고 그걸 displayContent 에 저장해
this.displayContent = eval(this.displayContent
.replace('\u00D7', '*')
.replace('\u00F7', '/'));
this.equalsCheck = true; //등호 입력 true다!
}
}
이렇게 주석으로 간단하게 설명을 달아보았습니다.
[ 링크 ]
Github Repository : https://github.com/notrowing/Calculator.git
GitHub - notrowing/Calculator
Contribute to notrowing/Calculator development by creating an account on GitHub.
github.com
'front-end' 카테고리의 다른 글
| [html , css] 인스타그램 클론 코딩 3. UserPage (0) | 2023.11.05 |
|---|---|
| [html , css] 인스타그램 클론 코딩 2. main (0) | 2023.11.05 |
| [html , css] 인스타그램 클론 코딩 1. login (0) | 2023.11.05 |