Unix Timestamp Converter Tool with colorful styling and all its features use any free library

 

Unix Timestamp Converter

Enter Unix Timestamp

Converted Date and Time:

/* Global styles */ body { font-family: 'Arial', sans-serif; background-color: #f4f7fa; margin: 0; padding: 0; height: 100vh; } /* Container styles */ .container { max-width: 600px; padding-top: 30px; } /* Card styling */ .card { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; } .card-body { background: #ffffff; border-radius: 10px; } /* Button Styling */ button { font-size: 16px; padding: 10px; } button:hover { background-color: #007bff; } button i { margin-left: 8px; } /* Result display */ .result { background-color: #fff3cd; border: 1px solid #ffeeba; padding: 10px; border-radius: 5px; margin-top: 20px; } #convertedDate { font-size: 18px; color: #28a745; } document.getElementById('convertBtn').addEventListener('click', function() { const timestampInput = document.getElementById('timestampInput').value; const convertedDate = document.getElementById('convertedDate'); if (timestampInput === '') { convertedDate.innerHTML = 'Please enter a valid Unix timestamp.'; } else { const unixTimestamp = parseInt(timestampInput); if (isNaN(unixTimestamp)) { convertedDate.innerHTML = 'Please enter a valid number.'; } else { // Use moment.js to convert Unix timestamp const date = moment.unix(unixTimestamp).format('MMMM Do YYYY, h:mm:ss a'); convertedDate.innerHTML = date; } } });

YouTube Thumbnail Downloader Tool with colorful styling and all its features use any free library

 

YouTube Thumbnail Downloader

Enter the YouTube video URL to download its thumbnail

© 2024 YouTube Thumbnail Downloader

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background-color: #f7f7f7; color: #333; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } header { margin-bottom: 20px; } header h1 { color: #ff4d4d; font-size: 2.5rem; margin-bottom: 10px; } header p { font-size: 1rem; color: #555; } .input-container { display: flex; justify-content: center; gap: 10px; } #videoURL { width: 70%; padding: 10px; border: 2px solid #ff4d4d; border-radius: 8px; font-size: 1rem; } #downloadBtn { padding: 10px 20px; background-color: #ff4d4d; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } #downloadBtn:hover { background-color: #ff6666; } #thumbnailResult { margin-top: 30px; } .thumbnail-box { margin-bottom: 20px; } #thumbnailImage { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #218838; } footer { margin-top: 40px; font-size: 0.8rem; color: #aaa; } .hidden { display: none; } @media screen and (max-width: 480px) { .container { padding: 15px; } header h1 { font-size: 2rem; } .input-container { flex-direction: column; } #videoURL { width: 100%; } #downloadBtn { width: 100%; } } document.getElementById("downloadBtn").addEventListener("click", function() { const videoURL = document.getElementById("videoURL").value; if (!videoURL) { alert("Please enter a valid YouTube URL"); return; } // Extract the video ID from the YouTube URL const videoId = getYouTubeVideoId(videoURL); if (!videoId) { alert("Invalid YouTube URL. Please try again."); return; } // Generate thumbnail URL (largest resolution) const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; // Show the thumbnail and download link document.getElementById("thumbnailResult").classList.remove("hidden"); document.getElementById("thumbnailImage").src = thumbnailUrl; document.getElementById("downloadLink").href = thumbnailUrl; }); function getYouTubeVideoId(url) { const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[^\s]*)/; const matches = url.match(regex); return matches && matches[1]; }

Earn money online Tool with colorful styling and all its features use any free library

 

Earn Money Online Tool

Share Your Money-Making Idea:

Submitted Ideas

body { background-color: #f8f9fa; } h1 { color: #343a40; } h2 { color: #007bff; } .btn-primary { background-color: #28a745; border-color: #28a745; } .btn-primary:hover { background-color: #218838; border-color: #1e7e34; } .list-group-item { background-color: #ffffff; } document.getElementById('ideaForm').addEventListener('submit', function(event) { event.preventDefault(); const ideaInput = document.getElementById('ideaInput'); const ideaText = ideaInput.value; if (ideaText.trim() === '') { alert('Please enter an idea!'); return; } const ideasList = document.getElementById('ideasList'); const newIdeaItem = document.createElement('li'); newIdeaItem.className = 'list-group-item'; newIdeaItem.textContent = ideaText; ideasList.appendChild(newIdeaItem); ideaInput.value = ''; });

YouTube subscribe URL Tool with colorful styling and all its features use any free library

 

YouTube Subscribe URL Tool

body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } h1 { text-align: center; color: #FF0000; } input[type="text"] { width: 100%; padding: 10px; margin: 10px 0; border: 2px solid #FF0000; border-radius: 5px; font-size: 16px; } button { width: 100%; padding: 10px; background-color: #FF0000; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { background-color: #CC0000; } .result { margin-top: 20px; padding: 10px; border: 2px solid #FF0000; border-radius: 5px; text-align: center; display: none; } .result a { color: #FF0000; text-decoration: none; font-weight: bold; } .result a:hover { text-decoration: underline; } document.getElementById('generateButton').addEventListener('click', function() { const channelId = document.getElementById('channelId').value.trim(); const resultDiv = document.getElementById('result'); if (channelId) { // Create the subscribe link const subscribeLink = `https://www.youtube.com/channel/${channelId}?sub_confirmation=1`; // Display the result resultDiv.innerHTML = `Your Subscribe Link: ${subscribeLink}`; resultDiv.style.display = 'block'; } else { resultDiv.style.display = 'none'; alert('Please enter a valid YouTube Channel ID or URL.'); } });

YouTube views gains & subscriber Tool with colorful styling and all its features use any free library

 

YouTube Views & Subscriber Gain Tool

Current Views:

Current Subscribers:

Views Gain:

Subscribers Gain:

Results

body { background-color: #f4f4f4; } .card { background-color: #ffffff; border-radius: 8px; } h1 { color: #ff0000; } .btn-primary { background-color: #ff0000; border: none; } .btn-primary:hover { background-color: #e60000; } .result { background-color: #e7f3fe; border: 1px solid #b3d7ff; border-radius: 8px; padding: 20px; } document.getElementById('gainForm').addEventListener('submit', function(event) { event.preventDefault(); const currentViews = parseInt(document.getElementById('currentViews').value); const currentSubscribers = parseInt(document.getElementById('currentSubscribers').value); const viewGain = parseInt(document.getElementById('viewGain').value); const subscriberGain = parseInt(document.getElementById('subscriberGain').value); const newViews = currentViews + viewGain; const newSubscribers = currentSubscribers + subscriberGain; document.getElementById('viewResult').textContent = `New Views: ${newViews}`; document.getElementById('subscriberResult').textContent = `New Subscribers: ${newSubscribers}`; document.getElementById('result').style.display = 'block'; });

JSON to XML Tool with colorful styling and all its features use any free library

 

JSON to XML Converter

XML Output

body { font-family: Arial, sans-serif; background-color: #f0f4f8; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 90%; max-width: 600px; } h1 { text-align: center; color: #4A90E2; } textarea { width: 100%; height: 150px; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; resize: none; } textarea:focus { border-color: #4A90E2; outline: none; } button { background-color: #4A90E2; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; width: 100%; } button:hover { background-color: #357ABD; } h2 { margin-top: 20px; color: #4A90E2; } document.getElementById('convertButton').addEventListener('click', function() { const jsonInput = document.getElementById('jsonInput').value; const xmlOutput = document.getElementById('xmlOutput'); try { const jsonObject = JSON.parse(jsonInput); const xmlString = jsonToXml(jsonObject); xmlOutput.value = xmlString; } catch (e) { xmlOutput.value = 'Invalid JSON input!'; } }); function jsonToXml(json) { let xml = ''; for (const prop in json) { if (json.hasOwnProperty(prop)) { xml += `<${prop}>`; if (typeof json[prop] === 'object' && !Array.isArray(json[prop])) { xml += jsonToXml(json[prop]); } else if (Array.isArray(json[prop])) { json[prop].forEach(item => { xml += `<${prop}>${jsonToXml(item)}</${prop}>`; }); } else { xml += json[prop]; } xml += `</${prop}>`; } } return xml; }

XML to JSON Tool with colorful styling and all its features use any free library

 

XML to JSON Converter

JSON Output

body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } textarea { width: 100%; height: 200px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: none; } button { display: block; width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; } button:hover { background-color: #218838; } pre { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; margin-top: 10px; } document.getElementById('convertBtn').addEventListener('click', function() { const xmlInput = document.getElementById('xmlInput').value; const parser = new xml2js.Parser(); parser.parseString(xmlInput, function (err, result) { if (err) { document.getElementById('jsonOutput').textContent = 'Error parsing XML: ' + err.message; return; } // Convert result to JSON string const jsonString = JSON.stringify(result, null, 4); document.getElementById('jsonOutput').textContent = jsonString; }); });