계산기를 구현하라 0
자바의 스프링의 교육이 어느 정도 마쳐질 무렵
프로젝트를 위해 JS교육에 들어갔다.
JAVA 웹 프로그래밍 반인데 왜 프런트 앤드에서 쓰일 JS교육을 받느냐면,
웹 프로그래밍 프로젝트를 진행하려면 당연히 화면 부분이 필요한데
우리 반은 Java반으로 화면만을 담당하는 프론트 앤드 학생이 존재하지 않기 때문에
Java를 배우고 있는 우리가 스스로 프런트 앤드 부분까지 해결해야 하기 때문이다.
그렇기 때문에 수업 초기 HTML과 CSS의 교육이 이루어졌으며
프로젝트에 들어가기 전인 지금 간단한 JS를 배우게 된 것이다.
이틀 동안 자료형, 조건문, 반복문, 배열의 문법을 배우고 바로 첫 과제를 내주셨으니
바로 계산기 구현 과제였다.
요구사항
강사님께서 요구하신 계산기의 모형이었고
복잡한 계산이 아닌 345+23 정도의 간단한 계산식을 요구하셨다.
(23+23*43) 이러한 복잡 계산이 아니었다.
하지만
과제가 이렇다 한들 이렇게 끝내고 싶지 않은 게 사람의 욕심이었다.
추가
1. 소수점 자리 표현
2. 0일때 .을 제외한 모든 기호의 기능 제한
3. 연속된 기호 입력 제한
4. 왼쪽항과 오른쪽 항의 조건을 충족하였을 때 기호 선택 시 계산 후 결괏값 출력.
5. = 버튼을 눌렀을 때에는 해당 기호에 대한 기능을 수행하고 출력한뒤 저장 값 초기화.
HTML, CSS 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기</title>
<style>
#calculator {
width: 420px;
height: 500px;
}
#btnEqual {
float: left;
margin: 8px;
width: 80px;
height: 70px;
border: black solid 1px;
text-align: center;
font-size: 25px;
}
.inputDiv {
float: left;
margin: 8px;
padding: 0px 10px 0px 0px;
width: 278px;
height: 70px;
border: black solid 1px;
text-align: right;
font-size: 25px;
line-height: 70px;
}
.button {
float: left;
margin: 8px;
width: 80px;
height: 80px;
border: black solid 1px;
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="calculator">
<p id='inputDiv' class='inputDiv'></p>
<input id='btnEqual' class='button' value='＝' readonly>
<input id='btnSeven' class='button' value='7' readonly>
<input id='btnEight' class='button' value='8' readonly>
<input id='btnNine' class='button' value='9' readonly>
<input id='btnDivide' class='button' value='÷' readonly>
<input id='btnFour' class='button' value='4' readonly>
<input id='btnFive' class='button' value='5' readonly>
<input id='btnSix' class='button' value='6' readonly>
<input id='btnMulti' class='button' value='×' readonly>
<input id='btnOne' class='button' value='1' readonly>
<input id='btnTwo' class='button' value='2' readonly>
<input id='btnThree' class='button' value='3' readonly>
<input id='btnMinus' class='button' value='－' readonly>
<input id='btnCancel' class='button' value='C' readonly>
<input id='btnZero' class='button' value='0' readonly>
<input id='btnDot' class='button' value='.' readonly>
<input id='btnPlus' class='button' value='＋' readonly>
</div>
</body>1. float를 고려하여 계산기의 총 크기를 먼저 결정하였고, 적용시키기 위해 div를 생성하여 css로 크기를 정하였다.
2. 처음 input이 아닌 모든 값을 div로 모양을 정하고 값을 입력했으나, 어찌 된 이유인지 js에서 value값을 get하지 못해서
div를 포기하고 input으로 모두 변경한 후 value값을 지정하였다.
3. 보여지는 공간을 p태그를 사용하였는데 innerHTML을 할 경우 input 태그가 적용되지 않아 p 태그를 사용하였다.
왜 안되는지는 명확하게 확인하지 못하였다.
4. input 태그로 변경하면서 사람들이 수정하고 값을 입력할 수 있게 변하면서 수정을 금지시키기 위해 readonly 값을 추가로 설정하였다.
위의 코드를 사용하여 만들어진 계산기.
'회고록 > Archive' 카테고리의 다른 글
| [계산기 구현] 계산기를 구현하라 2 (완성) (0) | 2022.06.27 |
|---|---|
| [계산기 구현] 계산기를 구현하라 1 (JS) (0) | 2022.06.27 |
| [국비지원 교육] 02. IT 개발자 국비 지원 교육 준비, 국민 취업 지원 제도 (예체능 출신 비전공자 개발자 일기) (0) | 2022.06.11 |
| [국비지원 교육] 01. 국비 지원 학원 면접 탈락, 국비 지원 학원 알아 보는 법 (예체능 출신 비전공자 개발자 일기) (0) | 2022.06.09 |
| [국비지원 교육] 00. 퇴사하다. (예체능 출신 비전공자 개발자 일기) (0) | 2022.06.08 |
