This tool will help you to convert your text with upper case, lower case, title case and copy the converted text facility.
this is complete working code you just need to copy and paste and use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case Converter Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(120deg, #6a11cb, #2575fc);
color: #fff;
}
.container {
background-color: #ffffff20;
padding: 20px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
max-width: 90%;
width: 500px;
text-align: center;
}
.container h1 {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
border: 2px solid #fff;
border-radius: 8px;
padding: 10px;
font-size: 16px;
color: #333;
outline: none;
resize: none;
}
textarea::placeholder {
color: #aaa;
}
.buttons {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
button {
background: #ffffff;
color: #2575fc;
border: none;
border-radius: 8px;
padding: 10px 15px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
button:hover {
background: #2575fc;
color: #ffffff;
}
@media (max-width: 600px) {
textarea {
height: 120px;
}
}
</style>
</head>
<body>
<div class="container1">
<h1>Case Converter Tool</h1>
<textarea id="text" placeholder="Enter your text here..."></textarea>
<div class="buttons">
<button onclick="toUpperCase()">UPPER CASE</button>
<button onclick="toLowerCase()">lower case</button>
<button onclick="toTitleCase()">Title Case</button>
<button onclick="clearText()">Clear</button>
<button onclick="copyToClipboard()">Copy</button>
</div>
</div>
<script>
function toUpperCase() {
const textArea = document.getElementById('text');
textArea.value = textArea.value.toUpperCase();
}
function toLowerCase() {
const textArea = document.getElementById('text');
textArea.value = textArea.value.toLowerCase();
}
function toTitleCase() {
const textArea = document.getElementById('text');
textArea.value = textArea.value
.toLowerCase()
.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
}
function clearText() {
const textArea = document.getElementById('text');
textArea.value = '';
}
function copyToClipboard() {
const textArea = document.getElementById('text');
textArea.select();
textArea.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(textArea.value)
.then(() => alert('Text copied to clipboard!'))
.catch(err => alert('Failed to copy text.'));
}
</script>
</body>
</html>