dataform-delight / script.js
steved3269's picture
Now add a modern look to the form and make it responsive
ff7205b verified
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('dataForm');
const jsonOutput = document.getElementById('jsonOutput');
const jsonContent = document.getElementById('jsonContent');
const copyButton = document.getElementById('copyJson');
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
const data = {
name: formData.get('name'),
address: formData.get('address'),
phone: formData.get('phone'),
logoUrl: formData.get('logoUrl'),
};
// Display formatted JSON
jsonContent.textContent = JSON.stringify(data, null, 2);
jsonOutput.classList.remove('hidden');
// Scroll to output with offset
setTimeout(() => {
window.scrollTo({
top: jsonOutput.offsetTop - 20,
behavior: 'smooth'
});
}, 100);
});
copyButton.addEventListener('click', function() {
const textToCopy = jsonContent.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
// Show copied feedback
const icon = copyButton.querySelector('i');
const originalIcon = icon.dataset.feather;
icon.setAttribute('data-feather', 'check');
feather.replace();
setTimeout(() => {
icon.setAttribute('data-feather', originalIcon);
feather.replace();
}, 2000);
});
});
});