File "box-calculator.js"
Full path: /home/u525140468/domains/productsizer.com/public_html/assets/js/box-calculator.js
File
size: 6.74 B (6.74 KB bytes)
MIME-type: text/x-php
Charset: utf-8
Download Open Edit Advanced Editor Back
<?php
$title = "Email ROI Calculator";
$description = "Calculate the return on investment (ROI) of your previous or next email marketing campaign
to see how valuable email can be. Use our calculator to set your goals,
increase your ROI, and plan your future marketing campaigns.";
include "../autoload.php";
inc ('t1');
?>
<style>
.calculator-wrapper{max-width:1100px;display:flex;gap:20px}
.left-panel{flex:1;background-color:#fff;border-radius:8px;box-sizing:border-box;min-width:300px}
.left-panel h3{font-size:16px;margin-bottom:5px;font-weight:600}
.left-panel p.subtext{font-size:14px;color:#666;margin-bottom:10px;line-height:1.4}
.left-panel input,.left-panel select{width:100%;font-size:16px;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}
.calculate-btn{width:100%;background-color:#0073e6;color:#fff;border:none;border-radius:4px;font-size:16px;padding:12px;cursor:pointer}
.calculate-btn:hover{background-color:#005bb5}
.right-panel{flex:1;background-color:#c3ebbf;border-radius:8px;padding:30px;box-sizing:border-box;min-width:300px}
.right-panel h2{margin-bottom:30px;font-size:24px;text-align:center}
.result-row{margin-bottom:16px;font-size:16px}
.result-row span.label{display:inline-block;min-width:180px;font-weight:600}
.result-row span.value{font-weight:400;font-size:20px}
.result-row.roi-percentage{font-size:18px;margin-top:20px;font-weight:700}
.page-title{text-align:center;margin-top:30px;font-size:28px;font-weight:700}
.page-subtitle{text-align:center;max-width:650px;margin:10px auto 40px;line-height:1.5;font-size:16px;color:#555}
@media (max-width: 768px) {
.calculator-wrapper{flex-direction:column}
}
@media (min-width: 1024px) {
.form-group{display:flex;align-items:center;justify-content:space-between}
.form-group label,.form-group .subtext{flex:1;text-align:left}
.form-group select,.form-group input{flex:1;text-align:right}
}
.input-container,.results-container{margin-bottom:0!important;padding-bottom:0!important}
#roiPercentage{font-weight:700}
</style>
<div class="calculator-wrapper">
<!-- LEFT PANEL: Form inputs -->
<div class="left-panel">
<!-- Preferred Currency -->
<h3>Preferred Currency</h3>
<p class="subtext">Choose the currency you’d like to use to calculate your email marketing ROI.</p>
<select id="currency">
<option value="$">$ USD</option>
<option value="€">€ EUR</option>
<option value="£">£ GBP</option>
</select>
<!-- Email Send Volume -->
<h3>Email Send Volume</h3>
<p class="subtext">Enter the total number of contacts that you’re sending the campaign to.</p>
<input type="number" id="sendVolume" placeholder="e.g., 500" value="500" />
<!-- Cost of Email Marketing Campaign -->
<h3>Cost of Email Marketing Campaign</h3>
<p class="subtext">Enter the cost for sending this single campaign. (Divide your monthly cost by the total campaigns sent per month.)</p>
<input type="number" id="campaignCost" placeholder="e.g., 44" step="any" value="44" />
<!-- Total sales -->
<h3>Total sales</h3>
<p class="subtext">Enter the total value of your sales for this campaign.</p>
<input type="number" id="totalSales" placeholder="e.g., 50" step="any" value="50" />
<!-- Button -->
<button class="calculate-btn" id="calculateBtn">Calculate ROI</button>
</div>
<!-- RIGHT PANEL: Results -->
<div class="right-panel">
<h2>Results</h2>
<div class="result-row">
<span class="label">Cost per Subscriber:</span>
<span class="value" id="costPerSubscriber">-</span>
</div>
<div class="result-row">
<span class="label">Total Revenue:</span>
<span class="value" id="totalRevenue">-</span>
</div>
<div class="result-row">
<span class="label">Total Profit:</span>
<span class="value" id="totalProfit">-</span>
</div>
<div class="result-row">
<span class="label">Revenue per Email:</span>
<span class="value" id="revenuePerEmail">-</span>
</div>
<div class="result-row roi-percentage">
<span class="label">ROI %</span>
<span class="value" id="roiPercentage">-</span>
</div>
<div class="result-row">
<span class="label">Sales to Break Even:</span>
<span class="value" id="breakEvenSales">-</span>
</div>
</div>
</div>
<script>
// Grab form elements
const currencyEl = document.getElementById("currency");
const sendVolumeEl = document.getElementById("sendVolume");
const campaignCostEl = document.getElementById("campaignCost");
const totalSalesEl = document.getElementById("totalSales");
const calculateBtn = document.getElementById("calculateBtn");
// Grab result elements
const costPerSubscriberEl = document.getElementById("costPerSubscriber");
const totalRevenueEl = document.getElementById("totalRevenue");
const totalProfitEl = document.getElementById("totalProfit");
const revenuePerEmailEl = document.getElementById("revenuePerEmail");
const roiPercentageEl = document.getElementById("roiPercentage");
const breakEvenSalesEl = document.getElementById("breakEvenSales");
calculateBtn.addEventListener("click", () => {
// Parse values
const currency = currencyEl.value;
const sendVolume = parseFloat(sendVolumeEl.value) || 0;
const campaignCost = parseFloat(campaignCostEl.value) || 0;
const totalSales = parseFloat(totalSalesEl.value) || 0;
// Basic validation
if (sendVolume <= 0) {
alert("Please enter a valid Email Send Volume.");
return;
}
// Calculations
const costPerSubscriber = (campaignCost / sendVolume) || 0;
const totalProfit = totalSales - campaignCost;
const revenuePerEmail = (totalSales / sendVolume) || 0;
const roiPercentage = (campaignCost > 0)
? ( (totalSales / campaignCost) * 100 )
: 0;
const breakEvenSales = campaignCost; // to break even
// Update result fields
costPerSubscriberEl.textContent = currency + costPerSubscriber.toFixed(2);
totalRevenueEl.textContent = currency + totalSales.toFixed(2);
totalProfitEl.textContent = currency + totalProfit.toFixed(2);
revenuePerEmailEl.textContent = currency + revenuePerEmail.toFixed(2);
roiPercentageEl.textContent = roiPercentage.toFixed(2);
breakEvenSalesEl.textContent = currency + breakEvenSales.toFixed(2);
});
</script>
<?php
inc ('t2');
?>