You are not recognized as the original poster of this topic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clipboard Exporter</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#output {
margin-top: 20px;
}
.item {
margin: 5px 0;
cursor: pointer;
}
.remove-button {
margin-left: 10px;
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Clipboard Exporter</h1>
<textarea id="inputText" rows="4" cols="50" placeholder="Paste your text here..."></textarea><br>
<button id="addButton">Add Text</button>
<button id="clearButton">Clear All</button>
<button id="copyJsonButton">Copy JSON</button>
<button id="saveJsonButton">Save JSON to File</button>
<button id="importJsonButton">Import JSON from Input</button>
<input type="file" id="fileInput" accept=".json" style="display:none;">
<button id="importFileButton">Import JSON from File</button>
<div id="itemCount"></div> <!-- New div for item count -->
<div id="output"></div>
<script>
// Load existing items from localStorage
let jsonArray = JSON.parse(localStorage.getItem('clipboardItems')) || [];
// Display items on page load
displayItems();
document.getElementById('addButton').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value.trim();
if (inputText) {
// Check if the input text is unique
if (!jsonArray.includes(inputText)) {
// Add to the JSON array
jsonArray.push(inputText);
// Save to localStorage
localStorage.setItem('clipboardItems', JSON.stringify(jsonArray));
// Clear the input
document.getElementById('inputText').value = '';
// Update the display
displayItems();
} else {
alert('This text is already included.');
}
} else {
alert('Please paste some text.');
}
});
document.getElementById('clearButton').addEventListener('click', function() {
jsonArray = [];
localStorage.removeItem('clipboardItems');
displayItems();
});
document.getElementById('copyJsonButton').addEventListener('click', function() {
const jsonString = JSON.stringify(jsonArray);
document.getElementById('inputText').value = jsonString;
});
document.getElementById('saveJsonButton').addEventListener('click', function() {
const jsonString = JSON.stringify(jsonArray, null, 2);
const date = new Date().toISOString().split('T')[0]; // Get YYYY-MM-DD format
const itemCount = jsonArray.length;
const filename = `clipboard_export_${itemCount}_items_${date}.json`;
const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename; // Use the new filename
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
document.getElementById('importJsonButton').addEventListener('click', function() {
const inputJson = document.getElementById('inputText').value.trim();
try {
const importedArray = JSON.parse(inputJson);
if (Array.isArray(importedArray)) {
jsonArray = [...new Set([...jsonArray, ...importedArray])]; // Merge and keep unique
localStorage.setItem('clipboardItems', JSON.stringify(jsonArray));
displayItems();
alert('JSON imported successfully.');
} else {
alert('Invalid JSON format. Please provide an array.');
}
} catch (e) {
alert('Invalid JSON format. Please check your input.');
}
});
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const importedArray = JSON.parse(e.target.result);
if (Array.isArray(importedArray)) {
jsonArray = [...new Set([...jsonArray, ...importedArray])]; // Merge and keep unique
localStorage.setItem('clipboardItems', JSON.stringify(jsonArray));
displayItems();
alert('JSON imported successfully from file.');
} else {
alert('Invalid JSON format in file. Please provide an array.');
}
} catch (e) {
alert('Invalid JSON format in file. Please check the file content.');
}
};
reader.readAsText(file);
}
});
document.getElementById('importFileButton').addEventListener('click', function() {
document.getElementById('fileInput').click(); // Trigger file input click
});
function displayItems() {
const outputDiv = document.getElementById('output');
const itemCountDiv = document.getElementById('itemCount');
outputDiv.innerHTML = ''; // Clear previous output
itemCountDiv.textContent = `Total items: ${jsonArray.length}`; // Update item count display
jsonArray.forEach((item, index) => {
const shortText = item.substring(0, 140);
const length = item.length;
const itemDiv = document.createElement('div');
itemDiv.className = 'item';
itemDiv.textContent = `${shortText} (Length: ${length})`;
itemDiv.addEventListener('click', function() {
alert(`Full text: ${item}`);
});
const removeButton = document.createElement('span');
removeButton.className = 'remove-button';
removeButton.textContent = 'Remove';
removeButton.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent triggering the item click
jsonArray.splice(index, 1); // Remove the item from the array
localStorage.setItem('clipboardItems', JSON.stringify(jsonArray)); // Update localStorage
displayItems(); // Refresh the display
});
itemDiv.appendChild(removeButton);
outputDiv.appendChild(itemDiv);
});
}
</script>
</body>
</html>