How to Calculate the Conversion Rate
function calculateConversionRate() {
var totalVisitorsInput = document.getElementById("totalVisitors");
var totalConversionsInput = document.getElementById("totalConversions");
var resultDisplay = document.getElementById("conversionRateResult");
var totalVisitors = parseFloat(totalVisitorsInput.value);
var totalConversions = parseFloat(totalConversionsInput.value);
if (isNaN(totalVisitors) || isNaN(totalConversions)) {
resultDisplay.innerHTML = "Please enter valid numbers for both fields.";
return;
}
if (totalVisitors <= 0) {
resultDisplay.innerHTML = "Total visitors must be greater than zero.";
return;
}
var conversionRate = (totalConversions / totalVisitors) * 100;
if (isNaN(conversionRate)) {
resultDisplay.innerHTML = "Calculation error. Please check your inputs.";
} else {
resultDisplay.innerHTML = conversionRate.toFixed(2) + "%";
}
}
.calculator-widget {
font-family: sans-serif;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
max-width: 700px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-form {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.form-group input[type="number"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.calculator-form button {
padding: 12px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.1rem;
transition: background-color 0.3s ease;
}
.calculator-form button:hover {
background-color: #45a049;
}
.calculator-result {
background-color: #e7f3fe;
padding: 15px;
border-radius: 4px;
text-align: center;
border: 1px solid #b3d7f8;
}
.calculator-result h3 {
margin-top: 0;
color: #2c3e50;
}
#conversionRateResult {
font-size: 1.8rem;
font-weight: bold;
color: #3498db;
}
.calculator-explanation {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #555;
line-height: 1.6;
}
.calculator-explanation h2, .calculator-explanation h3 {
color: #333;
margin-bottom: 15px;
}
.calculator-explanation ul {
margin-left: 20px;
margin-bottom: 15px;
}
.calculator-explanation li {
margin-bottom: 8px;
}
.calculator-explanation p {
margin-bottom: 15px;
}