- 분류 전체보기 (383)
Just Do IT!
[JavaScript] 계산기 만들기 (HTML+CSS+JS) 본문
복학하면서 오랜만에 동아리에 들어갔다. 멋쟁이사자처럼 11기인데, 매주 팀별 스터디도 있고, 단체 스터디도 있다.
나는 프론트엔드 스터디에 참여하면서 오랜만에 html, css, javascript를 이용해서 계산기 만드는 걸 했다.
지금까지 내배캠하면서 react, typescript 위주로 공부하다 보니 바닐라 자바스크립트를 만져본 게 오래전 같았는데 덕분에 간만에 자바스크립트를 해서 나름 재밌었다.
확실히 공부를 안 하면 까먹게 되는 것 같다. (이제 면접 준비도 해야 하니까 간단하게 복습 겸 회고 겸...블로그 올리기...ㅋㅋ)
HTML
너무 오랜만에 index.html 파일 안에서 작ㅇ버해서 그런지 태그를 까먹었다. ㅋㅋㅋㅋ 스터디 팀장이 올려준 예제대로 작업해야 해서 그대로 작업했는데, 진짜 계산기를 그리는 건 아니었다.
이게 우리 팀 노션 페이지에 올라온 예제 그림이었는데, 저 Operator 부분의 select 태그를 까먹어서 구글링했다 ㅋㅋㅋ
불과 얼마전에 react select 라이브러리를 설치해서 그걸 적용하는 프로젝트를 했었는데, 정작 html 태그는 까먹다니...새삼스레 기억력이 너무 신기했다. 그래도 구글링 한 번 하고 나니까 생각나서 간단히 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" />
<link rel="stylesheet" href="style.css" />
<title>JS Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<div class="calculator">
<div class="inputNum">
First number:
<input id="firstNum" type="text" />
</div>
<div class="inputNum">
Second number:
<input id="secondNum" type="text" />
</div>
<div class="operator">
Operator:
<select id="option" onChange="onChangeHandler()">
<option value="">연산자 선택</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
<button id="submit" onClick="Calculate()">Calculate</button>
<button id="reset" onClick="Reset()">Reset</button>
</div>
<div class="result">
Result:
<div class="result"></div>
</div>
<script src="main.js"></script>
</body>
</html>
이렇게 간단히 파일 기록 완료. 이건 tmi인데, css 파일을 어디다 링크해야 하는지도 까먹어서 예전에 만들었던 자바스크립트 계산기 파일을 다시 들여다 봤다. 기억력 무엇...ㅎ
JS 추가
리액트가 아닌 바닐라 자바스크립트로 코드를 짜는 게 너무 오랜만이었다. 뉴스 피드 프로젝트 할 때만 하더라도 엄청 열심히 공부하고 또 적용했었는데, 인간은 적응의 동물이기 때문에...너무 자연스럽게 jsx 문법 쓸 뻔 했다.
select 로 계산 옵션을 선택하기 때문에 여기서 onChange 함수가 필요했고, 그리고 버튼을 누르면 계산이 완료되는 형식이기 때문에 버튼을 누르면 계산이 되는 함수도 만들어야 했다. 그렇게 필요한 함수는 간단하게 2개.
오랜만에 getElementById() 를 이용했다. getElementById()는 태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수이다. 그래서 input 태그의 id에 접근하기 위해 이를 사용해서 접근했다. option이기 때문에 각 옵션 당 계산을 사용하기 위해 if 문을 썼고.
전체 코드는 아래와 갔다.
const onChangeHandler = () => {
let option = document.getElementById("option");
let option_value = option.options[option.selectedIndex].value;
return option_value;
};
const Calculate = () => {
let num1 = Number(document.getElementById("firstNum").value);
let num2 = Number(document.getElementById("secondNum").value);
let result;
let option = onChangeHandler();
// 연산자 선택
if (option === "+") {
result = num1 + num2;
} else if (option === "-") {
result = num1 - num2;
} else if (option === "*") {
result = num1 * num2;
} else if (option === "/") {
result = num1 / num2;
}
document.querySelector(".result").innerHTML = `Result: ${result}`;
};
const Reset = () => {
document.getElementById("firstNum").value = "";
document.getElementById("secondNum").value = "";
document.getElementById("option").value = "";
document.querySelector(".result").innerHTML = `Result: `;
};
아 하나 빼먹고 설명 안했는데, Reset 함수는 계산 후 다시 초기화하기 위해 만든 버튼이다. 전체 함수 내에서 버튼 클릭 후 자동으로 초기화 되는게 있나 싶었는데 도저히 생각이 나지 않아서 따로 reset 버튼을 만들고 그 함수를 추가해주었다.
option value에 접근하기 위해서 onChangeHandler() 함수에서 option_value 변수를 통해 접근해주었다. 처음 코드 구현할 때 저것도 까먹어서 구글링 좀 했다...ㅎㅎ 역시 공부 안하다가 하면 전부 까먹는 것 같다.
여튼 간단하지만 까먹었던 ㅋㅋㅋ 바닐라 자바스크립트로 계산기 만드는 걸 해보았다. 한 30분 정도? 걸렸던 것 같은데 나름대로 즐거운 경험이었다. 요즘 면접 준비 때문에 바닐라 자바스크립트 공부해야 했는데, 겸사겸사 오랜만에 재밌게 코드를 짜는 경험을 했다.
약간의 css를 이용해서 최종적으로 만든 계산기 파일은 위의 사진과 같다. html, css, js 로 따로 파일 분리해서 코드를 짜본게 얼마만인지...새삼스럽고 또 재밌었다. 예전에는 이거 하나 하는 것도 너무 신기했었는데...사실 이렇게 코드를 짜면 바로 나와서 프론트엔드를 하기로 했었는데, 그런 다짐을 다시 해보는 계기도 되었고.
간단하지만, 오랜만에 해서 간단하지는 않았던(?) 멋사 스터디 시간이었다.
'개발 공부 > JavaScript' 카테고리의 다른 글
| [JavaScript] 호이스팅(Hoisting)이란? (+ TDZ란) (0) | 2023.03.28 |
|---|---|
| [JavaScript] Parameter(매개변수)와 Argument(인자)의 차이 (0) | 2023.03.28 |
| [JavaScript] lodash 라이브러리 (0) | 2023.02.02 |
| [JavaScript] 정규 표현식 (Regular Expressions) 이해하기 (0) | 2022.12.16 |
| [JavaScript] 실행 컨텍스트 (0) | 2022.12.03 |
