728x90
안녕하세요 오늘은 자바스크립트를 이용하여 사칙연산이 가능한 간단한 계산기를 만들어보겠습니다
먼저 html 파일을 만들어줍니다.
calculator.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>사칙연산</h2>
<input type="number" id="num1" placeholder="숫자1">
<input type="number" id="num2" placeholder="숫자2">
<select id="operation">
<option value="add">+</option>
<option value="subtract"> - </option>
<option value="multiply"> x </option>
<option value="divide">/ (나누기)</option>
</select>
<button onclick="calculate()">Calculate</button>
<h2 id="result">Result: </h2>
<script src="calculator.js"></script>
</body>
</html>
아래는 자바 스크립트 코드 입니다
calculator.js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>사칙연산</h2>
<input type="number" id="num1" placeholder="숫자1">
<input type="number" id="num2" placeholder="숫자2">
<select id="operation">
<option value="add">+</option>
<option value="subtract"> - </option>
<option value="multiply"> x </option>
<option value="divide">/ (나누기)</option>
</select>
<button onclick="calculate()">계산하기</button>
<h2 id="result">결과: </h2>
<script src="calculator.js"></script>
</body>
</html>
결과 화면입니다
'JavaScript' 카테고리의 다른 글
| [JavaScript] 벽돌깨기 게임 만들기 (3) 게임 시작, 게임 오버, 게임 클리어, 다시 시작 구현하기 (0) | 2024.08.22 |
|---|---|
| [JavaScript] 벽돌깨기 게임 만들기 (2) 공 튕기기 (0) | 2024.08.18 |
| [JavaScript] 벽돌깨기 게임 만들기 (1) <canvas> 에 도형 그리기 (0) | 2024.08.12 |
| [JavaScript] 드래그 앤 드랍으로 이미지 순서 변경하기 (0) | 2024.08.08 |
| [JavaScript] 마우스 드래그로 캔버스에 네모와 동그라미 그리기 (0) | 2024.08.06 |
