Hop.Click | Social Media Ads Calculator

by getivan

HTML

<div class="calculator">
    <label for="budget">Total Budget ($):</label><br>
    <input type="number" id="budget" placeholder="Enter total budget"><br>
    <label for="cpm">CPM ($):</label><br>
    <input type="number" id="cpm" placeholder="Enter CPM"><br>
    <label for="ctr">CTR (%):</label><br>
    <input type="number" id="ctr" placeholder="Enter CTR"><br>
    <label for="conversionRate">Conversion Rate (%):</label><br>
    <input type="number" id="conversionRate" placeholder="Enter Conversion Rate"><br>
    <label for="conversionValue">Conversion Value ($):</label><br>
    <input type="number" id="conversionValue" placeholder="Enter Conversion Value"><br>
    <button onclick="calculate()">Calculate</button>
    <div class="result" id="result"></div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #1E1634;  /* Dark Purple Background */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
.calculator {
    background-color: #1E1634;  /* Match body background */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}
input {
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #FE8061;  /* Coral border for input */
    width: 200px;
    color: black;  /* Black text color for inputs */
    background-color: white; /* White background for inputs */
}
button {
    background-color: #FE8061;  /* Coral Color for Button */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
button:hover {
    background-color: #fc6d4b;  /* Darker Coral on Hover */
}
.result {
    margin-top: 20px;
}

JavaScript

function calculateSocialMediaAds(budget, cpm, ctr, conversionRate, conversionValue) {
    const impressions = (budget / cpm) * 1000;
    const clicks = impressions * (ctr / 100);
    const conversions = clicks * (conversionRate / 100);
    const totalConversionValue = conversions * conversionValue;
    const breakEvenBudget = (conversions * conversionValue) / conversionRate * 100;

    return {
        impressions: impressions,
        clicks: clicks,
        conversions: conversions,
        totalConversionValue: totalConversionValue,
        breakEvenBudget: breakEvenBudget
    };
}

function calculate() {
    const budget = parseFloat(document.getElementById('budget').value);
    const cpm = parseFloat(document.getElementById('cpm').value);
    const ctr = parseFloat(document.getElementById('ctr').value);
    const conversionRate = parseFloat(document.getElementById('conversionRate').value);
    const conversionValue = parseFloat(document.getElementById('conversionValue').value);

    if (isNaN(budget) || isNaN(cpm) || isNaN(ctr) || isNaN(conversionRate) || isNaN(conversionValue)) {
        document.getElementById('result').innerHTML = "<p>Please enter valid numbers in all fields.</p>";
        return;
    }

    const results = calculateSocialMediaAds(budget, cpm, ctr, conversionRate, conversionValue);

    document.getElementById('result').innerHTML = `
        <p>Impressions: ${results.impressions.toFixed(2)}</p>
        <p>Clicks: ${results.clicks.toFixed(2)}</p>
        <p>Conversions: ${results.conversions.toFixed(2)}</p>
        <p>Total Conversion Value: $${results.totalConversionValue.toFixed(2)}</p>
        <p>Break-Even Budget: $${results.breakEvenBudget.toFixed(2)}</p>
    `;
}