Patrick
53 lines
3.1 KiB
HTML
53 lines
3.1 KiB
HTML
<!-- ═══════════════ DIFF ═══════════════ -->
|
||
<div class="page" id="page-diff">
|
||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
<div class="section-header">
|
||
<h2><i class="fas fa-columns" style="color:var(--green)"></i> Diff Checker</h2>
|
||
<p>Compare two texts and find the differences.</p>
|
||
</div>
|
||
<div class="split-panel">
|
||
<div>
|
||
<div class="panel-label">Original</div>
|
||
<textarea id="diffA" placeholder="Paste original text..."></textarea>
|
||
</div>
|
||
<div>
|
||
<div class="panel-label">Modified</div>
|
||
<textarea id="diffB" placeholder="Paste modified text..."></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary" onclick="computeDiff()"><i class="fas fa-exchange-alt"></i> Compare</button>
|
||
</div>
|
||
<div class="diff-output" id="diffOutput"></div>
|
||
<div class="api-usage">
|
||
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||
<div class="api-usage-body">
|
||
<div class="api-baseurl-note">ℹ️ Diff Checker runs entirely <strong>client-side</strong>. No server API is needed. Here's the line-by-line comparison logic:</div>
|
||
<div class="api-endpoint">
|
||
<div class="api-desc">Simple line-by-line diff in JavaScript.</div>
|
||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side diff — no API call needed</span>
|
||
<span class="kw">function</span> <span class="fn">diffLines</span>(original, modified) {
|
||
<span class="kw">const</span> a = original.<span class="fn">split</span>(<span class="str">'\n'</span>);
|
||
<span class="kw">const</span> b = modified.<span class="fn">split</span>(<span class="str">'\n'</span>);
|
||
<span class="kw">const</span> result = [];
|
||
<span class="kw">const</span> max = Math.<span class="fn">max</span>(a.length, b.length);
|
||
<span class="kw">for</span> (<span class="kw">let</span> i = 0; i < max; i++) {
|
||
<span class="kw">if</span> (a[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
|
||
<span class="kw">else if</span> (b[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
|
||
<span class="kw">else if</span> (a[i] === b[i]) result.<span class="fn">push</span>({ type: <span class="str">'same'</span>, line: a[i] });
|
||
<span class="kw">else</span> {
|
||
result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
|
||
result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
|
||
}
|
||
}
|
||
<span class="kw">return</span> result;
|
||
}
|
||
|
||
<span class="kw">const</span> diff = <span class="fn">diffLines</span>(<span class="str">"hello\nworld"</span>, <span class="str">"hello\nearth"</span>);
|
||
<span class="cm">// → [{ type: "same", line: "hello" }, { type: "del", line: "world" }, { type: "add", line: "earth" }]</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|