[항해 플러스 코육대 토이프로젝트] 세뱃돈 계산기 만들기

계산기를 만드는 과정

0. SPRING, HTML, CSS, JAVASCRIPT를 사용하여 세뱃돈 계산기를 만들었다. 

 

1. 계산기 뼈대는 table 태그를 사용했다. 1x4 테이블을 7줄 만들었다. display(입력) 병합 후 input 태그를 만들어줬고, result(결과) 부분도 병합후 input 태그를 만들어줬다. 각 테이블의 데이타를 클릭하면 onclick 이벤트가 발생하고 각 데이터에 맞는 문자(char)를 입력칸에 add 한다. 

 

<table border="2">
        <tr>
            <td colspan="4">
                <input type="text" id="display" placeholder="0(KRW)">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="result">
            </td>
        </tr>
        <tr>
            <td colspan="2" onclick="reset1()">AC</td>
            <td onclick="reset2()">C</td>
            <td onclick="add('/')">/</td>
        </tr>
        <tr>
            <td onclick="add(7)">7</td>
            <td onclick="add(8)">8</td>
            <td onclick="add(9)">9</td>
            <td onclick="add('*')">*</td>
        </tr>
        <tr>
            <td onclick="add(4)">4</td>
            <td onclick="add(5)">5</td>
            <td onclick="add(6)">6</td>
            <td onclick="add('-')">-</td>
        </tr>
        <tr>
            <td onclick="add(1)">1</td>
            <td onclick="add(2)">2</td>
            <td onclick="add(3)">3</td>
            <td onclick="add('+')">+</td>
        </tr>
        <tr>
            <td colspan="2" onclick="add(0)">0</td>
            <td onclick="add('.')">.</td>
            <td onclick="calculate()">=</td>
        </tr>
    </table>

 

2. reset1() - AC버튼, reset2() - C버튼 , add() - 입력, calculate() - 출력에 해당하는 javascript 함수를 만들어준다. 

<script>
	//display 화면에 숫자, 연산자 추가 
	var numberClicked = false;
	var display = document.getElementById('display');
	function add(char) {
		// 입력창이 비어있거나 입력 받은 첫번째 값이 연산자라면 작동되지 않음.
		if (display.value === "" && isNaN(char)) {
	        return;
	    }
	    if(numberClicked == false) { // 연산자가 입력되어 있는데
            if(isNaN(char) == true) { //입력된 값이 숫자가 아니라면(연산자라면) 현재 연산자를 지우고 입력된 연산자를 추가한다.
            	var currentValue = display.value;
                var newValue = currentValue.substring(0, currentValue.length - 1) + char;
                display.value = newValue;
                
            } else { // 숫자라면
                document.getElementById('display').value += char; // 연산자 뒤에 추가한다.
            }
        } else { // 숫자를 입력했다면 
            document.getElementById('display').value += char; // 연산자 뒤에 값을 추가한다.
        }
	    // 다음 입력을 위한 numberClicked 설정
        if(isNaN(char) == true) { //"만약 숫자가 아닌게 참이라면" = "연산자를 눌렀다면"
            numberClicked = false; // numberClicked를 false로 설정한다.
        } else {
            numberClicked = true; // numberClicked를 true로 설정한다.
        }
	}
	
	// 입력된 값 계산
	function calculate() {
	    var display = document.getElementById('display');
	    try {
	        var input = display.value.trim();
	        // 입력된 값 체크
	        if (!input) {
	            throw new Error("식을 입력하세요.");
	        }
			// +,-,*,/ 를 적은 후 숫자를 입력하지 않는 경우 체크 
	        if (input.endsWith('+') || input.endsWith('-') || input.endsWith('*') || input.endsWith('/')) {
	            throw new Error("식을 완전히 입력하세요.");
	        }
	        // eval 함수 사용하여 계산 					
	        var result = eval(input);
	        result = result.toString(); // 결과 값을 문자열로 변환 
			
	        if (result.length >= 10) { //결과가 10자리 이상이면 Infinity 출력
	            result = "Infinity";
	        } else {
	            result = parseInt(result); // 아니면 결과 값을 정수로 변환함
	        }
	        
	        if (isNaN(result)) { // 0나누기 0과 같이 값이 정의되지 않는 경우 "숫자 아님" 출력 
				  alert("숫자 아님");
			}
	        
	        if (result >= 0) {
	        	result = result.toLocaleString('ko-KR');	// 천단위 콤마 찍는 함수 사용
	            document.getElementById('result').value = result;
	        } else {
	            document.getElementById('result').value = "결과는 0 이상이어야 함.";
	        }
	        
	    } catch (error) {
	        alert(error.message);
	    }
	}
	
	//AC 버튼
	function reset1() {
	    document.getElementById('display').value = "";
	    document.getElementById('result').value = "";
	}
	//C 버튼
	function reset2() {
		var display = document.getElementById('display');
	    var currentValue = display.value;
	    
	    // 현재 입력 값에서 마지막 문자를 제거합니다.
	    var newValue = currentValue.slice(0, -1);
	    
	    // 수정된 값을 다시 표시합니다.
	    display.value = newValue;
	}
</script>

 

3. 가을 느낌의 계산기로 CSS를 설정해줬다. 

<style>
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #F5DEB3; 
}

.calculator {
    background-color: #8B4513; 
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
    width: 40px; 
}

table {
    border-collapse: separate; 
    border-spacing: 5px; 
    border-radius: 10px;
    width: 40%;
}

td {
    padding: 10px;
    text-align: center;
    font-size: 20px;
    color: #F5DEB3; 
    background-color: #8B4513; 
    border-radius: 5px; 
}

input[type="text"] {
    text-align: right;
    border: none;
    background-color: #D2B48C; 
    color: #8B4513; 
    border-radius: 5px; 
    width: 90%;
    padding: 10px;
    font-size: 20px;
    margin: 5px 0;
}

input:focus {
    outline: none;
}
</style>

 

4. 혼자 여러번 사용해보고, 주변 사람들에게 테스트를 맡겼다. 유용하냐고 물어보니 유용하다고 대답하는 사람이 있었다. 나는 솔직히 잘 모르겠다. 

 

5.  spring으로 실행하면 홈화면에 세뱃돈 링크 버튼이 생긴다. '세뱃돈 계산하러 갑시다!'를 누르면 계산기 페이지가 나온다. 

 

제약사항 어려웠던 부분 

1. 세뱃돈은 한국 원화(KRW)로 주어지며, 최대 10자리 숫자까지만 입력됩니다.​  

- 이 부분은 구현하지 못했다. 숫자를 10자리까지 입력하면 display가 입력되지 않게 만드는 것은 쉬웠다. 그러나 연산자까지 포함하여 만드는 것이 쉽지 않았다. maxlength를 사용하면 input창에 직접 입력하는 text가 10자리로 제한이 된다. 하지만 계산기 숫자를 클릭하면 onclick 이벤트가 작동되는데 이것과 별개로 작동되는 문제가 발생했다. 

 

2.  10자리 숫자를 넘어가는 결과값은 Infinity 로 표기됩니다. 

if (result.length >= 10) { //결과가 10자리 이상이면 Infinity 출력
        result = "Infinity";
    } else {
        result = parseInt(result); // 아니면 결과 값을 정수로 변환함
    }

 

3. 0 나누기 0 과 같은 예외 결과값은 ‘숫자 아님’ 으로 표시됩니다.

- isNaN 함수를 사용하여 0나누기 0과 같이 값이 정의되지 않는 경우(false) alert를 띄워줬다. 

if (isNaN(result)) { // 0나누기 0과 같이 값이 정의되지 않는 경우 "숫자 아님" 출력 
    alert("숫자 아님");
}

 

4. 연산자를 연달아 선택할 경우 마지막에 선택한 연산자가 적용되어야 합니다. 

- substring()을 사용하여 문자열의 일부분을 추출했다. 첫글자부터 마지막글자에서 -1한 값을 추출하고 add함수에 입력된 연산자를 더해준다. 

if(numberClicked == false) { // 연산자가 입력되어 있는데
    if(isNaN(char) == true) { //입력된 값이 숫자가 아니라면(연산자라면) 현재 연산자를 지우고 입력된 연산자를 추가한다.
        var currentValue = display.value;
        var newValue = currentValue.substring(0, currentValue.length - 1) + char;
        display.value = newValue;

    } else { // 숫자라면
        document.getElementById('display').value += char; // 연산자 뒤에 추가한다.
    }
} else { // 숫자를 입력했다면 
    document.getElementById('display').value += char; // 연산자 뒤에 값을 추가한다.
}

 

 

GitHub 배포 

https://jsh419.github.io/ChuseokCalculator/calculate.html

 

마이크로소프트 계산기 GitHub 

https://github.com/Microsoft/calculator

GitHub - microsoft/calculator: Windows Calculator: A simple yet powerful calculator that ships with Windows

몰랐는데 마이크로소프트의 window 계산기 GitHub 링크가 있었다. 처음부터 이 코드를 참고해서 만들었다면 어땠을까 하는 아쉬움이 있다. 

 

참여소감

완성이라고 하기에는 부끄러운 결과물이다. 그러나 연휴 기간 동안 코딩 공부를 조금이라도 더 할 수 있어서 좋았다. 

 

코육대 이벤트 페이지 링크 

코육대 이벤트 페이지 링크 

https://hanghaeplus-coyukdae.oopy.io/