Country Code Founder tool with colorful styling and all its features use any free library...

 

Country Code Finder

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #72c6ef, #f0a3b7); color: #333; margin: 0; padding: 20px; } .container { background: white; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); padding: 20px; max-width: 500px; margin: auto; text-align: center; } h1 { color: #ff6347; } input[type="text"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px; } button { background-color: #ff6347; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #e5533d; } .result { margin-top: 20px; font-size: 18px; color: #333; } document.getElementById('searchButton').addEventListener('click', function() { const input = document.getElementById('searchInput').value.trim(); const resultDiv = document.getElementById('result'); if (!input) { resultDiv.textContent = 'Please enter a country name or code.'; return; } fetch(`https://restcountries.com/v3.1/name/${input}?fullText=true`) .then(response => { if (!response.ok) { throw new Error('Country not found. Please try again.'); } return response.json(); }) .then(data => { const country = data[0]; const countryName = country.name.common; const countryCode = country.cca2; // 2-letter country code resultDiv.innerHTML = ` Country: ${countryName}
Code: ${countryCode} `; }) .catch(error => { resultDiv.textContent = error.message; }); });

Time Calculator tool with colorful styling and all its features use any free library...

 

Time Calculator

Time 1 (HH:MM:SS): Operation: Add Subtract Time 2 (HH:MM:SS):

Result: 00:00:00

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #72c6ef, #f0a3b7); color: #333; margin: 0; padding: 20px; } .container { background: white; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); padding: 20px; max-width: 500px; margin: auto; text-align: center; } h1 { color: #ff6347; } .time-inputs { display: flex; flex-direction: column; margin-bottom: 20px; } label { margin: 10px 0 5px; font-weight: bold; } input[type="time"], select { padding: 10px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px; } button { background-color: #ff6347; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #e5533d; } h2 { margin-top: 20px; } document.getElementById('calculate').addEventListener('click', function() { const time1 = document.getElementById('time1').value.split(':').map(Number); const time2 = document.getElementById('time2').value.split(':').map(Number); const operation = document.getElementById('operation').value; const totalSeconds1 = time1[0] * 3600 + time1[1] * 60 + time1[2]; const totalSeconds2 = time2[0] * 3600 + time2[1] * 60 + time2[2]; let resultSeconds; if (operation === 'add') { resultSeconds = totalSeconds1 + totalSeconds2; } else { resultSeconds = totalSeconds1 - totalSeconds2; } if (resultSeconds < 0) { resultSeconds = 0; // Prevent negative results } const hours = Math.floor(resultSeconds / 3600); const minutes = Math.floor((resultSeconds % 3600) / 60); const seconds = resultSeconds % 60; document.getElementById('result').textContent = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0'); });

Stopwatch tool with colorful styling and all its features use any free library...

 

00:00:00

body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; color: #61dafb; font-family: 'Arial', sans-serif; margin: 0; } .stopwatch-container { text-align: center; background: linear-gradient(135deg, #6e7cfc, #f2a100); border-radius: 10px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } #display { font-size: 48px; margin-bottom: 20px; padding: 20px; border: 3px solid #61dafb; border-radius: 10px; background-color: rgba(255, 255, 255, 0.1); } .buttons { display: flex; justify-content: center; gap: 10px; } button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #61dafb; color: #282c34; } .laps { margin-top: 20px; background-color: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 5px; } let timerInterval; let running = false; let seconds = 0; const display = document.getElementById("display"); const startStopButton = document.getElementById("startStop"); const resetButton = document.getElementById("reset"); const lapButton = document.getElementById("lap"); const lapsContainer = document.getElementById("laps"); startStopButton.addEventListener("click", () => { if (running) { clearInterval(timerInterval); startStopButton.textContent = "Start"; } else { timerInterval = setInterval(updateTime, 1000); startStopButton.textContent = "Stop"; } running = !running; }); resetButton.addEventListener("click", () => { clearInterval(timerInterval); running = false; seconds = 0; display.textContent = "00:00:00"; startStopButton.textContent = "Start"; lapsContainer.innerHTML = ""; }); lapButton.addEventListener("click", () => { if (running) { const lapTime = formatTime(seconds); const lapElement = document.createElement("div"); lapElement.textContent = `Lap: ${lapTime}`; lapsContainer.appendChild(lapElement); } }); function updateTime() { seconds++; display.textContent = formatTime(seconds); } function formatTime(seconds) { const hrs = String(Math.floor(seconds / 3600)).padStart(2, '0'); const mins = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0'); const secs = String(seconds % 60).padStart(2, '0'); return `${hrs}:${mins}:${secs}`; }

Countdown Timer tool with colorful styling and all its features use any free library...

 

Countdown Timer

00 Days

00 Hours

00 Minutes

00 Seconds

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(to right, #00b4db, #0083b0); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } .container { background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } h1 { font-size: 2.5rem; margin-bottom: 20px; } .countdown { display: flex; justify-content: center; gap: 20px; } .countdown-box { background-color: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; width: 80px; text-align: center; } .countdown-number { font-size: 2rem; font-weight: bold; color: #ffcc00; } .label { font-size: 1rem; margin-top: 5px; display: block; } @media screen and (max-width: 768px) { .countdown { flex-direction: column; } .countdown-box { width: 100px; margin-bottom: 10px; } } // Set the end date for the countdown let endDate = moment().add(10, 'days'); // Example: 10 days from now function updateCountdown() { let now = moment(); let duration = moment.duration(endDate.diff(now)); let days = Math.floor(duration.asDays()); let hours = Math.floor(duration.hours()); let minutes = Math.floor(duration.minutes()); let seconds = Math.floor(duration.seconds()); document.getElementById('days').textContent = days < 10 ? '0' + days : days; document.getElementById('hours').textContent = hours < 10 ? '0' + hours : hours; document.getElementById('minutes').textContent = minutes < 10 ? '0' + minutes : minutes; document.getElementById('seconds').textContent = seconds < 10 ? '0' + seconds : seconds; // Stop the countdown when it reaches zero if (duration.asSeconds() <= 0) { clearInterval(timer); document.getElementById('countdown').innerHTML = "

Countdown Finished!

"; } } // Update countdown every second let timer = setInterval(updateCountdown, 1000);

URL to Image tool with colorful styling and all its features use any free library...

 

URL to Image Tool

Enter Image URL

Invalid URL or unable to fetch image. Please try again.

Image Preview:

Privacy Policy Generator tool with colorful styling and all its features use any free library...

 

Privacy Policy Generator

Company Name

Website URL

Email Address

Types of Data Collected (Comma Separated)

Third-Party Services (Comma Separated)

Terms & Conditions Generator tool with colorful styling and all its features use any free library...

 

Terms & Conditions Generator

Company Name

Website Name

Website URL

Effective Date

Your Terms & Conditions:

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #42e695, #3bb2b8); height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } .container { background-color: #ffffff; padding: 2rem; border-radius: 10px; max-width: 600px; width: 100%; text-align: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); color: #333; } h1 { margin-bottom: 1.5rem; color: #42e695; } .input-group { margin-bottom: 1rem; text-align: left; } label { display: block; margin-bottom: 0.5rem; color: #555; } input { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 5px; outline: none; } input:focus { border-color: #42e695; } button { background-color: #42e695; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; margin-top: 1rem; transition: background-color 0.3s ease; } button:hover { background-color: #3bb2b8; } .hidden { display: none; } #termsOutput { margin-top: 2rem; text-align: left; } #copyBtn { background-color: #27ae60; color: white; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; margin-top: 1rem; } #copyBtn:hover { background-color: #219150; } const termsForm = document.getElementById('termsForm'); const generatedTerms = document.getElementById('generatedTerms'); const termsOutput = document.getElementById('termsOutput'); const copyBtn = document.getElementById('copyBtn'); termsForm.addEventListener('submit', function (e) { e.preventDefault(); // Get form values const companyName = document.getElementById('companyName').value; const websiteName = document.getElementById('websiteName').value; const websiteURL = document.getElementById('websiteURL').value; const effectiveDate = document.getElementById('effectiveDate').value; // Generate the Terms & Conditions text const termsText = `

