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.
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 =
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:
Recommended Articles