use div instead of textarea
Hunter
Monday, July 7th, 2025 at 5:39 PM
50 font-family: monospace;
51 font-size: 21px;
52 padding: 15px;
- resize: none;
53 overflow: auto;
54 background: var(--editor-bg);
55 color: var(--text-color);
- spellcheck: false;
56 tab-size: 4;
- white-space: nowrap;
57 + white-space: pre;
58 overflow-x: auto;
59 }
60
61 + #editor:empty::before {
62 + content: attr(data-placeholder);
63 + color: #666;
64 + pointer-events: none;
65 + }
66 +
67 #preview {
68 width: 100%;
69 height: 100%;
101 </head>
102 <body>
103 <div class="editor-pane">
- <textarea id="editor" placeholder="Type your HTML, CSS, and JavaScript here..." spellcheck="false"></textarea>
104 + <div id="editor" contenteditable="true" spellcheck="false" data-placeholder="Type your HTML, CSS, and JavaScript here..."></div>
105 </div>
106
107 <div class="preview-pane">
115 const storageKey = 'html-lab-content';
116
117 function updatePreview() {
- const code = editor.value;
118 + const code = editor.textContent || editor.innerText || '';
119 const blob = new Blob([code], { type: 'text/html' });
120 const url = URL.createObjectURL(blob);
121 preview.src = url;
126
127 function saveToStorage() {
128 try {
- localStorage.setItem(storageKey, editor.value);
129 + localStorage.setItem(storageKey, editor.textContent || '');
130 } catch (e) {
131 // Handle localStorage errors silently
132 console.warn('Could not save to localStorage:', e);
137 try {
138 const saved = localStorage.getItem(storageKey);
139 if (saved !== null) {
- editor.value = saved;
140 + editor.textContent = saved;
141 return true;
142 }
143 } catch (e) {
153 if (e.key === 'Tab') {
154 e.preventDefault();
155
- const start = this.selectionStart;
- const end = this.selectionEnd;
-
156 // 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;
157 + document.execCommand('insertText', false, '\t');
158
159 // Trigger input event to update preview
160 this.dispatchEvent(new Event('input'));
179 });
180
181 function saveFile() {
- const code = editor.value;
182 + const code = editor.textContent || '';
183 const blob = new Blob([code], { type: 'text/html' });
184 const url = URL.createObjectURL(blob);
185
1 +<html>
2 + <marquee><h1>Armadillo World</h1></marquee>
3 + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Nine-banded_Armadillo.jpg/500px-Nine-banded_Armadillo.jpg" style="width: 100%"></img>
4 + <p>hehe i am an <span style="color:red">armadillo</span></p>
5 + <h3>armadillo facts</h3>
6 + <hr>
7 + <ul>
8 + <li>have a shell</li>
9 + <li>are cute</li>
10 + <li>want to be my friend</li>
11 + </ul>
12 + <table style="display: flex; justify-content: center; border: 1px solid red;">
13 + <tr>
14 + <th style="border: 1px solid blue">armadillo</th>
15 + <th>phone number</th>
16 + </tr>
17 + <tr>
18 + <td>Alf</td>
19 + <td>333-555-2021</td>
20 + </tr>
21 + <tr>
22 + <td>Cyril</td>
23 + <td>123-440-1212</td>
24 + </tr>
25 + </table>
26 +
27 + <h3>are you an armadillo?</h3>
28 + <hr>
29 + <p>
30 + If you or someone you know is an armadillo,
31 + please give me a call right now using the
32 + telephone number below.
33 + I eagerly await your call!!!!!!!!!!! :-)
34 + </p>
35 +</html>