Terms and Conditions

Welcome to ${websiteName}!

These terms and conditions outline the rules and regulations for the use of ${companyName}'s Website, located at ${websiteURL}.

By accessing this website we assume you accept these terms and conditions. Do not continue to use ${websiteName} if you do not agree to take all of the terms and conditions stated on this page.

Cookies

We employ the use of cookies. By accessing ${websiteName}, you agreed to use cookies in agreement with ${companyName}'s Privacy Policy.

License

Unless otherwise stated, ${companyName} and/or its licensors own the intellectual property rights for all material on ${websiteName}. All intellectual property rights are reserved. You may access this from ${websiteName} for your own personal use subjected to restrictions set in these terms and conditions.

User Comments

Certain parts of this website offer an opportunity for users to post and exchange opinions and information. ${companyName} does not filter, edit, publish or review Comments prior to their presence on the website. Comments do not reflect the views and opinions of ${companyName}, its agents, and/or affiliates. Comments reflect the views and opinions of the person who posts them. ${companyName} shall not be liable for the Comments or any liability, damages, or expenses caused by their use.

Effective Date: ${effectiveDate}

`; // Display the generated Terms & Conditions generatedTerms.innerHTML = termsText; termsOutput.classList.remove('hidden'); }); // Copy to clipboard functionality copyBtn.addEventListener('click', function () { const textToCopy = generatedTerms.innerText; navigator.clipboard.writeText(textToCopy).then(() => { alert('Terms & Conditions copied to clipboard!'); }).catch(err => { console.error('Failed to copy: ', err); }); });