Click the above image for basic sourced and click following button for processing token source code.
Ethereum and EVM (ETC, BSC, AVAX-C-Chain, Polygon, etc).
Telegram Open Network (TON) decentralized application.
Solana decentralized application.
Tron decentralized application.
Near decentralized application.
Wax decentralized application.
Myalgo wallet for Algorand decentralized application.
Sync2 wallet for Vechain decentralized application.
Scatter wallet for EOS decentralized application.
Anchor Link wallet for EOS decentralized application.
Ontology decentralized application.
Rabbet wallet for Stellar Lumen decentralized application.
Freighter wallet for Stellar Lumen decentralized application.
Hive Signer for Hive decentralized application.
Hive Key Chain for Hive decentralized application.
Zilpay wallet for Zilliqa decentralized application.
Neoline wallet for Neo N2 decentralized application.
Neoline wallet for Neo N3 decentralized application.
Keplr wallet for Cosmos and other decentralized application.
Keeper wallet for Waves decentralized application.
IWallet for IOST decentralized application.
Text Case Converter in HTML CSS JavaScript
Get 1000000 0FP0EXP Token to remove widget entirely!
Get 500000 0FP0EXP Token to remove my NFTS advertisements!
Text Case Transformer
Type on the left, click a button, copy from the right.
INPUT
RESULT
Reference
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Case Converter</title>
<style>
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--bg: #f3f4f6;
--surface: #ffffff;
--text: #1f2937;
--border: #e5e7eb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 2rem;
}
header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
/* Main Layout */
.converter-container {
display: flex;
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
flex: 1;
width: 100%;
}
/* Flex Columns */
.text-column {
flex: 1;
display: flex;
flex-direction: column;
background: var(--surface);
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid var(--border);
}
.column-header {
padding: 1rem;
background: #f9fafb;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 0.9rem;
color: #6b7280;
}
textarea {
flex: 1;
width: 100%;
border: none;
resize: none;
padding: 1rem;
font-size: 1rem;
line-height: 1.5;
outline: none;
min-height: 300px; /* Default height */
}
/* The Control Panel (Middle) */
.controls {
display: flex;
flex-direction: column;
gap: 0.8rem;
justify-content: center;
min-width: 180px;
}
button {
padding: 0.75rem 1rem;
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s;
color: var(--text);
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
}
button:hover {
border-color: var(--primary);
color: var(--primary);
background: #eef2ff;
}
button.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* Utility buttons (Copy/Clear) */
.utility-btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
border-radius: 4px;
border: 1px solid var(--border);
background: white;
cursor: pointer;
}
.utility-btn:hover {
background: #f3f4f6;
}
/* Responsive Design */
@media (max-width: 850px) {
.converter-container {
flex-direction: column;
}
.controls {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
button {
flex: 1 1 120px; /* Grow, shrink, basis */
text-align: center;
justify-content: center;
}
textarea {
min-height: 150px;
}
}
</style>
</head>
<body>
<header>
<h1>Text Case Transformer</h1>
<p>Type on the left, click a button, copy from the right.</p>
</header>
<div class="converter-container">
<div class="text-column">
<div class="column-header">
<span>INPUT</span>
<button class="utility-btn" onclick="clearAll()">Clear</button>
</div>
<textarea id="inputText" placeholder="Type or paste your content here..."></textarea>
</div>
<div class="controls">
<button onclick="transform('upper')">UPPER CASE</button>
<button onclick="transform('lower')">lower case</button>
<button onclick="transform('capitalize')">Capitalize Words</button>
<button onclick="transform('sentence')">Sentence case</button>
<button onclick="transform('alternating')">aLtErNaTiNg</button>
<button onclick="transform('inverse')">InVeRsE cAsE</button>
<button onclick="transform('camel')">camelCase</button>
<button onclick="transform('kebab')">kebab-case</button>
</div>
<div class="text-column">
<div class="column-header">
<span>RESULT</span>
<button class="utility-btn" id="copyBtn" onclick="copyText()">Copy Result</button>
</div>
<textarea id="outputText" readonly placeholder="Result will appear here..."></textarea>
</div>
</div>
<script>
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
// Main Transformation Logic
function transform(type) {
const text = inputText.value;
let result = '';
switch(type) {
case 'upper':
result = text.toUpperCase();
break;
case 'lower':
result = text.toLowerCase();
break;
case 'capitalize': // Capitalize First Letter Of Every Word
result = text.replace(/\b\w/g, char => char.toUpperCase());
break;
case 'sentence': // Capitalize first letter of sentences
// Matches the start of the string OR a punctuation mark followed by whitespace
result = text.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, char => char.toUpperCase());
break;
case 'alternating':
result = text.split('').map((char, i) =>
i % 2 === 0 ? char.toLowerCase() : char.toUpperCase()
).join('');
break;
case 'inverse':
result = text.split('').map(char =>
char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase()
).join('');
break;
case 'camel':
// Removes special chars, capitalizes words, lowercases first word
result = text.toLowerCase()
.replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
break;
case 'kebab':
result = text.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
?.map(x => x.toLowerCase())
.join('-') || text;
break;
}
outputText.value = result;
}
// Live update (Optional: Updates as you type based on last button clicked)
// You can enable this if you want "live" conversion without clicking buttons repeatedly
// inputText.addEventListener('input', () => { /* Logic to re-run last transform */ });
// Utility Functions
function copyText() {
if (!outputText.value) return;
outputText.select();
document.execCommand('copy'); // Fallback for older browsers
// Modern API
if (navigator.clipboard) {
navigator.clipboard.writeText(outputText.value);
}
// Visual Feedback
const btn = document.getElementById('copyBtn');
const originalText = btn.innerText;
btn.innerText = 'Copied!';
setTimeout(() => btn.innerText = originalText, 1500);
}
function clearAll() {
inputText.value = '';
outputText.value = '';
inputText.focus();
}
</script>
</body>
</html>