{"id":19887,"date":"2025-07-29T11:16:52","date_gmt":"2025-07-29T11:16:52","guid":{"rendered":"https:\/\/seoteampro.com\/text-case-converter\/"},"modified":"2025-08-05T05:44:19","modified_gmt":"2025-08-05T05:44:19","slug":"text-case-converter","status":"publish","type":"page","link":"https:\/\/seoteampro.com\/?page_id=19887","title":{"rendered":"Text Case Converter &#8211; Free Online Tool"},"content":{"rendered":"    <div class=\"text-case-converter-wrapper\">\n        <!-- Complete Text Case Converter Tool -->\n        <div class=\"converter-container\" style=\"max-width: 900px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden;\">\n            \n            <!-- Header -->\n            <div class=\"converter-header\" style=\"background: linear-gradient(135deg, #FE8724 0%, #194DC9 100%); color: white; padding: 40px 30px; text-align: center; position: relative; overflow: hidden;\">\n                <div style=\"position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: float 6s ease-in-out infinite; pointer-events: none;\"><\/div>\n                <h1 style=\"font-size: 2.5rem; font-weight: 700; margin: 0 0 10px 0; position: relative; z-index: 2;\">Text Case Converter<\/h1>\n                <p style=\"font-size: 1.1rem; opacity: 0.9; position: relative; z-index: 2; margin: 0;\">Transform your text with professional case conversion tools<\/p>\n            <\/div>\n\n            <!-- Main Content -->\n            <div class=\"converter-content\" style=\"padding: 40px 30px;\">\n                \n                <!-- Text Input Area -->\n                <div class=\"textarea-container\" style=\"position: relative; margin-bottom: 25px;\">\n                    <label for=\"textInput\" style=\"display: block; margin-bottom: 10px; font-weight: 600; color: #475569; font-size: 1rem;\">Enter your text below:<\/label>\n                    <textarea \n                        id=\"textInput\" \n                        placeholder=\"Type or paste your text here to get started...\"\n                        maxlength=\"50000\"\n                        style=\"width: 100%; min-height: 220px; max-height: 500px; padding: 25px; border: 2px solid #e2e8f0; border-radius: 16px; font-size: 16px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; resize: vertical; outline: none; background: #fafbfc; line-height: 1.6; word-wrap: break-word; box-sizing: border-box; transition: all 0.3s ease;\"\n                        spellcheck=\"false\"\n                        autocomplete=\"off\"\n                    ><\/textarea>\n                <\/div>\n\n                <!-- Statistics -->\n                <div class=\"converter-stats\" style=\"display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border-radius: 12px; margin-bottom: 30px; font-size: 14px; font-weight: 500; flex-wrap: wrap; gap: 15px;\">\n                    <div style=\"display: flex; align-items: center; gap: 8px; min-width: 80px;\">\n                        <span>Characters:<\/span>\n                        <span id=\"charCount\" style=\"color: #FE8724; font-weight: 700; font-size: 18px; min-width: 30px; text-align: right;\">0<\/span>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px; min-width: 80px;\">\n                        <span>Words:<\/span>\n                        <span id=\"wordCount\" style=\"color: #FE8724; font-weight: 700; font-size: 18px; min-width: 30px; text-align: right;\">0<\/span>\n                    <\/div>\n                    <div style=\"display: flex; align-items: center; gap: 8px; min-width: 80px;\">\n                        <span>Lines:<\/span>\n                        <span id=\"lineCount\" style=\"color: #FE8724; font-weight: 700; font-size: 18px; min-width: 30px; text-align: right;\">1<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Conversion Buttons -->\n                <div class=\"buttons-section\">\n                    <h3 style=\"font-size: 1.3rem; color: #1e293b; margin-bottom: 20px; font-weight: 600; margin-top: 0;\">Case Conversion Options<\/h3>\n                    <div class=\"button-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 35px;\">\n                        <button class=\"case-btn\" onclick=\"convertCase('toggle')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            TOGGLE cAsE\n                        <\/button>\n                        <button class=\"case-btn\" onclick=\"convertCase('sentence')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            Sentence Case\n                        <\/button>\n                        <button class=\"case-btn\" onclick=\"convertCase('lower')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            lower case\n                        <\/button>\n                        <button class=\"case-btn\" onclick=\"convertCase('upper')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            UPPER CASE\n                        <\/button>\n                        <button class=\"case-btn\" onclick=\"convertCase('capitalize')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            Capitalize Words\n                        <\/button>\n                        <button class=\"case-btn\" onclick=\"convertCase('alternate')\" style=\"padding: 16px 20px; border: 2px solid #e2e8f0; background: white; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; text-align: center; color: #475569; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            aLtErNaTe CaSe\n                        <\/button>\n                    <\/div>\n                    \n                    <!-- Utility Buttons -->\n                    <div class=\"utilities\" style=\"display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;\">\n                        <button class=\"utility-btn\" onclick=\"clearText()\" style=\"padding: 14px 28px; background: #FE8724; color: white; border: none; border-radius: 50px; cursor: pointer; font-size: 15px; font-weight: 600; min-width: 120px; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            \u2728 Clear\n                        <\/button>\n                        <button class=\"utility-btn\" onclick=\"copyText()\" style=\"padding: 14px 28px; background: #FE8724; color: white; border: none; border-radius: 50px; cursor: pointer; font-size: 15px; font-weight: 600; min-width: 120px; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            \ud83d\udccb Copy\n                        <\/button>\n                        <button class=\"utility-btn\" onclick=\"downloadText()\" style=\"padding: 14px 28px; background: #FE8724; color: white; border: none; border-radius: 50px; cursor: pointer; font-size: 15px; font-weight: 600; min-width: 120px; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                            \ud83d\udcbe Download\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Toast Notification -->\n        <div class=\"toast\" id=\"toast\" style=\"position: fixed; top: 30px; right: 30px; background: white; color: #1e293b; padding: 16px 24px; border-radius: 12px; opacity: 0; transform: translateX(100px); transition: all 0.4s ease; z-index: 1000; border-left: 4px solid #FE8724; box-shadow: 0 10px 40px rgba(0,0,0,0.15); font-weight: 500; max-width: 300px; word-wrap: break-word; pointer-events: none;\"><\/div>\n    <\/div>\n\n    <!-- CSS Styles -->\n    <style>\n        \/* Animation for header *\/\n        @keyframes float {\n            0%, 100% { \n                transform: translateY(0px) rotate(0deg); \n                opacity: 0.7;\n            }\n            50% { \n                transform: translateY(-20px) rotate(180deg); \n                opacity: 1;\n            }\n        }\n\n        \/* Hover effects for buttons *\/\n        .text-case-converter-wrapper .case-btn:hover {\n            border-color: #FE8724 !important;\n            transform: translateY(-2px);\n            box-shadow: 0 8px 25px rgba(254, 135, 36, 0.2);\n            color: #FE8724 !important;\n        }\n\n        .text-case-converter-wrapper .utility-btn:hover {\n            background: #194DC9 !important;\n            transform: translateY(-3px);\n            box-shadow: 0 10px 30px rgba(25, 77, 201, 0.3);\n        }\n\n        \/* Focus effects for textarea *\/\n        .text-case-converter-wrapper #textInput:focus {\n            border-color: #FE8724 !important;\n            background: white !important;\n            box-shadow: 0 0 0 4px rgba(254, 135, 36, 0.1) !important;\n            transform: scale(1.01);\n        }\n\n        \/* Toast notification states *\/\n        .text-case-converter-wrapper .toast.show {\n            opacity: 1 !important;\n            transform: translateX(0) !important;\n        }\n\n        .text-case-converter-wrapper .toast.error {\n            border-left-color: #ef4444 !important;\n            color: #dc2626 !important;\n        }\n\n        \/* Responsive design *\/\n        @media (max-width: 768px) {\n            .text-case-converter-wrapper .converter-container {\n                margin: 10px !important;\n                border-radius: 16px !important;\n            }\n            .text-case-converter-wrapper .converter-header {\n                padding: 30px 20px !important;\n            }\n            .text-case-converter-wrapper .converter-header h1 {\n                font-size: 2rem !important;\n            }\n            .text-case-converter-wrapper .converter-content {\n                padding: 30px 20px !important;\n            }\n            .text-case-converter-wrapper .button-grid {\n                grid-template-columns: 1fr !important;\n                gap: 12px !important;\n            }\n            .text-case-converter-wrapper .utilities {\n                flex-direction: column !important;\n                align-items: center !important;\n            }\n            .text-case-converter-wrapper .utility-btn {\n                width: 100% !important;\n                max-width: 200px !important;\n            }\n            .text-case-converter-wrapper .toast {\n                right: 10px !important;\n                left: 10px !important;\n                max-width: none !important;\n            }\n            .text-case-converter-wrapper .converter-stats {\n                justify-content: center !important;\n                text-align: center !important;\n            }\n        }\n\n        \/* Disable button states *\/\n        .text-case-converter-wrapper .case-btn:disabled,\n        .text-case-converter-wrapper .utility-btn:disabled {\n            opacity: 0.6;\n            cursor: not-allowed;\n            transform: none !important;\n        }\n    <\/style>\n\n    <!-- JavaScript Functionality -->\n    <script>\n        (function() {\n            'use strict';\n            \n            \/\/ Wait for DOM to be ready\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', initConverter);\n            } else {\n                initConverter();\n            }\n            \n            function initConverter() {\n                const textInput = document.getElementById('textInput');\n                const charCount = document.getElementById('charCount');\n                const wordCount = document.getElementById('wordCount');\n                const lineCount = document.getElementById('lineCount');\n                const toast = document.getElementById('toast');\n                \n                if (!textInput) return;\n\n                \/\/ Update statistics function\n                function updateStats() {\n                    try {\n                        const text = textInput.value || '';\n                        const length = text.length;\n                        \n                        \/\/ Character count\n                        charCount.textContent = length.toLocaleString();\n                        \n                        \/\/ Word count\n                        const words = text.trim() === '' ? 0 : text.trim().split(\/\\s+\/).filter(word => word.length > 0).length;\n                        wordCount.textContent = words.toLocaleString();\n                        \n                        \/\/ Line count\n                        const lines = text === '' ? 1 : text.split('\\n').length;\n                        lineCount.textContent = lines.toLocaleString();\n                        \n                    } catch (error) {\n                        console.error('Error updating stats:', error);\n                    }\n                }\n\n                \/\/ Debounce function for performance\n                function debounce(func, wait) {\n                    let timeout;\n                    return function executedFunction(...args) {\n                        const later = () => {\n                            clearTimeout(timeout);\n                            func.apply(this, args);\n                        };\n                        clearTimeout(timeout);\n                        timeout = setTimeout(later, wait);\n                    };\n                }\n\n                \/\/ Convert case function\n                window.convertCase = function(type) {\n                    try {\n                        const text = textInput.value;\n                        \n                        if (!text || !text.trim()) {\n                            showToast('Please enter some text first!', 'error');\n                            textInput.focus();\n                            return;\n                        }\n\n                        let convertedText = '';\n\n                        switch(type) {\n                            case 'toggle':\n                                convertedText = text.split('').map(char => {\n                                    return char === char.toLowerCase() ? char.toUpperCase() : char.toLowerCase();\n                                }).join('');\n                                break;\n                            case 'sentence':\n                                convertedText = text.toLowerCase().replace(\/(^\\s*\\w|[.!?]\\s*\\w)\/g, function(c) {\n                                    return c.toUpperCase();\n                                });\n                                break;\n                            case 'lower':\n                                convertedText = text.toLowerCase();\n                                break;\n                            case 'upper':\n                                convertedText = text.toUpperCase();\n                                break;\n                            case 'capitalize':\n                                convertedText = text.toLowerCase().replace(\/\\b\\w\/g, function(char) {\n                                    return char.toUpperCase();\n                                });\n                                break;\n                            case 'alternate':\n                                let letterIndex = 0;\n                                convertedText = text.split('').map((char) => {\n                                    if (char.match(\/[a-zA-Z]\/)) {\n                                        const result = letterIndex % 2 === 0 ? char.toLowerCase() : char.toUpperCase();\n                                        letterIndex++;\n                                        return result;\n                                    }\n                                    return char;\n                                }).join('');\n                                break;\n                            default:\n                                throw new Error('Invalid conversion type');\n                        }\n\n                        textInput.value = convertedText;\n                        updateStats();\n                        showToast('Text converted successfully! \u2705');\n                        \n                    } catch (error) {\n                        console.error('Error converting text:', error);\n                        showToast('Error converting text. Please try again.', 'error');\n                    }\n                };\n\n                \/\/ Clear text function\n                window.clearText = function() {\n                    try {\n                        const text = textInput.value;\n                        \n                        if (!text || !text.trim()) {\n                            showToast('Text area is already empty!', 'error');\n                            return;\n                        }\n                        \n                        \/\/ Confirm for large texts\n                        if (text.length > 1000) {\n                            if (!confirm('Are you sure you want to clear this large amount of text?')) {\n                                return;\n                            }\n                        }\n                        \n                        textInput.value = '';\n                        textInput.focus();\n                        updateStats();\n                        showToast('Text cleared successfully! \ud83d\uddd1\ufe0f');\n                        \n                    } catch (error) {\n                        console.error('Error clearing text:', error);\n                        showToast('Error clearing text', 'error');\n                    }\n                };\n\n                \/\/ Copy text function\n                window.copyText = async function() {\n                    try {\n                        const text = textInput.value;\n                        \n                        if (!text || !text.trim()) {\n                            showToast('No text to copy!', 'error');\n                            return;\n                        }\n\n                        \/\/ Modern clipboard API with fallback\n                        if (navigator.clipboard && window.isSecureContext) {\n                            await navigator.clipboard.writeText(text);\n                        } else {\n                            \/\/ Fallback for older browsers\n                            const textArea = document.createElement('textarea');\n                            textArea.value = text;\n                            textArea.style.position = 'fixed';\n                            textArea.style.left = '-999999px';\n                            textArea.style.top = '-999999px';\n                            document.body.appendChild(textArea);\n                            textArea.focus();\n                            textArea.select();\n                            \n                            const successful = document.execCommand('copy');\n                            document.body.removeChild(textArea);\n                            \n                            if (!successful) {\n                                throw new Error('Copy command failed');\n                            }\n                        }\n                        \n                        showToast('Text copied to clipboard! \ud83d\udccb');\n                        \n                    } catch (error) {\n                        console.error('Error copying text:', error);\n                        showToast('Unable to copy text. Please select and copy manually.', 'error');\n                    }\n                };\n\n                \/\/ Download text function\n                window.downloadText = function() {\n                    try {\n                        const text = textInput.value;\n                        \n                        if (!text || !text.trim()) {\n                            showToast('No text to download!', 'error');\n                            return;\n                        }\n\n                        const blob = new Blob([text], { type: 'text\/plain;charset=utf-8' });\n                        const url = URL.createObjectURL(blob);\n                        const timestamp = new Date().toISOString().slice(0, 19).replace(\/:\/g, '-');\n                        const filename = `converted_text_${timestamp}.txt`;\n                        \n                        const a = document.createElement('a');\n                        a.href = url;\n                        a.download = filename;\n                        a.style.display = 'none';\n                        \n                        document.body.appendChild(a);\n                        a.click();\n                        document.body.removeChild(a);\n                        \n                        \/\/ Clean up\n                        setTimeout(() => URL.revokeObjectURL(url), 100);\n                        \n                        showToast('Text downloaded successfully! \ud83d\udcbe');\n                        \n                    } catch (error) {\n                        console.error('Error downloading text:', error);\n                        showToast('Error downloading file. Please try again.', 'error');\n                    }\n                };\n\n                \/\/ Show toast notification\n                function showToast(message, type = 'success') {\n                    try {\n                        \/\/ Clear any existing toast\n                        toast.classList.remove('show', 'error');\n                        \n                        \/\/ Set message and type\n                        toast.textContent = message;\n                        if (type === 'error') {\n                            toast.classList.add('error');\n                        }\n                        toast.classList.add('show');\n                        \n                        \/\/ Auto-hide after 4 seconds\n                        setTimeout(() => {\n                            toast.classList.remove('show');\n                        }, 4000);\n                        \n                    } catch (error) {\n                        console.error('Error showing toast:', error);\n                    }\n                }\n\n                \/\/ Event listeners\n                const debouncedUpdateStats = debounce(updateStats, 100);\n                textInput.addEventListener('input', debouncedUpdateStats);\n                textInput.addEventListener('paste', () => setTimeout(updateStats, 50));\n                \n                \/\/ Focus effects\n                textInput.addEventListener('focus', function() {\n                    if (!this.disabled) {\n                        this.style.transform = 'scale(1.01)';\n                    }\n                });\n\n                textInput.addEventListener('blur', function() {\n                    this.style.transform = 'scale(1)';\n                });\n                \n                \/\/ Initialize stats and focus\n                updateStats();\n                setTimeout(() => {\n                    if (textInput && typeof textInput.focus === 'function') {\n                        textInput.focus();\n                    }\n                }, 100);\n            }\n        })();\n    <\/script>\n    \n<h3>\ud83d\ude80 What You Can Do:<\/h3>\n<ul>\n<li><strong>Toggle Case:<\/strong> Switch between upper and lower case<\/li>\n<li><strong>Sentence Case:<\/strong> Capitalize the first letter of sentences<\/li>\n<li><strong>Upper\/Lower Case:<\/strong> Convert entire text to capitals or lowercase<\/li>\n<li><strong>Capitalize Words:<\/strong> Make each word start with a capital letter<\/li>\n<li><strong>Alternate Case:<\/strong> Create alternating upper\/lower pattern<\/li>\n<li><strong>Copy &amp; Download:<\/strong> Easy sharing and file saving<\/li>\n<li><strong>Real-time Stats:<\/strong> Character, word, and line counting<\/li>\n<\/ul>\n<h3>\ud83d\udcf1 Features:<\/h3>\n<ul>\n<li>\u2705 <strong>Mobile Responsive<\/strong> &#8211; Works on all devices<\/li>\n<li>\u2705 <strong>Instant Results<\/strong> &#8211; No waiting, immediate conversion<\/li>\n<li>\u2705 <strong>Privacy Focused<\/strong> &#8211; Your text stays on your device<\/li>\n<li>\u2705 <strong>No Registration<\/strong> &#8211; Use immediately, no signup required<\/li>\n<li>\u2705 <strong>Professional Design<\/strong> &#8211; Clean, modern interface<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Free online text case converter. Transform text to uppercase, lowercase, sentence case and more.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":20008,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[35],"class_list":["post-19887","page","type-page","status-publish","hentry","category-tool"],"_links":{"self":[{"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/pages\/19887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seoteampro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19887"}],"version-history":[{"count":0,"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/pages\/19887\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/seoteampro.com\/index.php?rest_route=\/wp\/v2\/pages\/20008"}],"wp:attachment":[{"href":"https:\/\/seoteampro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seoteampro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=19887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}