<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0">
<
title
>Text Converter</
title
>
<
link
href
=
</
head
>
<
body
>
<
nav
class
=
"navbar navbar-dark bg-primary"
>
<
div
class
=
"container"
>
<
a
class
=
"navbar-brand"
href
=
"#"
>TextConverter</
a
>
</
div
>
</
nav
>
<
div
id
=
"alert"
class
=
"alert"
></
div
>
<
div
class
=
"container my-5"
>
<
div
class
=
"row"
>
<
div
class
=
"col-md-6"
>
<
div
class
=
"text-form"
>
<
h1
class
=
"mb-4"
>Enter the text to analyze below</
h1
>
<
textarea
id
=
"text"
class
=
"form-control"
rows
=
"8"
></
textarea
>
<
div
class
=
"btn-group mt-4 d-flex flex-wrap"
>
<
button
onclick
=
"toUppercase()"
class
=
"btn btn-danger mb-2 mr-2"
>
UPPER CASE</
button
>
<
button
onclick
=
"toLowercase()"
class
=
"btn btn-dark mb-2 mr-2"
>
lower case</
button
>
<
button
onclick
=
"clearAll()"
class
=
"btn btn-success mb-2 mr-2"
>
Clear All</
button
>
<
button
onclick
=
"copyToClipboard()"
class
=
"btn btn-primary mb-2 mr-2"
>
Copy to Clipboard</
button
>
<
button
onclick
=
"clearSpace()"
class
=
"btn btn-warning mb-2 mr-2"
>
Clear Space</
button
>
<
button
onclick
=
"reverseWord()"
class
=
"btn btn-info mb-2 mr-2"
>
Reverse Word</
button
>
<
button
onclick
=
"reverseSentence()"
class
=
"btn btn-primary mb-2"
>
Reverse Sentence</
button
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col-md-6"
>
<
div
class
=
"word-summary mt-5"
></
div
>
<
div
class
=
"preview mt-5"
></
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
<
script
>
function showAlert(message, type) {
const alertElement = document.getElementById('alert');
if (message === "Please enter text" && document
.getElementById('text').value.trim() === "") {
message = "Please enter text";
}
alertElement.innerHTML = message;
alertElement.style.display = 'block';
alertElement.className = `alert alert-${type}`;
setTimeout(() => {
alertElement.style.display = 'none';
}, 2000);
}
function toUppercase() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
const newText = text.toUpperCase();
document.getElementById('text').value = newText;
showAlert('Converted to Uppercase', 'success');
updateWordSummary();
updatePreview();
}
function toLowercase() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
const newText = text.toLowerCase();
document.getElementById('text').value = newText;
showAlert('Converted to Lowercase', 'success');
updateWordSummary();
updatePreview();
}
function clearAll() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
document.getElementById('text').value = '';
showAlert('Cleared All', 'success');
updateWordSummary();
updatePreview();
}
function copyToClipboard() {
const text = document.getElementById('text');
text.select();
document.execCommand('copy');
showAlert('Copied to Clipboard', 'success');
}
function clearSpace() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
const newText = text.split(/\s+/).join(' ');
document.getElementById('text').value = newText;
showAlert('Cleared Spaces', 'success');
updateWordSummary();
updatePreview();
}
function reverseWord() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
const reversedWords = text.split(' ')
.map(word => word.split('').reverse().join('')).join(' ');
document.getElementById('text').value = reversedWords;
showAlert('Reversed Word', 'success');
updateWordSummary();
updatePreview();
}
function reverseSentence() {
const text = document.getElementById('text').value;
if (text.trim() === "") {
showAlert("Please enter text", "danger");
return;
}
const reversedSentence = text.split(' ').reverse().join(' ');
document.getElementById('text').value = reversedSentence;
showAlert('Reversed Sentence', 'success');
updateWordSummary();
updatePreview();
}
function updateWordSummary() {
const text = document.getElementById('text').value;
const words = text.split(' ').filter(word => word.trim() !== '');
const characterCount = text.length;
const wordCount = words.length;
const minutesToRead = (0.008 * wordCount).toFixed(2);
const wordSummary = `
<
h2
>Word Summary</
h2
>
<
p
>${wordCount} words and ${characterCount} characters</
p
>
<
p
>${minutesToRead} minutes read</
p
>
`;
document.querySelector('.word-summary').innerHTML = wordSummary;
}
function updatePreview() {
const text = document.getElementById('text').value;
const preview = `
<
h2
>Preview</
h2
>
<
p
>${text || 'Enter the text to Preview'}</
p
>
`;
document.querySelector('.preview').innerHTML = preview;
}
document.getElementById('text').addEventListener('input',
function () {
updateWordSummary();
updatePreview();
});
updateWordSummary();
updatePreview();
</
script
>
</
body
>
</
html
>