<!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>
Friday, January 17, 2025
Google Adsense Revenue Calculator Tool Code
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment