<!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
How to Convert Url to Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL to Image Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #4facfe, #00f2fe);
color: #fff;
}
.container {
background: #1e1e2f;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 500px;
text-align: center;
width: 90%;
}
.container h1 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 8px;
border: none;
outline: none;
font-size: 1rem;
}
.form-group button {
background: #00c6ff;
border: none;
padding: 10px 20px;
border-radius: 8px;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: 0.3s ease;
}
.form-group button:hover {
background: #0075ff;
}
.image-preview {
margin-top: 20px;
}
.image-preview img {
max-width: 100%;
border-radius: 12px;
}
.error-message {
color: #ff4e4e;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>URL to Image Tool</h1>
<div class="form-group">
<label for="imageUrl">Enter Image URL:</label>
<input type="text" id="imageUrl" placeholder="https://example.com/image.jpg">
</div>
<div class="form-group">
<button id="loadImage">Load Image</button>
</div>
<div class="image-preview" id="imagePreview"></div>
<div class="error-message" id="errorMessage"></div>
</div>
<script>
const loadImageButton = document.getElementById('loadImage');
const imageUrlInput = document.getElementById('imageUrl');
const imagePreview = document.getElementById('imagePreview');
const errorMessage = document.getElementById('errorMessage');
loadImageButton.addEventListener('click', () => {
const imageUrl = imageUrlInput.value.trim();
// Clear previous results
imagePreview.innerHTML = '';
errorMessage.textContent = '';
if (!imageUrl) {
errorMessage.textContent = 'Please enter a valid URL.';
return;
}
// Create a new image element
const img = document.createElement('img');
img.src = imageUrl;
img.alt = 'Preview';
img.onload = () => {
imagePreview.appendChild(img);
};
img.onerror = () => {
errorMessage.textContent = 'Failed to load image. Please check the URL.';
};
});
</script>
</body>
</html>
Thursday, January 16, 2025
Free Online Currency Converter Complete Code
Free Online Currency Converter tool Script, This tool can convert all international currencies to the local currency rate, it is very use full tool you can copy and paste this tool, very easy to embed in your webpages. this script contains javascript and simple html and css. just copy and paste the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #4facfe, #00f2fe);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.converter {
background: #1e293b;
border-radius: 10px;
padding: 20px;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
.field {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select, input {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
background: #06b6d4;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #0284c7;
}
.result {
text-align: center;
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
@media (max-width: 600px) {
.converter {
padding: 15px;
width: 90%;
}
}
</style>
</head>
<body>
<div class="converter">
<h1>Currency Converter</h1>
<div class="field">
<label for="from-currency">From:</label>
<select id="from-currency"></select>
</div>
<div class="field">
<label for="to-currency">To:</label>
<select id="to-currency"></select>
</div>
<div class="field">
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount" />
</div>
<button id="convert">Convert</button>
<div class="result" id="result">Enter values to convert</div>
</div>
<script>
const fromCurrency = document.getElementById('from-currency');
const toCurrency = document.getElementById('to-currency');
const amount = document.getElementById('amount');
const convertBtn = document.getElementById('convert');
const resultDiv = document.getElementById('result');
async function fetchCurrencies() {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
const data = await response.json();
const currencies = Object.keys(data.rates);
currencies.forEach(currency => {
const optionFrom = document.createElement('option');
optionFrom.value = currency;
optionFrom.textContent = currency;
fromCurrency.appendChild(optionFrom);
const optionTo = document.createElement('option');
optionTo.value = currency;
optionTo.textContent = currency;
toCurrency.appendChild(optionTo);
});
}
async function convertCurrency() {
const fromValue = fromCurrency.value;
const toValue = toCurrency.value;
const amountValue = parseFloat(amount.value);
if (isNaN(amountValue) || amountValue <= 0) {
resultDiv.textContent = 'Please enter a valid amount';
return;
}
const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromValue}`);
const data = await response.json();
const rate = data.rates[toValue];
const convertedAmount = (amountValue * rate).toFixed(2);
resultDiv.textContent = `${amountValue} ${fromValue} = ${convertedAmount} ${toValue}`;
}
fetchCurrencies();
convertBtn.addEventListener('click', convertCurrency);
</script>
</body>
</html>
Subscribe to:
Posts (Atom)