Boiler Operation Calculator
About this app
A responsive and interactive web application for calculating various boiler operations.
Boiler Operation Calculator Boiler Operation Calculator Gas Flow Rate (m³/h) Calorific Value (MJ/m³) Efficiency (as a decimal) Calculate Power Output: By C Prescott 2023 - Email: csprescott@outlook.com
Related apps
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boiler Operation Calculator</title>
<meta name="description" content="A responsive and interactive web application for calculating various boiler operations.">
<meta name="keywords" content="boiler, calculation, operation, energy, efficiency">
<!-- Include jQuery and Bootstrap CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-PL1mepcCQRORyGwE4B6ZxeCsM8hY6chO4ZDNYOEO3xg7v7A7K4nZ0pZMZJbrub0V"
crossorigin="anonymous"></script>
<!-- Include Font Awesome for icons -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Load random Google Font for fun -->
<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet">
<!-- Custom Style -->
<style>
body {
font-family: 'Satisfy', cursive;
background: linear-gradient(135deg, #f06d06, #ffffff);
}
#main-container {
background-color: white;
border-radius: 15px;
margin-top: 20px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.calculation-box {
background-color: #f5f5f5;
border-radius: 15px;
padding: 15px;
margin-bottom: 15px;
}
.info-btn {
background-color: #f06d06;
color: white;
border: none;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
}
.info-btn:hover {
background-color: #e06505;
}
.services-btn {
background-color: #f06d06;
border: none;
padding: 10px 20px;
color: white;
border-radius: 15px;
cursor: pointer;
}
.services-btn:hover {
background-color: #e06505;
}
label {
color: #333;
}
input {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px;
width: 100%;
}
input:focus {
outline: none;
border-color: #f06d06;
box-shadow: 0 0 5px rgba(240, 109, 6, 0.5);
}
select {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px;
width: 100%;
}
select:focus {
outline: none;
border-color: #f06d06;
box-shadow: 0 0 5px rgba(240, 109, 6, 0.5);
}
.result-container {
display: none;
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
text-align: center;
}
.result-container.show {
display: block;
}
.result-value {
font-size: 24px;
color: #f06d06;
}
.result-label {
color: #333;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center mb-4">Boiler Operation Calculator</h1>
<!-- Calculator Form -->
<div class="calculation-box">
<label for="m3gasFlowRate">Gas Flow Rate (m³/h)</label>
<input type="number" id="m3gasFlowRate" step="0.1" placeholder="Enter Gas Flow Rate">
<label for="m3calorificValue">Calorific Value (MJ/m³)</label>
<input type="number" id="m3calorificValue" step="0.1" placeholder="Enter Calorific Value">
<label for="m3Efficiency">Efficiency (as a decimal)</label>
<input type="number" id="m3Efficiency" step="0.01" placeholder="Enter Efficiency (e.g., 0.98)">
<button type="button" class="btn services-btn mt-3" onclick="calculate()">
Calculate
</button>
<!-- Result Container -->
<div class="result-container" id="resultContainer">
<div class="result-label">Power Output:</div>
<div class="result-value" id="resultValue"></div>
</div>
</div>
<!-- Footer -->
<div class="text-center mt-4">
<p>By C Prescott 2023 - Email: <a href="mailto:csprescott@outlook.com">csprescott@outlook.com</a></p>
</div>
</div>
<!-- JavaScript Logic -->
<script>
// Function to calculate the power output
function calculate() {
var m3gasFlowRate = parseFloat(document.getElementById('m3gasFlowRate').value);
var m3calorificValue = parseFloat(document.getElementById('m3calorificValue').value);
var m3Efficiency = parseFloat(document.getElementById('m3Efficiency').value);
if (isNaN(m3gasFlowRate) || isNaN(m3calorificValue) || isNaN(m3Efficiency)) {
alert("Please enter valid numbers for all fields.");
return;
}
// Calculation
var powerOutput = (m3gasFlowRate * m3calorificValue * m3Efficiency) / 3.6;
powerOutput = powerOutput.toFixed(2); // Round to two decimal places
// Display Result
var resultContainer = document.getElementById('resultContainer');
var resultValue = document.getElementById('resultValue');
resultValue.textContent = powerOutput + " kW";
resultContainer.classList.add('show');
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!