Google Adsense Revenue Calculator Tool Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AdSense Revenue Calculator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            font-family: Arial, sans-serif;
            color: #333;
        }

        .container {
            margin-top: 50px;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .btn-custom {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            color: white;
        }

        .btn-custom:hover {
            background: linear-gradient(to right, #2575fc, #6a11cb);
        }

        .result {
            font-size: 1.5rem;
            font-weight: bold;
            color: #2575fc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">AdSense Revenue Calculator</h1>
        <form id="calculatorForm">
            <div class="mb-3">
                <label for="dailyPageViews" class="form-label">Daily Page Views</label>
                <input type="number" id="dailyPageViews" class="form-control" placeholder="Enter daily page views" required>
            </div>

            <div class="mb-3">
                <label for="clickThroughRate" class="form-label">Click-Through Rate (CTR) (%)</label>
                <input type="number" id="clickThroughRate" class="form-control" placeholder="Enter CTR (e.g., 5 for 5%)" required>
            </div>

            <div class="mb-3">
                <label for="costPerClick" class="form-label">Cost Per Click (CPC) ($)</label>
                <input type="number" id="costPerClick" class="form-control" placeholder="Enter CPC" required>
            </div>

            <button type="button" class="btn btn-custom w-100" onclick="calculateRevenue()">Calculate Revenue</button>
        </form>

        <div class="mt-4">
            <p>Your Estimated Revenue:</p>
            <div id="revenueOutput" class="result">$0.00</div>
        </div>
    </div>

    <script>
        function calculateRevenue() {
            const dailyPageViews = parseFloat(document.getElementById('dailyPageViews').value);
            const clickThroughRate = parseFloat(document.getElementById('clickThroughRate').value) / 100;
            const costPerClick = parseFloat(document.getElementById('costPerClick').value);

            if (isNaN(dailyPageViews) || isNaN(clickThroughRate) || isNaN(costPerClick)) {
                alert('Please fill out all fields correctly.');
                return;
            }

            const estimatedClicks = dailyPageViews * clickThroughRate;
            const estimatedRevenue = estimatedClicks * costPerClick;

            document.getElementById('revenueOutput').innerText = `$${estimatedRevenue.toFixed(2)}`;
        }
    </script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Google Adsense Revenue Calculator Tool Code

Post a Comment

Contact Form
