Here is a simple calculator implemented using HTML, CSS, and JavaScript:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="calculator">
<div class="screen">
<input type="text" id="result" readonly>
</div>
<div class="buttons">
<button onclick="clearScreen()">C</button>
<button onclick="backspace()">←</button>
<button onclick="appendToScreen('/')">÷</button>
<button onclick="appendToScreen('*')">x</button>
<button onclick="appendToScreen('7')">7</button>
<button onclick="appendToScreen('8')">8</button>
<button onclick="appendToScreen('9')">9</button>
<button onclick="appendToScreen('-')">-</button>
<button onclick="appendToScreen('4')">4</button>
<button onclick="appendToScreen('5')">5</button>
<button onclick="appendToScreen('6')">6</button>
<button onclick="appendToScreen('+')">+</button>
<button onclick="appendToScreen('1')">1</button>
<button onclick="appendToScreen('2')">2</button>
<button onclick="appendToScreen('3')">3</button>
<button onclick="appendToScreen('0')">0</button>
<button onclick="appendToScreen('.')">.</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
CSS Code:
.calculator {
border: 1px solid #ccc;
margin: 0 auto;
max-width: 300px;
padding: 10px;
}
.screen {
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 5px;
}
.buttons {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(4, 1fr);
}
button {
background-color: #4CAF50;
border: none;
color: white;
cursor: pointer;
font-size: 20px;
padding: 10px;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.jpg)
function appendToScreen(value) {
document.getElementById('result').value += value;
}
function clearScreen() {
document.getElementById('result').value = '';
}
function backspace() {
var result = document.getElementById('result').value;
document.getElementById('result').value = result.substring(0, result.length - 1);
}
function calculate() {
var result = document.getElementById('result').value;
if (result) {
document.getElementById('result').value = eval(result);
}
}
0 Comments