Task 1 - Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Calculator</title>
<style>
.cl{
width:200px;
height: 30px;
}
.click-button{
width: 40px;
height: 50px;
margin: 5px;
font-size: 18px;
cursor: pointer;
} .result{
width: 40px;
height: 50px;
} .clear {
width: 40px;
height: 50px;
}
</style>
</head>
<body>
<h2>CALCULATOR</h2>
<input type="text" class="cl" id="calc" placeholder="Enter the
number"><br><br>
<button class="click-button" onclick="input('1')">1</button>
<button class="click-button" onclick="input('2')">2</button>
<button class="click-button" onclick="input('3')">3</button>
<button class="click-button"
onclick="input('+')">+</button><br><br>
<button class="click-button" onclick="input('4')">4</button>
<button class="click-button" onclick="input('5')">5</button>
<button class="click-button" onclick="input('6')">6</button>
<button class="click-button" onclick="input('-')">-
</button><br><br>
<button class="click-button" onclick="input('7')">7</button>
<button class="click-button" onclick="input('8')">8</button>
<button class="click-button" onclick="input('9')">9</button>
<button class="click-button"
onclick="input('*')">*</button><br><br>
<button class="click-button" onclick="input('0')">0</button>
<button class="click-button" onclick="input('.')">.</button>
<button class="result" onclick="calculate()">=</button>
<button class="click-button"
onclick="input('/')">/</button><br><br>
<button class="clear" onclick="clr()">C</button>
<script>
function input(value) {
document.getElementById("calc").value += value;
}
function calculate() {
const resultField = document.getElementById('calc');
resultField.value = eval(resultField.value);
}
function clr() {
document.getElementById('calc').value = '';
}
</script>
</body>
</html>
Output:
