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; }); });

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

 

JSON to CSV Converter

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-color: #fff; 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 #ddd; border-radius: 4px; resize: none; font-size: 14px; } button { background-color: #4a90e2; color: white; border: none; border-radius: 4px; padding: 10px 15px; cursor: pointer; font-size: 16px; width: 100%; } button:hover { background-color: #357ab8; } button:disabled { background-color: #ddd; cursor: not-allowed; } @media (max-width: 600px) { button { padding: 8px 12px; } } document.getElementById('convertBtn').addEventListener('click', () => { const jsonInput = document.getElementById('jsonInput').value; const csvOutput = document.getElementById('csvOutput'); const downloadBtn = document.getElementById('downloadBtn'); try { const jsonData = JSON.parse(jsonInput); const csv = Papa.unparse(jsonData); csvOutput.value = csv; downloadBtn.style.display = 'block'; downloadBtn.onclick = () => downloadCSV(csv); } catch (error) { alert('Invalid JSON input. Please check your JSON format.'); csvOutput.value = ''; downloadBtn.style.display = 'none'; } }); function downloadCSV(csv) { const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.setAttribute('download', 'output.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }

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

 

JSON to Text Converter

Converted Text

body { font-family: Arial, sans-serif; background-color: #f0f4f8; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: auto; padding: 20px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { color: #4a90e2; } textarea { width: 100%; height: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; font-size: 14px; resize: none; } button { background-color: #4caf50; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #45a049; } h2 { color: #4a90e2; margin-top: 20px; } pre { background-color: #f9f9f9; padding: 10px; border: 1px solid #ddd; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } document.getElementById('convertBtn').addEventListener('click', function() { const jsonInput = document.getElementById('jsonInput').value; const textOutput = document.getElementById('textOutput'); try { const jsonObject = JSON.parse(jsonInput); const convertedText = jsonToText(jsonObject); textOutput.textContent = convertedText; } catch (error) { textOutput.textContent = 'Invalid JSON: ' + error.message; } }); function jsonToText(jsonObject) { let result = ''; function recursiveText(obj, indent = '') { for (const key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object' && obj[key] !== null) { result += `${indent}${key}:\n`; recursiveText(obj[key], indent + ' '); } else { result += `${indent}${key}: ${obj[key]}\n`; } } } } recursiveText(jsonObject); return result.trim(); }

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

 

Text to JSON Converter

Input Text

Output JSON

body { background-color: #f8f9fa; } textarea { border: 2px solid #007bff; } textarea:focus { border-color: #0056b3; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } .btn-success { background-color: #28a745; } .btn-success:hover { background-color: #218838; } .btn-info { background-color: #17a2b8; } .btn-info:hover { background-color: #138496; } document.getElementById('convertBtn').addEventListener('click', function() { const inputText = document.getElementById('inputText').value; const lines = inputText.split('\n'); const jsonOutput = {}; lines.forEach(line => { const [key, value] = line.split(':').map(item => item.trim()); if (key && value) { jsonOutput[key] = value; } }); document.getElementById('outputJson').value = JSON.stringify(jsonOutput, null, 2); }); document.getElementById('copyBtn').addEventListener('click', function() { const outputJson = document.getElementById('outputJson'); outputJson.select(); document.execCommand('copy'); alert('Copied to clipboard!'); });

JSON Viewer Tool with colorful styling and all its features use any free library..

 

JSON Viewer Tool

body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } textarea { width: 100%; height: 200px; margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; } button { display: block; width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #218838; } .json-output { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; background: #f9f9f9; max-height: 400px; overflow-y: auto; white-space: pre-wrap; } document.getElementById('loadJson').addEventListener('click', function() { const jsonInput = document.getElementById('jsonInput').value; let jsonData; try { jsonData = JSON.parse(jsonInput); displayJson(jsonData); } catch (error) { alert('Invalid JSON: ' + error.message); document.getElementById('jsonOutput').innerHTML = ''; } }); function displayJson(data) { const output = document.getElementById('jsonOutput'); output.innerHTML = ''; output.appendChild(createTree(data)); hljs.highlightBlock(output); } function createTree(data) { const container = document.createElement('div'); if (typeof data === 'object' && data !== null) { const list = document.createElement('ul'); for (const key in data) { const listItem = document.createElement('li'); const keyElement = document.createElement('span'); keyElement.className = 'key'; keyElement.textContent = key + ': '; listItem.appendChild(keyElement); if (typeof data[key] === 'object' && data[key] !== null) { const childContainer = createTree(data[key]); childContainer.style.display = 'none'; listItem.appendChild(childContainer); keyElement.addEventListener('click', () => { const isVisible = childContainer.style.display === 'block'; childContainer.style.display = isVisible ? 'none' : 'block'; }); } else { const valueElement = document.createElement('span'); valueElement.className = 'value'; valueElement.textContent = JSON.stringify(data[key]); listItem.appendChild(valueElement); } list.appendChild(listItem); } container.appendChild(list); } else { container.textContent = JSON.stringify(data); } return container; }