Rate Percentage Calculator
Let's create a calculator for determining a "Rate Percentage". This type of calculator is useful in various scenarios where you need to find out what percentage one value is of another. For example, you might use it to calculate:
* **Discount Percentage:** If a product was originally $100 and is on sale for $75, what's the discount percentage?
* **Tax Percentage:** If an item costs $50 and the tax is $5, what percentage is the tax?
* **Performance Metrics:** If a project goal was 200 units and 50 units were achieved, what percentage of the goal was met?
* **Composition:** If a mixture contains 15g of substance A and 85g of substance B, what percentage of the mixture is substance A?
The formula is straightforward:
**Rate Percentage = (Part / Whole) * 100**
Where:
* **Part** is the value you're interested in (e.g., the discount amount, the tax amount, the achieved units).
* **Whole** is the total or original value against which you're measuring the part (e.g., the original price, the item cost, the total goal).
Here's the HTML code for the Rate Percentage Calculator:
.calculator-container {
font-family: Arial, sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 20px auto;
text-align: center;
background-color: #f9f9f9;
}
.calculator-container h2 {
margin-top: 0;
color: #333;
}
.input-section {
margin-bottom: 15px;
text-align: left;
}
.input-section label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-section input {
width: calc(100% – 12px);
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
color: #333;
min-height: 30px; /* To prevent layout shift */
}
function calculateRatePercentage() {
var partValueInput = document.getElementById("partValue");
var wholeValueInput = document.getElementById("wholeValue");
var resultDisplay = document.getElementById("result");
var part = parseFloat(partValueInput.value);
var whole = parseFloat(wholeValueInput.value);
if (isNaN(part) || isNaN(whole)) {
resultDisplay.innerText = "Please enter valid numbers for both values.";
return;
}
if (whole === 0) {
resultDisplay.innerText = "The 'whole' value cannot be zero.";
return;
}
var percentage = (part / whole) * 100;
// Format the output for better readability, showing 2 decimal places
resultDisplay.innerText = "The rate percentage is: " + percentage.toFixed(2) + "%";
}