@@ -161,62 +161,89 @@ <h1>Text Comparison Tool</h1>
161161 function processTrace ( trace , otherTrace , resultId ) {
162162 const lines = trace . trim ( ) . split ( '\n' ) ;
163163 const otherLines = otherTrace . trim ( ) . split ( '\n' ) ;
164- let contentHtml = '' ;
165- let lineNumbersHtml = '' ;
166- let indentLevel = 0 ;
167- let blockStartLine = - 1 ;
164+ const container = document . createElement ( 'div' ) ;
165+ const lineNumbersDiv = document . createElement ( 'div' ) ;
166+ const contentAreaDiv = document . createElement ( 'div' ) ;
168167
168+ lineNumbersDiv . className = 'line-numbers' ;
169+ contentAreaDiv . className = 'content-area' ;
170+ container . appendChild ( lineNumbersDiv ) ;
171+ container . appendChild ( contentAreaDiv ) ;
172+
169173 // Generate line numbers
170174 for ( let i = 1 ; i <= lines . length ; i ++ ) {
171- lineNumbersHtml += `${ i } \n` ;
175+ const lineNum = document . createElement ( 'div' ) ;
176+ lineNum . textContent = i ;
177+ lineNumbersDiv . appendChild ( lineNum ) ;
172178 }
173-
179+
180+ let indentLevel = 0 ;
181+ let currentBlock = contentAreaDiv ;
182+
174183 for ( let i = 0 ; i < lines . length ; i ++ ) {
175184 const line = lines [ i ] . trim ( ) ;
176185 const shouldHighlight = ! otherLines . some ( otherLine => otherLine . trim ( ) === line ) ;
177186 const highlightClass = shouldHighlight ? 'highlight' : '' ;
178-
179187 const isBlockStart = line . endsWith ( '{' ) && i < lines . length - 1 ;
180-
188+
181189 if ( isBlockStart ) {
182- blockStartLine = i ;
183- const functionName = line ;
184- contentHtml += `<div class="function-block" style="margin-left: ${ indentLevel * 20 } px">
185- <div class="function-header ${ highlightClass } ">
186- <span class="toggle-btn">▼</span>
187- <span class="function-name">${ functionName } </span>
188- </div>
189- <div class="function-content">` ;
190+ const functionBlock = document . createElement ( 'div' ) ;
191+ const header = document . createElement ( 'div' ) ;
192+ const toggleBtn = document . createElement ( 'span' ) ;
193+ const functionName = document . createElement ( 'span' ) ;
194+ const content = document . createElement ( 'div' ) ;
195+
196+ functionBlock . className = 'function-block' ;
197+ functionBlock . style . marginLeft = `${ indentLevel * 20 } px` ;
198+ header . className = `function-header ${ highlightClass } ` ;
199+ toggleBtn . className = 'toggle-btn' ;
200+ toggleBtn . textContent = '▼' ;
201+ functionName . className = 'function-name' ;
202+ functionName . textContent = line ;
203+ content . className = 'function-content' ;
204+
205+ header . appendChild ( toggleBtn ) ;
206+ header . appendChild ( functionName ) ;
207+ functionBlock . appendChild ( header ) ;
208+ functionBlock . appendChild ( content ) ;
209+ currentBlock . appendChild ( functionBlock ) ;
210+
190211 indentLevel ++ ;
212+ currentBlock = content ;
191213 } else if ( line . includes ( '}' ) ) {
192214 if ( indentLevel > 0 ) {
193215 indentLevel -- ;
194- contentHtml += `</div><span class="function-end ${ highlightClass } ">${ line } </span></div>` ;
216+ const endSpan = document . createElement ( 'span' ) ;
217+ endSpan . className = `function-end ${ highlightClass } ` ;
218+ endSpan . textContent = line ;
219+ currentBlock . appendChild ( endSpan ) ;
220+ currentBlock = currentBlock . parentElement . parentElement ; // Move up to parent block
195221 } else {
196- contentHtml += `<div class="line ${ highlightClass } ">${ line } </div>` ;
222+ const lineDiv = document . createElement ( 'div' ) ;
223+ lineDiv . className = `line ${ highlightClass } ` ;
224+ lineDiv . textContent = line ;
225+ currentBlock . appendChild ( lineDiv ) ;
197226 }
198227 } else {
199- const isLastLineBlock = line . endsWith ( '{' ) && i === lines . length - 1 ;
200- if ( isLastLineBlock ) {
201- contentHtml += `<div class="line ${ highlightClass } ">${ line } </div>` ;
202- } else {
203- contentHtml += `<div class="line ${ highlightClass } ">${ line } </div>` ;
204- }
228+ const lineDiv = document . createElement ( 'div' ) ;
229+ lineDiv . className = `line ${ highlightClass } ` ;
230+ lineDiv . textContent = line ;
231+ currentBlock . appendChild ( lineDiv ) ;
205232 }
206233 }
207-
208- return `<div class="line-numbers"> ${ lineNumbersHtml } </div><div class="content-area"> ${ contentHtml } </div>` ;
234+
235+ return container ;
209236 }
210237
211238 function initializeCollapsible ( containerId ) {
212239 const container = document . getElementById ( containerId ) ;
213240 const functionBlocks = container . querySelectorAll ( '.function-block' ) ;
214-
241+
215242 functionBlocks . forEach ( block => {
216243 const header = block . querySelector ( '.function-header' ) ;
217244 const toggleBtn = block . querySelector ( '.toggle-btn' ) ;
218-
219- header . addEventListener ( 'click' , ( e ) => {
245+
246+ header . addEventListener ( 'click' , ( ) => {
220247 block . classList . toggle ( 'collapsed' ) ;
221248 toggleBtn . textContent = block . classList . contains ( 'collapsed' ) ? '▶' : '▼' ;
222249 } ) ;
@@ -227,8 +254,13 @@ <h1>Text Comparison Tool</h1>
227254 const trace1 = document . getElementById ( 'input1' ) . value ;
228255 const trace2 = document . getElementById ( 'input2' ) . value ;
229256
230- document . getElementById ( 'result1' ) . innerHTML = processTrace ( trace1 , trace2 , 'result1' ) ;
231- document . getElementById ( 'result2' ) . innerHTML = processTrace ( trace2 , trace1 , 'result2' ) ;
257+ const result1 = document . getElementById ( 'result1' ) ;
258+ const result2 = document . getElementById ( 'result2' ) ;
259+ result1 . innerHTML = '' ; // Clear previous content
260+ result2 . innerHTML = '' ; // Clear previous content
261+
262+ result1 . appendChild ( processTrace ( trace1 , trace2 , 'result1' ) ) ;
263+ result2 . appendChild ( processTrace ( trace2 , trace1 , 'result2' ) ) ;
232264
233265 initializeCollapsible ( 'result1' ) ;
234266 initializeCollapsible ( 'result2' ) ;
0 commit comments