티스토리 뷰

웹 개발

자바스크립트로 간단한 GUI 계산기 만들기

개발하는 맹꽁이 2022. 7. 22. 11:15

자바스크립트로 만든 간단한 계산기입니다.

정말 간단해요.

실행 화면

사실 이번에 처음 만드는 것은 아닙니다.

이전에 한번 만들었는데 소숫점 부분에서 꽉 막혔다가 어찌어찌 겨우 풀었습니다.

그리고 오늘, 내가 어떻게 그 부분을 해결했나 다시 생각해보기 위해 0부터 다시 만들어 보기로 했습니다.

그런데 전에는 명절 고속도로 처럼 꽉 막혔던 코드가 갑자기 뻥 뚤려서 그냥 쉽게 만들어버렸습니다.

내가 그때 왜 그 고생을 했는가...

 

암튼. 위의 사진을 보면, 아무런 꾸밈 없이 틀만 잡아놓은 모습입니다.

사실 저것도 기능을 모두 구현한 다음 뒤늦게 한 겁니다.

그리고 귀찮아서 더 안했어요.

그래도 심플하고 좋네요.

 

 

1. 환경

Windows 10, Chrome, Notepad++

 

 

2. HTML 소스

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Calculator</title>
	</head>
	<body>
		<main>
			<input type="text" value="0" id="display" class="display" readonly />
			<div class="btns">
				<button class="clear-btn" onclick="clearDisplay()">C</button>
				<button class="symbol-btn" onclick="clickSymbol(this)">÷</button>
			</div>
			<div class="btns">
				<button class="number-btn" onclick="clickNumber(this)">7</button>
				<button class="number-btn" onclick="clickNumber(this)">8</button>
				<button class="number-btn" onclick="clickNumber(this)">9</button>
				<button class="symbol-btn" onclick="clickSymbol(this)">×</button>
			</div>
			<div class="btns">
				<button class="number-btn" onclick="clickNumber(this)">4</button>
				<button class="number-btn" onclick="clickNumber(this)">5</button>
				<button class="number-btn" onclick="clickNumber(this)">6</button>
				<button class="symbol-btn" onclick="clickSymbol(this)">-</button>
			</div>
			<div class="btns">
				<button class="number-btn" onclick="clickNumber(this)">1</button>
				<button class="number-btn" onclick="clickNumber(this)">2</button>
				<button class="number-btn" onclick="clickNumber(this)">3</button>
				<button class="symbol-btn" onclick="clickSymbol(this)">+</button>
			</div>
			<div class="btns">
				<button class="zero-btn" onclick="clickNumber(this)">0</button>
				<button class="point-btn" onclick="clickPoint()">.</button>
				<button class="calculate-btn" onclick="getResult()">=</button>
			</div>
		</main>
		<script src="script.js" defer></script>
	</body>
</html>

버튼은 div 태그로 한줄씩 넣었습니다.

id를 지정하지 않고 onclick 이벤트를 태그 안에 넣었습니다.

 

아주 중요한 것!

스크립트 태그에 defer를 꼭 넣어주세요.

이유는 여기서 확인해주세요. https://brunch.co.kr/@jiwonleeqa/136

 

script defer 사용 권장 이유

html script 요소 | HTML <script> 요소 사용 방법은 다양한데요. '어떤 방법으로 사용되면 좋을까?', '각각 장단점은 무엇일까?', '이러한 상황일 땐 무엇을 사용해야 할까?'라는 고민에서 동작 원리를

brunch.co.kr

 

 

3. 자바스크립트 소스

let display = document.getElementById("display");
let calc = true;
let point = true;

function clearDisplay() {
	display.value = "0";
	calc = true;
	point = true;
}

function clickNumber(element) {
	if (display.value === "0") {
		display.value = element.innerHTML;
	} else {
		display.value += element.innerHTML;
	}
	
	if (!calc && !point) {
		point = true;
	}
	calc = true;
}

function clickSymbol(element) {
	if (calc && display.value.at(-1) !== ".") {
		display.value += element.innerHTML;
		calc = false;
		point = false;
	}
}

function clickPoint() {
	if (point) {
		display.value += ".";
		point = false;
	}
}

function getResult() {
	if (calc && display.value.at(-1) !== ".") {
		let evalString = display.value.replaceAll("×", "*").replaceAll("÷", "/");
		display.value = eval(evalString);
	}
}

굉장히 뭐가 없어요.

input에 버튼을 클릭할 때 마다 숫자, 기호를 넣어주고, = 버튼을 눌렀을 때 eval 함수가 input의 값을 코드로 바꿔 계산합니다.

eval 함수는 굉장히 위험한 함수입니다! 중요한 대형 프로젝트에는 절대로 사용하지 마세요. 자세한 내용은 여기서 확인해주세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval#eval%EC%9D%84_%EC%A0%88%EB%8C%80_%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80_%EB%A7%90_%EA%B2%83!

 

eval() - JavaScript | MDN

eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.

developer.mozilla.org

 

아 그리고 음수 기능은 처음부터 뺐습니다. 제 실력으로는 구현할 수 없어서요.

소숫점 부분에서 쩔쩔맸었는데 음수를 구현하다가는 제 머리가 남아나지 않을 겁니다.

 

 

3. CSS 소스

:root {
	--size: 80px;
	--font: 30px;
}

main {
	width: calc(var(--size) * 4);
	height: calc(var(--size) * 6);
}

.display {
	width: calc(var(--size) * 4);
	height: var(--size);
	box-sizing: border-box;
	font-size: var(--font);
	text-align: right;
	padding: 0 10px;
}

.display:focus {
	outline: 0;
}

.btns {
	font-size: 0;
}

button {
	height: var(--size);
	font-size: var(--font);
}

.clear-btn {
	width: calc(var(--size) * 3);
}

.number-btn, .symbol-btn, .point-btn, .calculate-btn {
	width: var(--size);
}

.zero-btn {
	width: calc(var(--size) * 2);
}

CSS에 변수가 있다는 것을 처음 알았어요.

CSS도 간단하죠?

 

 

간단한 것 같지만, 간단하지 않은 계산기.

하지만 자바스크립트를 연습하기 충분히 좋은 것 같습니다.

이 글에서 저는 코드에 대한 설명을 따로 하지 않았어요.

귀찮아서요.

그럼 공감과 구독 눌러주세요.

'웹 개발' 카테고리의 다른 글

맵을 매트릭스 배열로 만들어주는 매트릭스 맵 생성기  (0) 2023.06.18
타입스크립트로 만든 지뢰찾기  (2) 2023.04.03
대신 텍스트를 반복해주는 도배도배  (2) 2022.10.29
[HTML/CSS 클론] Google 검색 페이지 클론  (2) 2022.08.19
자바스크립트로 시계 만들기  (0) 2022.07.10
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함