HTML 패널
<h2>간단한 계산기</h2>
<input type="number" id="num1" placeholder="첫 번째 숫자">
<input type="number" id="num2" placeholder="두 번째 숫자">
<button id="addBtn">더하기</button>
<button id="subtractBtn">빼기</button>
<button id="multiplyBtn">곱하기</button>
<div id="result"></div>
JavaScript 패널
document.getElementById('addBtn').addEventListener('click', function() {
// 여기에 코드를 작성하세요
let num1 = document.getElementById('num1').value;
let num2 = document.getElementById('num2').value;
// 숫자로 변환
let result = Number(num1) + Number(num2);
// 결과 표시
document.getElementById('result').textContent = '결과: ' + result;
});
// 빼기와 곱하기 버튼도 구현해보세요!
CSS 패널
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input {
padding: 10px;
margin: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #27ae60;
}
Comments
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