Text Converter application using bootstrap and Javascript create the application and Our focus will extend beyond mere functionality, as we’ll enhance the user interface using a combination of custom and bootstrap styling. In this application user types the text in the block and converts the text according to the user’s need.
Prerequisites
Approach
- The HTML markup defines a navbar, text area, buttons for various text operations, and placeholders for word summary and preview.
- Bootstrap classes are utilized for styling the navbar, buttons, and layout to ensure responsiveness and a clean UI.
- JavaScript functions manage alert messages for user feedback after text operations. Alerts are displayed using Bootstrap alert classes and automatically disappear after 2 seconds.
- Functions are defined to handle text manipulation operations such as converting case, clearing, copying, and reversing words or sentences.
- Additional functions calculate word summary statistics and update the text preview in real-time based on user input. Word count, character count, and estimated reading time are displayed dynamically.
Example: This example shows the implementation of the above-explained approach.
HTML
<!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>
<!-- Bootstrap CSS -->
<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>
<!-- Bootstrap JS -->
<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>
|
Output: