Web Healer

Friday, January 17, 2025

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>

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>

Saturday, December 24, 2022

how to save image in database using python

You are working with python and writing code for web programs, here is a solution how to upload image using python,

how to save image in database using python

import mysql.connector

def convertToBinaryData(filename): # Convert digital data to binary format with open(filename, 'rb') as file: binaryData = file.read() return binaryData def insertBLOB(emp_id, name, photo, biodataFile): print("Inserting BLOB into python_employee table") try: connection = mysql.connector.connect(host='localhost', database='python_db', user='pynative', password='pynative@#29') cursor = connection.cursor() sql_insert_blob_query = """ INSERT INTO python_employee (id, name, photo, biodata) VALUES (%s,%s,%s,%s)""" empPicture = convertToBinaryData(photo) file = convertToBinaryData(biodataFile) # Convert data into tuple format insert_blob_tuple = (emp_id, name, empPicture, file) result = cursor.execute(sql_insert_blob_query, insert_blob_tuple) connection.commit() print("Image and file inserted successfully as a BLOB into python_employee table", result) except mysql.connector.Error as error: print("Failed inserting BLOB data into MySQL table {}".format(error)) finally: if connection.is_connected(): cursor.close() connection.close() print("MySQL connection is closed") insertBLOB(1, "Eric", "D:\Python\Articles\my_SQL\images\eric_photo.png", "D:\Python\Articles\my_SQL\images\eric_bioData.txt") insertBLOB(2, "Scott", "D:\Python\Articles\my_SQL\images\scott_photo.png", "D:\Python\Articles\my_SQL\images\scott_bioData.txt")

Friday, December 23, 2022

form validation using python

web form validation is quit easy in python

create an html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index page</title>
</head>
<body>
<form method="POST" class="post-form" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="save btn btn-default">Submit</button>
</form>
</body>
</html>

create a page modules.py

from django.db import models
class Employee(models.Model):
eid = models.CharField(max_length=20)
ename = models.CharField(max_length=100)
econtact = models.CharField(max_length=15)
class Meta:
db_table = "employee"

now create a file forms.py

from django import forms
from myapp.models import Employee
class EmployeeForm(forms.ModelForm):
class Meta:
model = Employee
fields = "__all__"

create another file named views.py and paste the below code

def emp(request):
if request.method == "POST":
form = EmployeeForm(request.POST)
if form.is_valid():
try:
return redirect('/')
except:
pass
else:
form = EmployeeForm()
return render(request,'index.html',{'form':form})

Pages

Web Healer

Ads 468x60px

Featured Posts

Friday, January 17, 2025

Google Adsense Revenue Calculator Tool Code

How to Convert Url to Image

Thursday, January 16, 2025

Free Online Currency Converter Complete Code

Saturday, December 24, 2022

how to save image in database using python

Friday, December 23, 2022

form validation using python

Web Healer Coding Concept

Catagories

Blog Archive

Friends

Visitors