Merge pull request #10 from pdedgar1/claude/improve-toolbar-spacing-01Q6yFp6SizKtSPBeG8ksaHt

Claude/improve toolbar spacing 01 q6y fp6 siz kt sp be g8ksa ht

Author: pdedgar1

alphabetizer-lab.html

@@ -97,6 +97,7 @@ <h2>Upload Text File</h2>
 const wordDisplay = document.getElementById('wordDisplay');
 const statsDisplay = document.getElementById('statsDisplay');
 const resultsHeader = document.getElementById('resultsHeader');
+const fontSizeSlider = document.getElementById('fontSizeSlider');
 
 fileInput.addEventListener('change', handleFileUpload);
 rearrangeBtn.addEventListener('click', rearrangeWords);
@@ -221,8 +222,6 @@ <h2>Upload Text File</h2>
 }
 
 // Font size slider
-const fontSizeSlider = document.getElementById('fontSizeSlider');
-const wordDisplay = document.getElementById('wordDisplay');
 if (fontSizeSlider && wordDisplay) {
     fontSizeSlider.addEventListener('input', (e) => {
         wordDisplay.style.fontSize = e.target.value + 'px';

line-break-lab.html

@@ -108,8 +108,8 @@ <h3>Remove All Line Breaks</h3>
 
         <div class="text-display" id="textDisplay" style="display: none;">
             <div class="toggle-bar">
-                <button class="view-toggle active" id="showOriginalBtn">Original Text</button>
-                <button class="view-toggle" id="showModifiedBtn">Modified Text</button>
+                <button class="view-toggle" id="showOriginalBtn">Original Text</button>
+                <button class="view-toggle active" id="showModifiedBtn">Modified Text</button>
                 <div class="font-size-control">
                     <label for="fontSizeSlider">Font Size: <span id="fontSizeValue">16px</span></label>
                     <input type="range" class="slider" id="fontSizeSlider" min="12" max="32" value="16">
@@ -126,7 +126,7 @@ <h3>Remove All Line Breaks</h3>
         // JavaScript for this specific tool
         let originalText = '';
 let currentText = '';
-let showingOriginal = true;
+let showingOriginal = false;
 
 // Tool states (add or remove)
 const toolStates = {

lipogram-lab.html

@@ -251,11 +251,8 @@ <h3>Spanish Letter</h3>
                     reader.onload = function(e) {
                         fileContent = e.target.result;
                         optionsSection.style.display = 'block';
-                        resultsSection.style.display = 'none';
-                        // Auto-apply if letters are already selected
-                        if (selectedLetters.size > 0) {
-                            applyLipogramFilter();
-                        }
+                        // Always show the text after upload
+                        applyLipogramFilter();
                     };
                     reader.onerror = function(e) {
                         console.error('Error reading file:', e);

text-reverse-lab.html

@@ -54,8 +54,8 @@ <h3>Insert Line Breaks</h3>
 
         <div class="text-display" id="textDisplay" style="display: none;">
             <div class="toggle-bar">
-                <button class="toggle-btn active" id="showOriginalBtn">Original Text</button>
-                <button class="toggle-btn" id="showModifiedBtn">Modified Text</button>
+                <button class="toggle-btn" id="showOriginalBtn">Original Text</button>
+                <button class="toggle-btn active" id="showModifiedBtn">Modified Text</button>
                 <div class="font-size-control">
                     <label for="fontSizeSlider">Font Size: <span id="fontSizeValue">16px</span></label>
                     <input type="range" class="slider" id="fontSizeSlider" min="12" max="32" value="16">
@@ -72,7 +72,7 @@ <h3>Insert Line Breaks</h3>
 
 let originalText = '';
 let currentText = '';
-let showingOriginal = true;
+let showingOriginal = false;
 
 const uploadZone = document.getElementById('uploadZone');
 const fileInput = document.getElementById('fileInput');
@@ -153,34 +153,18 @@ <h3>Insert Line Breaks</h3>
 });
 
 reverseWordsBtn.addEventListener('click', () => {
-    const words = currentText.split(/\s+/);
-    currentText = words.reverse().join(' ');
+    const lines = currentText.split('\n');
+    const reversedLines = lines.map(line => {
+        const words = line.split(/\s+/).filter(w => w.length > 0);
+        return words.reverse().join(' ');
+    });
+    currentText = reversedLines.join('\n');
     updateDisplay();
 });
 
 reverseLinesBtn.addEventListener('click', () => {
-    const segments = currentText.split(/([.\n])/);
-    const lines = [];
-    let temp = '';
-    
-    for (let i = 0; i < segments.length; i++) {
-        if (segments[i] === '.' || segments[i] === '\n') {
-            if (temp.trim()) {
-                lines.push(temp + segments[i]);
-                temp = '';
-            } else if (segments[i] === '\n') {
-                lines.push('\n');
-            }
-        } else {
-            temp += segments[i];
-        }
-    }
-    
-    if (temp.trim()) {
-        lines.push(temp);
-    }
-    
-    currentText = lines.reverse().join('');
+    const lines = currentText.split('\n');
+    currentText = lines.reverse().join('\n');
     updateDisplay();
 });