Making these types of calculators by simply Copy Paste code works.
Here is a simple calculator written in HTML:
CODE 1
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form>
<input type="text" id="expression" />
<button type="button" onclick="calculate()">Calculate</button>
</form>
<script>
function calculate() {
// Get the input value
let expression = document.getElementById('expression').value;
// Evaluate the expression and display the result
let result = eval(expression);
alert(result);
}
</script>
</body>
</html>
PASTE THIS CODE ON YOUR WEBSITE HTML PLACE AND SHOW THE RESULT OF YOUR CALCULATOR.
This calculator has a single text input where the user can enter a mathematical expression and a button that will evaluate the expression when clicked. The eval() function evaluates the expression and displays the result in an alert box.
This is a very basic calculator and does not have any error handling or advanced features. You could improve it by adding more buttons for the different operations, handling errors when the expression is invalid, and adding additional functionality such as clearing the input or displaying previous calculations.
CODE 2
<form>
<label for="num1">Number 1:</label><br>
<input type="text" id="num1" name="num1"><br>
<label for="num2">Number 2:</label><br>
<input type="text" id="num2" name="num2"><br><br>
<button type="button" onclick="add()">Add</button>
<button type="button" onclick="subtract()">Subtract</button>
<button type="button" onclick="multiply()">Multiply</button>
<button type="button" onclick="divide()">Divide</button>
<br><br>
<label for="result">Result:</label><br>
<input type="text" id="result" name="result" readonly>
</form>
<script>
function add() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseInt(num1) + parseInt(num2);
document.getElementById("result").value = result;
}
function subtract() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseInt(num1) - parseInt(num2);
document.getElementById("result").value = result;
}
function multiply() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseInt(num1) * parseInt(num2);
document.getElementById("result").value = result;
}
function divide() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = parseInt(num1) / parseInt(num2);
document.getElementById("result").value = result;
}
</script>
.png)
.png)
.jpeg)
.png)
0 Comments