<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amps to Watts Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Amps to Watts Calculator</h2>
<label for="amps">Enter Amperage (A):</label>
<input type="number" id="amps" placeholder="Enter amperage">
<button onclick="calculateWatts()">Calculate Watts</button>
<p id="result"></p>
<script>
function calculateWatts() {
// Get the amperage input value
const amps = parseFloat(document.getElementById('amps').value);
// Standard voltage (adjust as needed)
const voltage = 120;
// Calculate power (Watts)
const powerWatts = amps * voltage;
// Display the result
document.getElementById('result').innerHTML = `Power (Watts): ${powerWatts.toFixed(2)} Watts`;
}
</script>
</body>
</html>
In this example:
1. Users input the amperage value in the input field.
2. When the "Calculate Watts" button is clicked, the `calculateWatts()` function is called.
3. The function retrieves the amperage value, multiplies it by a standard voltage (adjust as needed), and calculates the power in Watts.
4. The result is displayed below the button.Amps to Watts Calculator Using JavaScript With HTML
Hello Friends Today, through this tutorial, I will tell you How to Create Amps to Watts Calculator Using JavaScript with HTML? Sure, here's an example of an Amps to Watts calculator using JavaScript with HTML:
index.html