Text Analyzer

Petro Lesapiti Loltolo
3 min readAug 14, 2023

--

https://fabulous-swan-4c3467.netlify.app

The Text Analyzer is a versatile application designed to streamline the process of analyzing and manipulating text. Developed with React and powered by the flexibility of Tailwind CSS, this app caters to both beginners looking to grasp React fundamentals and seasoned developers seeking an efficient way to prepare for coding challenges.

Functionalities

The heart of the Text Analyzer lies in its ability to provide comprehensive insights into the entered text. Here’s how the app breaks it down:

Character Count : The app accurately tallies the number of characters in the entered text, including spaces and special characters. This functionality is particularly handy when working with character-limited platforms or assessing the length of a piece of content.

Code sample

const Textarea = () => {
let [input, setInput]=useState('');
const characters= input.length;
....
  • Word Count: The app intelligently counts the total words in the text, identifying words based on spaces. This feature proves invaluable for authors, editors, and anyone who needs to gauge the wordiness of their content.

Code sample

const Textarea = () => {
let [input, setInput]=useState('');
const words= input.split(/\s+/).filter((word)=>word!=='').length;
...
  • Sentence Count: By detecting periods, question marks, and exclamation marks, the app accurately computes the number of sentences in the text. This feature can assist language processors and anyone interested in the textual flow.

code sample

const Textarea = () => {
let [input, setInput]=useState('');
const sentenceCount= input.split(/[?!.]/).filter(sentence=>sentence.trim()!=='').length;
...
  • Paragraph Count: · Through the identification of double line breaks, the app efficiently calculates the number of paragraphs within the text. This can be particularly useful for bloggers and content creators managing layout and readability.

Code sample

const Textarea = () => {
let [input, setInput]=useState('');
const paragraphCount= input.split('/n/n').filter(paragraph=>paragraph.trim()!=='').length;
...

Text Conversion

In addition to analysis, the Text Analyzer empowers users to transform their text in various ways:

  • Convert to Upper Case: This feature easily converts the entire text to uppercase, which is especially beneficial when you’re looking to standardize the case of your content.

Code sample

  const handleUpperCase = () => {
setInput(input.toUpperCase());
};
  • Convert to Lower Case: Conversely, the app lets you convert the text to lowercase, useful for maintaining uniformity in case style.

Code sample

 const handleLowerCase = () => {
setInput(input.toLowerCase());
};
  • Clear Text: If you want to start anew, the app offers a straightforward option to clear the text area.

Code sample

  const clear=()=>{
setInput('')
}
  • Copy Text: With a simple button click, you can copy the text to your clipboard, simplifying sharing and pasting.

Code sample

  const copyText=()=>{
if(input){
navigator.clipboard.writeText(input)
}
}

Conclusion

Whether you’re a coding novice diving into React or an experienced developer seeking a versatile text manipulation tool, the Text Analyzer caters to your needs. Play around with the app, add your own unique requirements, and get hands-on experience in manipulating text data. Feel free to style it to your taste, expand its functionalities, and remember to follow me for more exciting coding adventures.

Find the Source Code on GitHub: https://github.com/Loltolo-Lesapiti

--

--