Paste Your JS
Extracted Blocks
👆 Tap to edit names, swipe to scroll
{
document.getElementById('input').value = text;
showToast("✅ Pasted from clipboard");
}).catch(err => {
alert("Could not paste. Try manual paste instead.");
});
}
function loadExample() {
const example = `// Example JavaScript with multiple blocks
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
const user = {
name: "Alex",
age: 30,
greet() {
return \`Hello, my name is \${this.name}\`;
}
applyDiscount(percent) {
this.price = this.price * (1 - percent/100);
return this.price;
}
}
// Arrow function example
const formatCurrency = (amount) => \`$\${amount.toFixed(2)}\`;
// Utility function
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
timeout = setTimeout(later, wait);
};
}`;
document.getElementById('input').value = example;
showToast("📖 Example loaded");
}
function shareOutput() {
const output = document.getElementById('output').textContent;
if (!output.trim()) {
showToast("❌ No output to share");
return;
output.substring(0, 100) + '...',
url: window.location.href
});
} else {
copy();
}
}
function toggleBuilderView() {
const builderEl = document.getElementById('builder');
const isCollapsed = builderEl.style.maxHeight === '200px';
if (isCollapsed) {
builderEl.style.maxHeight = '400px';
builderElHeight = '200px';
builderEl.style.overflow = 'hidden';
}
}
// TOAST NOTIFICATIONS (MOBILE-FRIENDLY)
function showToast(message) {
// Remove existing toast
const existing = document.querySelector('.toast');
if (existing) existing.remove();
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
toast.style.cssText = `
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #facc15;
color: #000;
padding: 12px 24px;
border-radius: 8px;
font-weight: bold;
z-index: 10000;
animation: fadeInOut document.body.appendChild(toast);
// Add CSS animation
if (!document.querySelector('#toast-style')) {
const style = document.createElement('style');
style.id = 'toast-style';
style.textContent = `
@keyframes fadeInOut {
0% { opacity: 0; bottom20px; }
100% { opacity: 0; bottom: 40px; }
}
`;
document.head.appendChild(style);
}
setTimeout(() => toast.remove(), 2000);
}
// ORIGINAL FUNCTIONS (OPTIMIZED FOR MOBILE)
function extract(){
const code = document.getElementById('input').value.trim();
if(!code) {
showToast("❌ Paste code first");
return;
}
originalBlocks = [];
const lines = code.split('\n');
let current = [], brace = 0, paren = 0;
const finishBlock = () => {
if(current.length === 0) return;
const content = current.join('\n');
if(!content.trim()) return;
const nameMatch =
content.match(/(function|const|let|var|class)\s+([A-Za-z_$][A-Za-z0-9_$]*)|([A-Za-z_$][A-Za-z0-9_$]*)\s*=/) || [];
const name = nameMatch[2] || nameMatch[3] || "anonymous";
originalBlocks.push({
id: 'b' + Date.now() + Math.random(),
name: name,
content: content,
lines: content.split('\n').length
});
current = [];
};
for(let line of lines){
current.push(line);
for(let ch of line){
if(ch==='{') brace++;
if(ch==='}') brace--;
if(ch==='(') paren++;
if(ch===')') paren--;
}
if(brace === 0 && paren <= 0 && current.length > 1) finishBlock();
}
finishBlock();
if(originalBlocks.length === 0){
originalBlocks.push({id:'full',name:'Full Script',content:Toast(`✅ Extracted ${originalBlocks.length} blocks`);
}
function renderBlocks(){
const blocksContainer = document.getElementById('blocks');
if (!blocksContainer) return;
blocksContainer.innerHTML = originalBlocks.map((b, i) => `
${b.name}
${b.lines} lines
`).join('');
}
function editBlock(i){
editingIndex = i;
const block = originalBlocks[i];
document.getElementById('editName').value = block.name;
document.getElementById('editCode').value = block.content;
document.getElementById('editorModal').style.display = 'block';
// Focus the edit field on mobile
if (isMobile) {
setTimeout(() => {
document.getElementById('editCode').focus();
}, 100);
}
}
function saveEdit(){
if(editingIndex === -1) return;
const block = originalBlocks[editingIndex];
block.name = document.getElementById('editName').value.trim() || "anonymous";
block.content = document.getElementById('editCode').value;
block.lines = block.content.split('\n').length;
closeEditor();
renderBlocks();
update();
showToast("💾 Changes saved");
}
function closeEditor(){
document.getElementById('editorModal').style.display = 'none';
editingIndex = -1;
// Blur any active element
if (document.activeElement) {
document.activeElement.blur();
}
}
function extractThis(id){
const block = originalBlocks.find(b => b.id === id);
if(block && !builder.find(b => bElementById('builder');
const outputContainer = document.getElementById('output');
if (!builderContainer || !outputContainer) return;
builderContainer.innerHTML = builder.map((b, i) => `
${b.name}
${b.lines} lines
${escapeHtml(b.content.trim())}
`).join('') || '
No blocks in builder yet
';
outputContainer.textContent =
builder.map(b => b.content.trim()).join('\n\n') + (builder.length ? '\n' : '');
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function rebuildOriginal(){
builder = originalBlocks.map(b => ({...b}));
update();
showToast("🔄 Original rebuilt");
}
function copy(){
const text = document.getElementById('output').textContent;
if (!text.trim()) {
showToast("❌ Nothing to copy");
return;
}
navigator.clipboard.writeText(text).then(() => {
showToast("📋 Copied to clipboard!");
}).catch(err => {
// Fallback for older browsers
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast("📋 Copied!");
});
}
function download(){
constById('output').textContent;
if (!text.trim()) {
showToast("❌ Nothing to download");
return;
}
const blob = new Blob([text], {type:'application/javascript'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'code-blox-output.js';
a}
// Close modal when clicking outside (mobile-friendly)
document.getElementById('editorModal').addEventListener('click', function(e) {
if (e.target === this) {
closeEditor();
}
});
// Prevent accidental page reload on mobile
window.addEventListener('beforeunload', function(e) {
if (builder.length > 0 || document.getElementById(' e.returnValue = '';
}
});
// Load a simple example on first visit
if (!localStorage.getItem('codeblox_visited')) {
localStorage.setItem('codeblox_visited', 'true');
setTimeout(loadExample, 500);
}