Text Converter App Using Bootstrap

Last Updated : 29 Feb, 2024

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.

Screenshot-2024-02-28-073738

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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <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>