본문 바로가기
Project ESG+AI/Tech Basics

[참고]계산기 코드 짠거

by GreenJin_S2 2025. 10. 15.

 

 

Calculator

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계산기</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fce7f3;
        }
       
        .calculator {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
       
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
       
        .input-group {
            margin-bottom: 20px;
        }
       
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
       
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
       
        select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            background-color: white;
            cursor: pointer;
        }
       
        button {
            width: 100%;
            padding: 15px;
            background-color: #fbbf24;
            color: #333;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
        }
       
        button:hover {
            background-color: #f59e0b;
        }
       
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #6db2f7;
            border-radius: 5px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
       
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>계산기</h1>
       
        <div class="input-group">
            <label for="num1">첫 번째 숫자:</label>
            <input type="number" id="num1" placeholder="숫자를 입력하세요">
        </div>
       
        <div class="input-group">
            <label for="operation">연산자:</label>
            <select id="operation">
                <option value="add">덧셈 (+)</option>
                <option value="subtract">뺄셈 (-)</option>
                <option value="multiply">곱셈 (×)</option>
                <option value="divide">나눗셈 (÷)</option>
            </select>
        </div>
       
        <div class="input-group">
            <label for="num2">두 번째 숫자:</label>
            <input type="number" id="num2" placeholder="숫자를 입력하세요">
        </div>
       
        <button onclick="calculate()">계산하기</button>
       
        <div id="result" class="result" style="display: none;"></div>
    </div>
   
    <form action="/calculator/calculator" method="get">
        <input type="text" name="num1" placeholder="숫자1 입력">
        <input type="text" name="num2" placeholder="숫자2 입력">
        <button type="submit">계산</button>
    </form>

    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const operation = document.getElementById('operation').value;
            const resultDiv = document.getElementById('result');
           
            // 입력값 검증
            if (isNaN(num1) || isNaN(num2)) {
                resultDiv.textContent = '올바른 숫자를 입력해주세요!';
                resultDiv.className = 'result error';
                resultDiv.style.display = 'block';
                return;
            }
           
            let result;
            let operationText;
           
            switch(operation) {
                case 'add':
                    result = num1 + num2;
                    operationText = '+';
                    break;
                case 'subtract':
                    result = num1 - num2;
                    operationText = '-';
                    break;
                case 'multiply':
                    result = num1 * num2;
                    operationText = '×';
                    break;
                case 'divide':
                    if (num2 === 0) {
                        resultDiv.textContent = '0으로 나눌 수 없습니다!';
                        resultDiv.className = 'result error';
                        resultDiv.style.display = 'block';
                        return;
                    }
                    result = num1 / num2;
                    operationText = '÷';
                    break;
                default:
                    resultDiv.textContent = '올바른 연산자를 선택해주세요!';
                    resultDiv.className = 'result error';
                    resultDiv.style.display = 'block';
                    return;
            }
           
            // 결과 표시
            resultDiv.textContent = `${num1} ${operationText} ${num2} = ${result}`;
            resultDiv.className = 'result';
            resultDiv.style.display = 'block';
        }
       
        // Enter 키로 계산하기
        document.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                calculate();
            }
        });
    </script>
</body>
</html>

예전 html에서 입력값 나오는게 안되어서 chat gpt한테 다시 짜달라고 함, 위에는 그 전버전

 

 

package com.seoeunjin.api.calculator.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.seoeunjin.api.calculator.domain.CalculatorDTO;
import com.seoeunjin.api.calculator.service.CalculatorService;

@Controller
public class CalculatorController {

    private final CalculatorService calculatorService;

    public CalculatorController(CalculatorService calculatorService) {
        this.calculatorService = calculatorService;
    }
   
