This code provides a functional and responsive Power Converter Tool. It uses Bootstrap for styling and responsiveness, and the JavaScript handles the conversion logic. You can open this in any modern browser to use the tool.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Power Converter Tool</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(to right, #6a11cb, #2575fc);
color: white;
font-family: Arial, sans-serif;
}
.converter-card {
background-color: #ffffff;
color: #333;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.btn-custom {
background-color: #6a11cb;
border: none;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
.btn-custom:hover {
background-color: #2575fc;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-4">Power Converter Tool</h1>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="converter-card">
<form id="powerConverterForm">
<div class="mb-3">
<label for="inputValue" class="form-label">Enter Value:</label>
<input type="number" class="form-control" id="inputValue" placeholder="Enter power value" required>
</div>
<div class="mb-3">
<label for="inputUnit" class="form-label">From Unit:</label>
<select class="form-select" id="inputUnit" required>
<option value="watts">Watts (W)</option>
<option value="kilowatts">Kilowatts (kW)</option>
<option value="megawatts">Megawatts (MW)</option>
<option value="horsepower">Horsepower (HP)</option>
</select>
</div>
<div class="mb-3">
<label for="outputUnit" class="form-label">To Unit:</label>
<select class="form-select" id="outputUnit" required>
<option value="watts">Watts (W)</option>
<option value="kilowatts">Kilowatts (kW)</option>
<option value="megawatts">Megawatts (MW)</option>
<option value="horsepower">Horsepower (HP)</option>
</select>
</div>
<button type="submit" class="btn btn-custom w-100">Convert</button>
</form>
<div class="mt-4">
<h5>Result:</h5>
<p id="result" class="fs-5 text-success"></p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Conversion factors
const conversionFactors = {
watts: 1,
kilowatts: 1000,
megawatts: 1000000,
horsepower: 745.7
};
document.getElementById("powerConverterForm").addEventListener("submit", function(event) {
event.preventDefault();
const inputValue = parseFloat(document.getElementById("inputValue").value);
const inputUnit = document.getElementById("inputUnit").value;
const outputUnit = document.getElementById("outputUnit").value;
if (isNaN(inputValue)) {
document.getElementById("result").textContent = "Please enter a valid number.";
return;
}
// Convert input value to watts
const valueInWatts = inputValue * conversionFactors[inputUnit];
// Convert watts to the desired output unit
const convertedValue = valueInWatts / conversionFactors[outputUnit];
document.getElementById("result").textContent = `${inputValue} ${inputUnit} = ${convertedValue.toFixed(2)} ${outputUnit}`;
});
</script>
</body>
</html>