case-converter-tool/index.html at master · laolin5564/case-converter-tool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Case Converter - Free Online Text Case Converter Tool</title>
    <meta name="description" content="Free online case converter tool. Convert text to uppercase, lowercase, title case, sentence case, camelCase, snake_case, kebab-case and more. Fast, free, no signup required.">
    <meta name="keywords" content="case converter, text case converter, uppercase converter, lowercase converter, title case converter, camelCase converter, snake_case converter">
    <link rel="canonical" href="https://caseconverter.tools/">
    <meta property="og:title" content="Case Converter - Free Online Text Case Converter Tool">
    <meta property="og:description" content="Convert text between uppercase, lowercase, title case, camelCase, snake_case and more. Free online tool.">
    <meta property="og:type" content="website">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>Aa</text></svg>">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="/" class="logo">Aa Case Converter</a>
            <ul>
                <li><a href="/" class="active">All Converters</a></li>
                <li><a href="/uppercase.html">UPPERCASE</a></li>
                <li><a href="/lowercase.html">lowercase</a></li>
                <li><a href="/titlecase.html">Title Case</a></li>
                <li><a href="/camelcase.html">camelCase</a></li>
                <li><a href="/snakecase.html">snake_case</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Case Converter — Free Online Text Case Converter</h1>
            <p>Instantly convert your text to any case format. Paste your text below, click a button, and copy the result. No signup, no limits, 100% free.</p>
        </section>

        <section class="tool-section">
            <div class="input-area">
                <label for="inputText">Paste or type your text here:</label>
                <textarea id="inputText" rows="8" placeholder="Type or paste your text here..."></textarea>
                <div class="input-stats">
                    <span id="charCount">0 characters</span> · <span id="wordCount">0 words</span> · <span id="lineCount">0 lines</span>
                </div>
            </div>

            <div class="buttons-grid">
                <button onclick="convertCase('upper')" class="btn btn-primary">UPPERCASE</button>
                <button onclick="convertCase('lower')" class="btn btn-primary">lowercase</button>
                <button onclick="convertCase('title')" class="btn btn-primary">Title Case</button>
                <button onclick="convertCase('sentence')" class="btn btn-primary">Sentence case</button>
                <button onclick="convertCase('camel')" class="btn btn-secondary">camelCase</button>
                <button onclick="convertCase('pascal')" class="btn btn-secondary">PascalCase</button>
                <button onclick="convertCase('snake')" class="btn btn-secondary">snake_case</button>
                <button onclick="convertCase('kebab')" class="btn btn-secondary">kebab-case</button>
                <button onclick="convertCase('constant')" class="btn btn-secondary">CONSTANT_CASE</button>
                <button onclick="convertCase('dot')" class="btn btn-secondary">dot.case</button>
                <button onclick="convertCase('path')" class="btn btn-secondary">path/case</button>
                <button onclick="convertCase('toggle')" class="btn btn-secondary">tOGGLE cASE</button>
                <button onclick="convertCase('alternating')" class="btn btn-secondary">aLtErNaTiNg</button>
                <button onclick="convertCase('inverse')" class="btn btn-secondary">InVeRsE</button>
            </div>

            <div class="output-area">
                <label for="outputText">Result:</label>
                <textarea id="outputText" rows="8" readonly placeholder="Converted text will appear here..."></textarea>
                <div class="output-actions">
                    <button onclick="copyOutput()" class="btn btn-copy" id="copyBtn">📋 Copy to Clipboard</button>
                    <button onclick="clearAll()" class="btn btn-clear">🗑️ Clear</button>
                    <button onclick="swapText()" class="btn btn-swap">🔄 Use as Input</button>
                </div>
            </div>
        </section>

        <!-- SEO Content Sections -->
        <section class="converters-list">
            <h2>All Text Case Converters</h2>
            <p>Choose a specific converter below to learn more about each text case format and access dedicated tools:</p>

            <div class="converter-cards">
                <a href="/uppercase.html" class="card">
                    <h3>Uppercase Converter</h3>
                    <p>Convert text to ALL UPPERCASE letters. Perfect for headings, acronyms, and emphasis.</p>
                    <span class="example">hello world → HELLO WORLD</span>
                </a>
                <a href="/lowercase.html" class="card">
                    <h3>Lowercase Converter</h3>
                    <p>Convert text to all lowercase letters. Useful for normalizing text and email addresses.</p>
                    <span class="example">HELLO WORLD → hello world</span>
                </a>
                <a href="/titlecase.html" class="card">
                    <h3>Title Case Converter</h3>
                    <p>Capitalize the first letter of each word. Ideal for headlines and titles.</p>
                    <span class="example">hello world → Hello World</span>
                </a>
                <a href="/sentencecase.html" class="card">
                    <h3>Sentence Case Converter</h3>
                    <p>Capitalize only the first letter of each sentence. Standard for body text.</p>
                    <span class="example">hello world. how are you → Hello world. How are you</span>
                </a>
                <a href="/camelcase.html" class="card">
                    <h3>camelCase Converter</h3>
                    <p>Convert text to camelCase format. Common in JavaScript and programming.</p>
                    <span class="example">hello world → helloWorld</span>
                </a>
                <a href="/pascalcase.html" class="card">
                    <h3>PascalCase Converter</h3>
                    <p>Convert text to PascalCase format. Used for class names in many languages.</p>
                    <span class="example">hello world → HelloWorld</span>
                </a>
                <a href="/snakecase.html" class="card">
                    <h3>snake_case Converter</h3>
                    <p>Convert text to snake_case format. Popular in Python and database naming.</p>
                    <span class="example">hello world → hello_world</span>
                </a>
                <a href="/kebabcase.html" class="card">
                    <h3>kebab-case Converter</h3>
                    <p>Convert text to kebab-case format. Used for URLs and CSS class names.</p>
                    <span class="example">hello world → hello-world</span>
                </a>
                <a href="/constantcase.html" class="card">
                    <h3>CONSTANT_CASE Converter</h3>
                    <p>Convert text to CONSTANT_CASE. Used for constants in programming.</p>
                    <span class="example">hello world → HELLO_WORLD</span>
                </a>
            </div>
        </section>

        <section class="seo-content">
            <h2>What is a Case Converter?</h2>
            <p>A case converter is an online tool that transforms text between different letter case formats. Whether you need to convert text to uppercase, lowercase, title case, or programming-specific formats like camelCase and snake_case, our free tool handles it all instantly.</p>

            <h2>Why Use an Online Case Converter?</h2>
            <ul>
                <li><strong>Save Time:</strong> Instead of manually retyping text, convert entire paragraphs in one click.</li>
                <li><strong>Reduce Errors:</strong> Automated conversion eliminates typos and inconsistencies.</li>
                <li><strong>Multiple Formats:</strong> Support for 14+ case formats in one tool.</li>
                <li><strong>No Installation:</strong> Works directly in your browser — no software needed.</li>
                <li><strong>Free & Private:</strong> Your text is processed locally in your browser. Nothing is sent to any server.</li>
            </ul>

            <h2>Who Uses Case Converter Tools?</h2>
            <ul>
                <li><strong>Writers & Editors:</strong> Quickly fix capitalization in articles and documents.</li>
                <li><strong>Developers & Programmers:</strong> Convert between camelCase, snake_case, PascalCase for code.</li>
                <li><strong>Students:</strong> Format essay titles and headings correctly.</li>
                <li><strong>Marketers:</strong> Create consistent capitalization across campaigns.</li>
                <li><strong>Anyone:</strong> Fix accidental CAPS LOCK text in seconds.</li>
            </ul>

            <h2>Case Format Reference Guide</h2>
            <table class="reference-table">
                <thead>
                    <tr>
                        <th>Format</th>
                        <th>Example</th>
                        <th>Common Use</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>UPPERCASE</td><td>HELLO WORLD</td><td>Headings, acronyms</td></tr>
                    <tr><td>lowercase</td><td>hello world</td><td>Emails, normalization</td></tr>
                    <tr><td>Title Case</td><td>Hello World</td><td>Headlines, book titles</td></tr>
                    <tr><td>Sentence case</td><td>Hello world</td><td>Body text, paragraphs</td></tr>
                    <tr><td>camelCase</td><td>helloWorld</td><td>JavaScript variables</td></tr>
                    <tr><td>PascalCase</td><td>HelloWorld</td><td>Class names</td></tr>
                    <tr><td>snake_case</td><td>hello_world</td><td>Python, databases</td></tr>
                    <tr><td>kebab-case</td><td>hello-world</td><td>URLs, CSS classes</td></tr>
                    <tr><td>CONSTANT_CASE</td><td>HELLO_WORLD</td><td>Constants</td></tr>
                    <tr><td>dot.case</td><td>hello.world</td><td>File extensions, configs</td></tr>
                </tbody>
            </table>
        </section>

        <section class="faq">
            <h2>Frequently Asked Questions</h2>
            <details>
                <summary>Is this case converter tool free?</summary>
                <p>Yes, completely free with no limits. Use it as much as you want.</p>
            </details>
            <details>
                <summary>Is my text data safe?</summary>
                <p>Absolutely. All text conversion happens locally in your browser using JavaScript. Your text is never sent to any server.</p>
            </details>
            <details>
                <summary>What is the difference between camelCase and PascalCase?</summary>
                <p>In camelCase, the first word starts with a lowercase letter (e.g., "helloWorld"). In PascalCase, every word starts with an uppercase letter (e.g., "HelloWorld"). Both are used in programming.</p>
            </details>
            <details>
                <summary>Can I convert text with special characters?</summary>
                <p>Yes, our converter handles special characters, numbers, and Unicode text correctly.</p>
            </details>
            <details>
                <summary>What is snake_case used for?</summary>
                <p>snake_case is commonly used in Python programming, database column names, and file naming conventions. Words are separated by underscores and all letters are lowercase.</p>
            </details>
        </section>
    </main>

    <footer>
        <p>© 2026 Case Converter Tool. Free online text case converter.</p>
        <p>
            <a href="/">Home</a> ·
            <a href="/uppercase.html">Uppercase</a> ·
            <a href="/lowercase.html">Lowercase</a> ·
            <a href="/titlecase.html">Title Case</a> ·
            <a href="/camelcase.html">camelCase</a> ·
            <a href="/snakecase.html">snake_case</a> ·
            <a href="/kebabcase.html">kebab-case</a>
        </p>
    </footer>

    <script src="converter.js"></script>
</body>
</html>