Welcome to my blog where I elaborate on how my project works! I am excited to share that my project successfully merged into reactplay.io as part of the #2playsAMonth event by reactplay.io
Description
My project is built in react.js and it converts normal text into different types of text, such as uppercase, lowercase, and more. The project utilizes basic react.js and JavaScript concepts like useState, uppercase(), lowercase(), and more.
Please have a look at my project:- Smart Converter
Features
Input field for the user to enter the text that they want to convert.
Buttons or options for the user to choose the type of conversion they want to perform (e.g. uppercase, lowercase, remove extra spaces).
Functionality to convert the input text based on the user's selected option.
Real-time preview of the converted text as users make their selection
Button to copy the converted text to the user's clipboard.
Responsive design for mobile and desktop devices.
Alert or notification to let users know when the conversion is complete
Implementation
Main SmartConverter.js file
import React from 'react';
import './styles.css';
import PlayHeader from 'common/playlists/PlayHeader';
import TextForm from './components/TextForm';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// WARNING: Do not change the entry componenet name
function SmartConverter(props) {
const showAlert = (message) => {
toast.success(message, {
position: 'top-center',
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: 'light'
});
};
return (
<>
<div className="play-details">
<PlayHeader play={props} />
<ToastContainer
closeOnClick
draggable
pauseOnFocusLoss
pauseOnHover
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
position="top-center"
rtl={false}
theme="light"
/>
<div className="Smart-converter-Main-container">
<TextForm
heading="Try Smart Converter - word counter, character counter, remove extra spaces"
showAlert={showAlert}
/>
</div>
</div>
</>
);
}
export default SmartConverter;
Here showAlert Function uses to show alert messages when Every Text is converted.
For the alert, I used 'react-toastify' package; Which you can Download using below NPM command.
npm i react-toastify
The react-toastify package is a popular and widely-used library for displaying notifications or toasts in a React application. It provides a simple and customizable way to show success messages, errors, warnings, and other types of notifications to users.
TextForm.js File
import React, { useState } from 'react';
export default function TextForm(props) {
const [text, setText] = useState('');
const handleUpClick = () => {
let newText = text.toUpperCase();
setText(newText);
props.showAlert('Converted to uppercase!', 'success');
};
const handleLoClick = () => {
let newText = text.toLowerCase();
setText(newText);
props.showAlert('Converted to lowercase!', 'success');
};
const handleClearClick = () => {
let newText = '';
setText(newText);
props.showAlert('Text Cleared!', 'success');
};
const handleOnChange = (event) => {
setText(event.target.value);
};
const handleCopy = () => {
navigator.clipboard.writeText(text);
props.showAlert('Copied to Clipboard!', 'success');
};
const handleExtraSpaces = () => {
let newText = text.split(/[ ]+/);
setText(newText.join(' '));
props.showAlert('Extra spaces removed!', 'success');
};
return (
<>
<div className="Smart-converter-textformbox">
<h1 className="Smart-converter-Heading">{props.heading}</h1>
<div className="mb-3">
<textarea
className="Smart-converter-textarea"
id="myBox"
rows="8"
value={text}
onChange={handleOnChange}
/>
</div>
<button
className="Smart-converter-btn btn-primary mx-1 my-1"
disabled={text.length === 0}
onClick={handleUpClick}
>
Convert to Uppercase
</button>
<button
className="Smart-converter-btn btn-primary mx-1 my-1"
disabled={text.length === 0}
onClick={handleLoClick}
>
Convert to Lowercase
</button>
<button
className="Smart-converter-btn btn-primary mx-1 my-1"
disabled={text.length === 0}
onClick={handleClearClick}
>
Clear Text
</button>
<button
className="Smart-converter-btn btn-primary mx-1 my-1"
disabled={text.length === 0}
onClick={handleCopy}
>
Copy Text
</button>
<button
className="Smart-converter-btn btn-primary mx-1 my-1"
disabled={text.length === 0}
onClick={handleExtraSpaces}
>
Remove Extra Spaces
</button>
</div>
<div className="my-3">
<h2 className="Smart-converter-Header2">Your text summary</h2>
<p>
{
text.split(/\s+/).filter((element) => {
return element.length !== 0;
}).length
}{' '}
words and {text.length} characters
</p>
<p>
{0.008 * text.split(/\s+/).filter((element) => {
return element.length !== 0;
}).length}{' '}
Minutes read
</p>
<h2 className="Smart-converter-Header2">Preview</h2>
<p>{text.length > 0 ? text : 'Nothing to preview!'}</p>
</div>
</>
);
}
Here I'm using useState Hook to manage State variables.
To convert Text into uppercase I'm using toUpperCase() Javascript concept and to convert it into lowercase I'm using toLowerCase() function.
Copy text in the clipboard
const handleCopy = () => {
navigator.clipboard.writeText(text);
props.showAlert('Copied to Clipboard!', 'success');
};
The "navigator.clipboard.writeText(text)" method is used to write a text string to the user's clipboard. This method is part of the Clipboard API, which allows web developers to interact with the user's clipboard.
Here's how the method works:
The "navigator" object is a built-in JavaScript object that represents the web browser's window. It has various properties and methods that you can use to interact with the browser.
The "clipboard" property of the "navigator" object represents the user's clipboard. By accessing this property, you can read from and write to the clipboard.
The "writeText(text)" method of the "clipboard" property takes a string of text as its parameter. When called, it writes the text to the clipboard.
Count the words
{
text.split(/\s+/).filter((element) => {
return element.length !== 0;
}).length
}
Here's how it works:
The "text" variable contains the text string that you want to count the words in.
The "split(/\s+/)" method is called on the "text" variable. This method splits the string into an array of words, using whitespace characters (spaces, tabs, and line breaks) as delimiters.
The "filter()" method is called on the resulting array of words. This method creates a new array that contains only the elements that pass a test specified by a callback function.
The callback function is defined using an arrow function that takes a single argument ("element"). The function tests whether the length of the element is not equal to zero, which filters out any empty strings that may have been created by multiple consecutive whitespace characters.
The "length" property is called on the resulting array, which returns the number of elements in the array. This number represents the number of words in the original text string
Estimate the reading timing
{
0.008 * text.split(/\s+/).filter((element) => {
return element.length !== 0;
}).length
}
This code snippet calculates the estimated reading time for a given text string in minutes and adds the text "Minutes read" to the end of the calculated value.
The resulting word count is multiplied by 0.008, which is an approximation of the average reading time per word in minutes.
Resources
Here is my project code repo link which is merged in reactplay.io - Click here
My Project on reactplay.io - Click Here
Thank you for taking the time to read my blog! I hope you found it informative and enjoyable.