If you like this code copy it below and run off like you just stole it !!!
This is a very cool tool for editing html codes that works real time. More cool toolz on the way :)
<title>SHAZIZZ-HTML-EDITOR</TITLE>
<center><center> <a href="index.html" style="color: rgb(0,255,0)"><font color="46ff33">HOME</font></a></center>
<body style="background-color:#FF0000;">
<h1>SHAZIZZ-HTML-EDIT</h1>
<div id="control-panel">
<button id="select-all">Select All</button>
<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Paste</button>
<button id="test">Test</button>
<button id="reset">Reset</button>
</div>
<label for="story">Edit your .html here.:</label>
<textarea id="html" name="html" rows="20" cols="50">
Copy or cut and paste your code...
</textarea>
<label for="review-html">REVIEW HTML:</label>
<iframe id="preview" frameborder="0" width="100%" height="500"></iframe>
<script>
const htmlTextArea = document.getElementById('html');
const previewIframe = document.getElementById('preview');
const selectAllButton = document.getElementById('select-all');
const copyButton = document.getElementById('copy');
const cutButton = document.getElementById('cut');
const pasteButton = document.getElementById('paste');
const testButton = document.getElementById('test');
const resetButton = document.getElementById('reset');
// Update preview iframe in real-time
htmlTextArea.addEventListener('input', () => {
previewIframe.contentDocument.body.innerHTML = htmlTextArea.value;
});
// Select all button functionality
selectAllButton.addEventListener('click', () => {
htmlTextArea.select();
});
// Copy button functionality
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(htmlTextArea.value);
});
// Cut button functionality
cutButton.addEventListener('click', () => {
navigator.clipboard.writeText(htmlTextArea.value);
htmlTextArea.value = '';
});
// Paste button functionality
pasteButton.addEventListener('click', async () => {
const text = await navigator.clipboard.readText();
htmlTextArea.value = text;
});
// Test button functionality (no functionality assigned)
testButton.addEventListener('click', () => {
console.log('Test button clicked');
});
// Reset button functionality
resetButton.addEventListener('click', () => {
htmlTextArea.value = '';
previewIframe.contentDocument.body.innerHTML = '';
});
</script><p> SAMPLE CODE: <label for="story">paste your code here:</label>
<textarea id="HTML" name="HTML" rows="5" cols="33">
USE THIS SPACE TO EDIT...
</textarea>
</P>
</center>
<center><center> <a href="index.html" style="color: rgb(0,255,0)"><font color="46ff33">HOME</font></a></center>
<body style="background-color:#FF0000;">
<h1>SHAZIZZ-HTML-EDIT</h1>
<div id="control-panel">
<button id="select-all">Select All</button>
<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Paste</button>
<button id="test">Test</button>
<button id="reset">Reset</button>
</div>
<label for="story">Edit your .html here.:</label>
<textarea id="html" name="html" rows="20" cols="50">
Copy or cut and paste your code...
</textarea>
<label for="review-html">REVIEW HTML:</label>
<iframe id="preview" frameborder="0" width="100%" height="500"></iframe>
<script>
const htmlTextArea = document.getElementById('html');
const previewIframe = document.getElementById('preview');
const selectAllButton = document.getElementById('select-all');
const copyButton = document.getElementById('copy');
const cutButton = document.getElementById('cut');
const pasteButton = document.getElementById('paste');
const testButton = document.getElementById('test');
const resetButton = document.getElementById('reset');
// Update preview iframe in real-time
htmlTextArea.addEventListener('input', () => {
previewIframe.contentDocument.body.innerHTML = htmlTextArea.value;
});
// Select all button functionality
selectAllButton.addEventListener('click', () => {
htmlTextArea.select();
});
// Copy button functionality
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(htmlTextArea.value);
});
// Cut button functionality
cutButton.addEventListener('click', () => {
navigator.clipboard.writeText(htmlTextArea.value);
htmlTextArea.value = '';
});
// Paste button functionality
pasteButton.addEventListener('click', async () => {
const text = await navigator.clipboard.readText();
htmlTextArea.value = text;
});
// Test button functionality (no functionality assigned)
testButton.addEventListener('click', () => {
console.log('Test button clicked');
});
// Reset button functionality
resetButton.addEventListener('click', () => {
htmlTextArea.value = '';
previewIframe.contentDocument.body.innerHTML = '';
});
</script><p> SAMPLE CODE: <label for="story">paste your code here:</label>
<textarea id="HTML" name="HTML" rows="5" cols="33">
USE THIS SPACE TO EDIT...
</textarea>
</P>
</center>