간단한 계산기를 HTML, CSS, JavaScript를 통합하여 하나의 파일로 제공합니다.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>간단한 계산기</title>
<style>
.calculator {
width: 200px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
.buttons button {
width: 40px;
height: 40px;
margin: 5px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script>
let display = document.getElementById('display');
let currentInput = '';
function appendToDisplay(value) {
currentInput += value;
display.value = currentInput;
}
function calculate() {
try {
currentInput = eval(currentInput);
display.value = currentInput;
} catch (error) {
display.value = 'Error';
}
}
</script>
</body>
</html>
이 코드는 HTML, CSS, JavaScript를 하나의 파일에 통합하여 간단한 계산기를 만들었습니다. 웹 브라우저에서 이 코드를 실행하면 계산기가 나타납니다. 숫자와 연산자를 클릭하여 계산을 수행할 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 이미지 슬라이드 쇼 (0) | 2023.12.07 |
|---|---|
| 간단한 타이머 (0) | 2023.12.07 |
| Hello, World! 출력 (0) | 2023.12.07 |
| 시계 애플리케이션: JavaScript로 디지털 시계 애플리케이션 만들기 (2) | 2023.12.06 |
| 파티클 시뮬레이션: HTML5 <canvas>를 사용하여 파티클 시뮬레이션 만들기 (1) | 2023.12.06 |
