Advanced HTML Viewer Tool
Advanced HTML Viewer Tool
HTML Code
CSS Code
JavaScript Code
Live Preview
`;
// Creating a temporary HTML document
const content = htmlCode + cssCode + jsCode;
output.contentDocument.open();
output.contentDocument.write(content);
output.contentDocument.close();
}
// Event listener for the "Run" button
runBtn.addEventListener('click', function() {
updatePreview();
});
// Event listener for the "Clear" button
clearBtn.addEventListener('click', function() {
htmlEditor.value = '';
cssEditor.value = '';
jsEditor.value = '';
output.contentDocument.open();
output.contentDocument.close();
});
// Automatically update the preview as code is typed (with debounce for performance)
let timeout;
function debounce(fn, delay) {
return function() {
clearTimeout(timeout);
timeout = setTimeout(fn, delay);
};
}
const updatePreviewDebounced = debounce(updatePreview, 500);
htmlEditor.addEventListener('input', updatePreviewDebounced);
cssEditor.addEventListener('input', updatePreviewDebounced);
jsEditor.addEventListener('input', updatePreviewDebounced);
No comments:
Post a Comment