case-converter-tool/camelcase.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>camelCase Converter - Free Online Text camelCase Converter Tool</title>
    <meta name="description" content="Convert text to camelCase format online. Free camelCase converter for developers - transform any text to camelCase instantly.">
    <link rel="canonical" href="https://caseconverter.tools/camelcase.html">
    <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="/">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" class="active">camelCase</a></li>
                <li><a href="/snakecase.html" >snake_case</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>camelCase Converter — Convert Text to camelCase</h1>
            <p>Convert text to camelCase format online. Free camelCase converter for developers - transform any text to camelCase instantly.</p>
        </section>

        <section class="tool-section">
            <div class="input-area">
                <label for="inputText">Paste or type your text here:</label>
                <textarea id="inputText" rows="6" placeholder="Type or paste your text here...">hello world example</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('camel')" class="btn btn-primary" style="font-size:1.1rem;padding:14px 28px;">camelCase</button>
                <button onclick="convertCase('upper')" class="btn btn-secondary">UPPERCASE</button>
                <button onclick="convertCase('lower')" class="btn btn-secondary">lowercase</button>
                <button onclick="convertCase('title')" class="btn btn-secondary">Title Case</button>
                <button onclick="convertCase('sentence')" class="btn btn-secondary">Sentence case</button>
                <button onclick="convertCase('camel')" class="btn btn-secondary">camelCase</button>
                <button onclick="convertCase('snake')" class="btn btn-secondary">snake_case</button>
                <button onclick="convertCase('kebab')" class="btn btn-secondary">kebab-case</button>
            </div>

            <div class="output-area">
                <label for="outputText">Result:</label>
                <textarea id="outputText" rows="6" readonly placeholder="Converted text will appear here...">helloWorldExample</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>

        <section class="seo-content">
            <h2>What is camelCase?</h2><p>camelCase is a naming convention where the first word is lowercase and subsequent words are capitalized with no spaces or separators. It gets its name because the capital letters in the middle look like camel humps.</p><h2>Where is camelCase Used?</h2><ul><li><strong>JavaScript:</strong> Variable and function names (myVariable, getElementById)</li><li><strong>Java:</strong> Method and variable names</li><li><strong>TypeScript:</strong> Same as JavaScript conventions</li><li><strong>JSON:</strong> Property keys often use camelCase</li></ul><h2>camelCase vs PascalCase</h2><p>The difference is simple: camelCase starts with a lowercase letter (helloWorld), while PascalCase starts with an uppercase letter (HelloWorld). Both capitalize subsequent words.</p>
        </section>

        <section class="converters-list">
            <h2>Other Case Converters</h2>
            <div class="converter-cards">
                <a href="/" class="card"><h3>All Case Converters</h3><p>Access all 14+ text case conversion tools in one place.</p></a>
                <a href="/uppercase.html" class="card"><h3>Uppercase Converter</h3><p>hello → HELLO</p></a>
                <a href="/lowercase.html" class="card"><h3>Lowercase Converter</h3><p>HELLO → hello</p></a>
                <a href="/titlecase.html" class="card"><h3>Title Case Converter</h3><p>hello world → Hello World</p></a>
                <a href="/camelcase.html" class="card"><h3>camelCase Converter</h3><p>hello world → helloWorld</p></a>
                <a href="/snakecase.html" class="card"><h3>snake_case Converter</h3><p>hello world → hello_world</p></a>
                <a href="/kebabcase.html" class="card"><h3>kebab-case Converter</h3><p>hello world → hello-world</p></a>
            </div>
        </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>
    <script>updateStats();</script>
</body>
</html>