    @GetMapping("/calculator/calculator")
    public String calculator(@RequestParam(value = "num1", required = false) String num1,
                         @RequestParam(value = "num2", required = false) String num2) {

    System.out.println("컨트롤러로 들어옴");
    System.out.println("num1: " + num1 + ", num2: " + num2);

    if(num1 != null && num2 != null) {
        CalculatorDTO calculatorDTO = new CalculatorDTO();
        calculatorDTO.setNum1(num1);
        calculatorDTO.setNum2(num2);
        calculatorService.calculator(calculatorDTO);
    }

    return "calculator/calculator"; // templates/calculator/calculator.html
}

}

 

controller는 이게 맞음!

그 후 수정버전! 이제 디자인도 괜찮고 컨트롤러로도 들어옴

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계산기</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fce7f3;
        }
       
        .calculator {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
       
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
       
        .input-group {
            margin-bottom: 20px;
        }
       
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
       
        input[type="number"], select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
       
        button {
            width: 100%;
            padding: 15px;
            background-color: #fbbf24;
            color: #333;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
        }
       
        button:hover {
            background-color: #f59e0b;
        }
       
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #6db2f7;
            border-radius: 5px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
       
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>계산기</h1>

        <div class="input-group">
            <label for="num1">첫 번째 숫자:</label>
            <input type="number" id="num1" placeholder="숫자를 입력하세요">
        </div>

        <div class="input-group">
            <label for="operation">연산자:</label>
            <select id="operation">
                <option value="add">덧셈 (+)</option>
                <option value="subtract">뺄셈 (-)</option>
                <option value="multiply">곱셈 (×)</option>
                <option value="divide">나눗셈 (÷)</option>
            </select>
        </div>

        <div class="input-group">
            <label for="num2">두 번째 숫자:</label>
            <input type="number" id="num2" placeholder="숫자를 입력하세요">
        </div>

        <button onclick="calculate()">계산하기</button>
        <div id="result" class="result" style="display: none;"></div>
    </div>

    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const operation = document.getElementById('operation').value;
            const resultDiv = document.getElementById('result');

            // 입력값 검증
            if (isNaN(num1) || isNaN(num2)) {
                resultDiv.textContent = '올바른 숫자를 입력해주세요!';
                resultDiv.className = 'result error';
                resultDiv.style.display = 'block';
                return;
            }

            let result;
            let operationText;

            switch(operation) {
                case 'add': result = num1 + num2; operationText = '+'; break;
                case 'subtract': result = num1 - num2; operationText = '-'; break;
                case 'multiply': result = num1 * num2; operationText = '×'; break;
                case 'divide':
                    if(num2 === 0){
                        resultDiv.textContent = '0으로 나눌 수 없습니다!';
                        resultDiv.className = 'result error';
                        resultDiv.style.display = 'block';
                        return;
                    }
                    result = num1 / num2; operationText = '÷';
                    break;
                default:
                    resultDiv.textContent = '올바른 연산자를 선택해주세요!';
                    resultDiv.className = 'result error';
                    resultDiv.style.display = 'block';
                    return;
            }

            // 화면에 결과 표시
            resultDiv.textContent = `${num1} ${operationText} ${num2} = ${result}`;
            resultDiv.className = 'result';
            resultDiv.style.display = 'block';

            // 서버로 값 전송 (Spring Controller에서 처리)
            fetch(`/calculator/calculator?num1=${num1}&num2=${num2}&operator=${operation}`)
                .then(res => res.text())
                .then(data => console.log('서버 출력 완료:', data))
                .catch(err => console.error(err));
        }

        // Enter 키로 계산하기
        document.addEventListener('keypress', function(event) {
            if(event.key === 'Enter') calculate();
        });
    </script>
</body>
</html>
 
 
 

 

캬캬! 기분이 좋구만용

'Project ESG+AI > Tech Basics' 카테고리의 다른 글

7일차. IT 개념 정리  (0) 2025.10.17
6일차. IT 개념 정리  (0) 2025.10.16
5일차. IT 개념 정리  (0) 2025.10.15
4일차. IT 개념 정리  (0) 2025.10.14
3일차. IT 개념정리  (0) 2025.10.13

관련글

티스토리툴바