Design a Text Converter in Tailwind CSS

Last Updated : 08 Mar, 2024

In this project, we’ll create a simple Text Converter application using Tailwind CSS and JavaScript. The application allows users to input any text as input. After that, the user can choose either to upper case, lower case or capitalize the string. We’ll utilize Tailwind CSS for styling, to create an attractive user interface and JavaScript for the logic.

aff1

Prerequisites

Approach

Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.
Design the input area where user will input the text.
Create a file named script.js, and write JavaScript code inside it to handle form submission.
Implementing functionality for uppercase(), lowercase(), titlecase().

Example: This example describes the implementation of a basic Text Converter using Tailwind CSS, and Javascript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Text Converter</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
   
<body class="bg-gray-100 h-screen flex flex-col 
             items-center justify-center">
    <!-- Container -->
    <div class="max-w-md w-full bg-white p-8 
                rounded-md shadow-md border 
                border-green-500">
 
        <!-- Heading -->
        <h1 class="text-2xl font-bold text-center 
                   text-gray-800 mb-4">
            Text Converter
        </h1>
 
        <!-- Input Section -->
        <textarea id="textInput"
                  class="w-full h-40 p-4 
                         border border-gray-300 
                            rounded-md resize-none 
                             focus:outline-none focus:ring 
                             focus:ring-blue-400 mb-4">
          </textarea>
 
        <!-- Buttons -->
        <div class="flex justify-center space-x-4">
            <button onclick="convertToUpperCase()"
                    class="px-6 py-3 bg-blue-500 text-white 
                           rounded-md hover:bg-blue-600 
                           focus:outline-none focus:ring 
                           focus:ring-blue-400">
                Upper Case
            </button>
 
            <button onclick="convertToLowerCase()"
                    class="px-6 py-3 bg-blue-500 
                           text-white rounded-md 
                           hover:bg-blue-600 focus:outline-none 
                           focus:ring focus:ring-blue-400">
                Lower Case
            </button>
 
            <button onclick="convertToTitleCase()"
                class="px-6 py-3 bg-blue-500 text-white 
                       rounded-md hover:bg-blue-600 
                       focus:outline-none focus:ring 
                       focus:ring-blue-400">
                Title Case
            </button>
 
            <button onclick="clearText()"
                    class="px-6 py-3 bg-red-500 text-white 
                           rounded-md hover:bg-red-600 
                           focus:outline-none focus:ring 
                           focus:ring-red-400">
                  Clear
              </button>
        </div>
 
        <!-- Output section -->
        <div id="output" class="mt-4 p-4 border 
                                border-gray-300 rounded-md">
          </div>
    </div>
 
    <script src="script.js"></script>
</body>
   
</html>

Javascript

// file - script.js
 
function convertToUpperCase() {
    const inputText = document.getElementById('textInput').value;
    if (inputText.trim() === '') {
        alert('Please enter some text.');
    } else {
        document.getElementById('output').innerText = 
            inputText.toUpperCase();
    }
}
 
function convertToLowerCase() {
    const inputText = 
        document.getElementById('textInput').value;
    if (inputText.trim() === '') {
        alert('Please enter some text.');
    } else {
        document.getElementById('output').innerText = 
            inputText.toLowerCase();
    }
}
 
function convertToTitleCase() {
    const inputText = 
        document.getElementById('textInput').value;
    if (inputText.trim() === '') {
        alert('Please enter some text.');
    } else {
        const words = inputText.split(' ');
        const titleCaseWords = words.map(word => 
            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
        document.getElementById('output').innerText = 
            titleCaseWords.join(' ');
    }
}
 
function clearText() {
    document.getElementById('textInput').value = '';
    document.getElementById('output').innerText = '';
}

Output:

aff1

Suggest improvement

Design a Number Converter in Tailwind CSS & JavaScript

Share your thoughts in the comments

Design a Text Converter in Tailwind CSS

Prerequisites

Approach

HTML

Javascript

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?