commit 6d35b97651d76aa8e0f3297c2844c3e262971d55
parent 1cd4d84b713fff42f40702e79cf552e5fdf85332
Author: Hunter
Date: Mon, 7 Jul 2025 17:39:10 -0400
use div instead of textarea
Diffstat:
2 files changed, 49 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
@@ -50,16 +50,20 @@
font-family: monospace;
font-size: 21px;
padding: 15px;
- resize: none;
overflow: auto;
background: var(--editor-bg);
color: var(--text-color);
- spellcheck: false;
tab-size: 4;
- white-space: nowrap;
+ white-space: pre;
overflow-x: auto;
}
+ #editor:empty::before {
+ content: attr(data-placeholder);
+ color: #666;
+ pointer-events: none;
+ }
+
#preview {
width: 100%;
height: 100%;
@@ -97,7 +101,7 @@
</head>
<body>
<div class="editor-pane">
- <textarea id="editor" placeholder="Type your HTML, CSS, and JavaScript here..." spellcheck="false"></textarea>
+ <div id="editor" contenteditable="true" spellcheck="false" data-placeholder="Type your HTML, CSS, and JavaScript here..."></div>
</div>
<div class="preview-pane">
@@ -111,7 +115,7 @@
const storageKey = 'html-lab-content';
function updatePreview() {
- const code = editor.value;
+ const code = editor.textContent || editor.innerText || '';
const blob = new Blob([code], { type: 'text/html' });
const url = URL.createObjectURL(blob);
preview.src = url;
@@ -122,7 +126,7 @@
function saveToStorage() {
try {
- localStorage.setItem(storageKey, editor.value);
+ localStorage.setItem(storageKey, editor.textContent || '');
} catch (e) {
// Handle localStorage errors silently
console.warn('Could not save to localStorage:', e);
@@ -133,7 +137,7 @@
try {
const saved = localStorage.getItem(storageKey);
if (saved !== null) {
- editor.value = saved;
+ editor.textContent = saved;
return true;
}
} catch (e) {
@@ -149,14 +153,8 @@
if (e.key === 'Tab') {
e.preventDefault();
- const start = this.selectionStart;
- const end = this.selectionEnd;
-
// Insert tab character at cursor position
- this.value = this.value.substring(0, start) + '\t' + this.value.substring(end);
-
- // Move cursor to after the inserted tab
- this.selectionStart = this.selectionEnd = start + 1;
+ document.execCommand('insertText', false, '\t');
// Trigger input event to update preview
this.dispatchEvent(new Event('input'));
@@ -181,7 +179,7 @@
});
function saveFile() {
- const code = editor.value;
+ const code = editor.textContent || '';
const blob = new Blob([code], { type: 'text/html' });
const url = URL.createObjectURL(blob);
diff --git a/index2.html b/index2.html
@@ -0,0 +1,35 @@
+<html>
+ <marquee><h1>Armadillo World</h1></marquee>
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Nine-banded_Armadillo.jpg/500px-Nine-banded_Armadillo.jpg" style="width: 100%"></img>
+ <p>hehe i am an <span style="color:red">armadillo</span></p>
+ <h3>armadillo facts</h3>
+ <hr>
+ <ul>
+ <li>have a shell</li>
+ <li>are cute</li>
+ <li>want to be my friend</li>
+ </ul>
+ <table style="display: flex; justify-content: center; border: 1px solid red;">
+ <tr>
+ <th style="border: 1px solid blue">armadillo</th>
+ <th>phone number</th>
+ </tr>
+ <tr>
+ <td>Alf</td>
+ <td>333-555-2021</td>
+ </tr>
+ <tr>
+ <td>Cyril</td>
+ <td>123-440-1212</td>
+ </tr>
+ </table>
+
+ <h3>are you an armadillo?</h3>
+ <hr>
+ <p>
+ If you or someone you know is an armadillo,
+ please give me a call right now using the
+ telephone number below.
+ I eagerly await your call!!!!!!!!!!! :-)
+ </p>
+</html>
+\ No newline at end of file