Hello Friends Today, through this tutorial, I will tell you How to Write Program Power calculator using PHP with HTML. Sure! Below is a simple power calculator created using HTML and JavaScript. This calculator allows users to input a base number and an exponent, and it will calculate the result of raising the base to the exponent.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Power Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}
input[type="number"] {
width: 100px;
padding: 5px;
margin: 5px;
}
button {
padding: 10px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Power Calculator</h2>
<div>
<label for="base">Base:</label>
<input type="number" id="base" placeholder="Enter base">
</div>
<div>
<label for="exponent">Exponent:</label>
<input type="number" id="exponent" placeholder="Enter exponent">
</div>
<button onclick="calculatePower()">Calculate</button>
<div id="result"></div>
<script>
function calculatePower() {
var base = parseFloat(document.getElementById('base').value);
var exponent = parseInt(document.getElementById('exponent').value);
var result = document.getElementById('result');
// Check if base and exponent are valid numbers
if (isNaN(base) || isNaN(exponent)) {
result.textContent = 'Please enter valid numbers for base and exponent.';
} else {
var power = Math.pow(base, exponent);
result.textContent = 'Result: ' + power;
}
}
</script>
</body>
</html>
This code creates a simple HTML page with input fields for the base and exponent, a button to trigger the calculation, and a div to display the result. The JavaScript function `calculatePower()` is called when the button is clicked, and it calculates the result using the `Math.pow()` function and updates the result div accordingly.