Earn Free Tools

Try Code EMI

Loan Schedule Generator

Loan Payment Schedule Generator

AdSense Ad Placeholder

Loan EMI Code

<!DOCTYPE html>

<head>

<title>Loan Schedule Generator</title>

<style>

body {

font-family: 'Segoe UI', sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

}

h2 {

text-align: center;

color: white;

background-color: #007bff;

padding: 15px;

border-radius: 8px;

}

.container {

max-width: 800px;

margin: auto;

background: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

.input-group {

display: flex;

gap: 10px;

margin-bottom: 20px;

}

.input-group input {

flex: 1;

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 5px;

}

.button {

background-color: #28a745;

color: white;

border: none;

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

border-radius: 5px;

}

.button:hover {

background-color: #218838;

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: center;

}

th {

background-color: #dc3545;

color: white;

}

.summary-boxes {

display: flex;

justify-content: space-between;

margin-top: 20px;

gap: 10px;

flex-wrap: wrap;

}

.box {

flex: 1 1 45%;

background: #f8f9fa;

padding: 15px;

border-radius: 8px;

text-align: center;

font-weight: bold;

box-shadow: 0 0 5px rgba(0,0,0,0.05);

}

.ad-section {

margin: 20px 0;

padding: 15px;

background: #e2e3e5;

text-align: center;

border-radius: 8px;

}

</style>

</head>

<body>

<h2>Loan Payment Schedule Generator</h2>

<button class="button" onclick="generateSchedule()">Calculate</button>

</div>

<div class="ad-section">AdSense Ad Placeholder</div>

<div class="ad-section">AdMob Ad Placeholder</div>

</div>

function generateSchedule() {

const amount = parseFloat(document.getElementById('loanAmount').value);

const years = parseInt(document.getElementById('loanYears').value);

if (isNaN(amount) || isNaN(years) || amount <= 0 || years <= 0) {

alert("Please enter valid amount and years.");

return;

}

const paymentsPerYear = 12;

const totalPayments = years * paymentsPerYear;

const monthlyPayment = (amount / totalPayments).toFixed(2);

let balance = amount;

let scheduleHTML = '<tr><th>No</th><th>Date</th><th>Beginning Balance</th><th>Payment</th><th>Principal</th><th>Markup</th><th>Ending Balance</th></tr>';

let startDate = new Date();

startDate.setDate(16);

startDate.setMonth(startDate.getMonth());

for (let i = 1; i <= totalPayments; i++) {

let paymentDate = new Date(startDate);

paymentDate.setMonth(startDate.getMonth() + i - 1);

let principal = parseFloat(monthlyPayment);

let endBalance = (balance - principal).toFixed(2);

scheduleHTML += `<tr>

<td>${paymentDate.toLocaleDateString()}</td>

<td>${balance.toFixed(2)}</td>

<td>${monthlyPayment}</td>

<td>${endBalance}</td>

</tr>`;

balance -= principal;

}

document.getElementById('scheduleTable').innerHTML = scheduleHTML;

document.getElementById('summary').innerHTML = `

<div class="box">Monthly Payment: PKR ${monthlyPayment}</div>

<div class="box">Total Payments: ${totalPayments}</div>

<div class="box">Total Amount Paid: PKR ${(monthlyPayment * totalPayments).toFixed(2)}</div>

<div class="box">Markup: 0%</div>

}

</script>

</body>

</html>

YouTube Thumbnail Downloader Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>YouTube Thumbnail Downloader</title>

<style>

body {

font-family: 'Segoe UI', sans-serif;

background: #f0f4f8;

padding: 20px;

text-align: center;

}

h1 {

color: #333;

margin-bottom: 20px;

}

input {

width: 90%;

max-width: 500px;

padding: 10px;

border: 2px solid #0077ff;

border-radius: 8px;

font-size: 16px;

}

button {

background: #0077ff;

color: #fff;

border: none;

padding: 12px 24px;

border-radius: 8px;

cursor: pointer;

font-size: 16px;

margin-top: 10px;

transition: 0.3s;

}

button:hover {

background: #0055cc;

transform: scale(1.05);

}

.thumbnail-box {

margin-top: 30px;

}

.thumb-preview {

margin: 20px 0;

}

.thumb-preview img {

max-width: 100%;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.download-button {

background-color: #28a745;

color: white;

padding: 10px 18px;

text-decoration: none;

border-radius: 8px;

font-size: 15px;

display: inline-block;

margin: 10px 10px;

animation: bounce 1.5s infinite;

}

.download-button:hover {

background-color: #218838;

transform: scale(1.05);

}

@keyframes bounce {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-5px); }

}

.ad-container {

margin: 20px auto;

max-width: 728px;

text-align: center;

}

</style>

</head>

<body>

<div class="ad-container">

<script type='text/javascript'>

atOptions = {

'key' : 'YOUR_ADSTERRA_KEY_TOP',

'format' : 'banner',

'height' : 90,

'width' : 728,

'params' : {}

};

document.write('<scr' + 'ipt type="text/javascript" src="https://www.profitabledisplaynetwork.com/' + atOptions.key + '/invoke.js"></scr' + 'ipt>');

</script>

</div>

<h1>YouTube Thumbnail Downloader</h1>

<input type="text" id="videoUrl" placeholder="Paste YouTube Video URL Here">

<br>

<button onclick="getThumbnails()">Get Thumbnails</button>

<div class="ad-container">

</div>

<div id="thumbnailContainer" class="thumbnail-box"></div>

<div class="ad-container">

<script type='text/javascript'>

atOptions = {

'key' : 'YOUR_ADSTERRA_KEY_BOTTOM',

'format' : 'banner',

'height' : 90,

'width' : 728,

'params' : {}

};

document.write('<scr' + 'ipt type="text/javascript" src="https://www.profitabledisplaynetwork.com/' + atOptions.key + '/invoke.js"></scr' + 'ipt>');

</script>

</div>

<script>

function getYouTubeVideoID(url) {

const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]{11}).*/;

const match = url.match(regExp);

return match ? match[2] : null;

}

function getThumbnails() {

const url = document.getElementById('videoUrl').value.trim();

const videoId = getYouTubeVideoID(url);

if (!videoId) {

alert("? Invalid YouTube URL!");

return;

}

const thumbs = {

fullHD: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,

medium: `https://img.youtube.com/vi/${videoId}/sddefault.jpg`,

small: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`

};

const html = `

<div class="thumb-preview">

<h3>Full HD Thumbnail</h3>

<img src="${thumbs.fullHD}" alt="Full HD">

<br>

<a class="download-button" href="${thumbs.fullHD}" download target="_blank">Download Full HD</a>

</div>

<div class="thumb-preview">

<h3>Medium Thumbnail</h3>

<img src="${thumbs.medium}" alt="Medium">

<br>

<a class="download-button" href="${thumbs.medium}" download target="_blank">Download Medium</a>

</div>

<div class="thumb-preview">

<h3>Small Thumbnail</h3>

<img src="${thumbs.small}" alt="Small">

<br>

<a class="download-button" href="${thumbs.small}" download target="_blank">Download Small</a>

</div>

document.getElementById("thumbnailContainer").innerHTML = html;

}

</script>

</body>

</html>

YouTube Thumbnail Downloader Prompt

Create A Tool Name: YouTube Thumbnail Downloader

?? Function: Download high-quality thumbnails from any YouTube video in just one click!

?? How to use:

Paste any YouTube video URL into the input box.

Click the “Get Thumbnails” button.

Instantly preview and download:

? Full HD thumbnail

? Medium quality thumbnail

? Small thumbnail

?? Features:

Get real-time thumbnail preview

3 quality options: Full HD, Medium, Small

Animated download buttons

Fully responsive and mobile-friendly

Works without plugins or login

Supports both short and full YouTube links

?? Monetization Ready:

Integrated with AdMob and Adsterra (top & bottom banner ads)

?? Perfect for:

Content creators

YouTubers

Bloggers

Thumbnail designers

Social media managers.

With HTML,CSS,JS Code

All Best Hub

Best Tools

Try Code EMI

Loan Payment Schedule Generator

Loan EMI Code

YouTube Thumbnail Downloader Code

YouTube Thumbnail Downloader Prompt

All Best Hub

Tool Title