In this article, we will walk you through the process of creating a Palindrome Checker App using React.js. A palindrome refers to a word, phrase, or sequence of characters that reads the same both forwards and backward, disregarding spaces, punctuation, and capitalization.
Preview Image:
Prerequisites:
Approach:
The code utilizes React’s state management to capture user input. It incorporates styles to create a visually appealing interface. Additionally, it performs palindrome checks by removing non-alphanumeric characters, converting the input to lowercase, and comparing the original and reversed versions. When the user clicks “Check,” the app dynamically displays a message with colored backgrounds to indicate green or red.
Steps to Create a React Application:
Step 1: Create a react application by using this command
npx create-react-app palindrome-app
Step 2: After creating your project folder, i.e. PalindromeApp, use the following command to navigate to it:
cd palindrome-app
Project Structure:
Example: In this example, we’ll use above explained approach
//App.js import React, { useState } from 'react' ;
function PalindromeChecker() {
const [inputText, setInputText] = useState( '' );
const [result, setResult] = useState( '' );
const [isPalindrome, setIsPalindrome] =
useState( false );
const containerStyle = {
width: '90%' ,
maxWidth: '31.25em' ,
backgroundColor: '#ffffff' ,
padding: '4em 3em' ,
borderRadius: '0.5em' ,
boxShadow: '0 2em 3.5em rgba(0, 9, 50, 0.3)' ,
position: 'absolute' ,
transform: 'translate(-50%, -50%)' ,
left: '50%' ,
top: '50%' ,
};
const appTitleStyle = {
color: '#172039' ,
fontSize: '1.6em' ,
};
const inputWrapperStyle = {
display: 'grid' ,
gridTemplateColumns: '9fr 3fr' ,
gap: '1em' ,
margin: '2em 0 1em 0' ,
};
const inputStyle = {
border: 'none' ,
borderBottom: '2px solid #e2e4ef' ,
color: '#172039' ,
padding: '1em 0' ,
fontWeight: 400,
fontSize: '1em' ,
};
const inputFocusStyle = {
borderBottom: '2px solid #4571f5' ,
};
const buttonStyle = {
fontSize: '1em' ,
padding: '1em 0.5em' ,
backgroundColor: '#4571f5' ,
border: 'none' ,
color: '#ffffff' ,
borderRadius: '0.5em' ,
cursor: 'pointer' ,
};
const resultStyle = {
textAlign: 'center' ,
color: '#ffffff' ,
fontWeight: 400,
padding: '1em 0' ,
borderRadius: '0.5em' ,
transition: '0.5s' ,
};
const successStyle = {
backgroundColor: '#01bd5f' ,
animation: 'pop 0.4s' ,
};
const errorStyle = {
backgroundColor: '#f52a3b' ,
animation: 'pop 0.4s' ,
};
const handleButtonClick = () => {
const text = inputText
.trim()
.toLowerCase()
.replace(/[^a-zA-Z0-9]/g, '' );
if (text.length === 0) {
alert( 'Input cannot be empty' );
return ;
}
const cleanedText = text.split( '' )
.reverse().join( '' );
const palindrome = text === cleanedText;
setResult(
palindrome ? "Yes. It's a palindrome!" :
'Nope. Not a palindrome! '
);
setIsPalindrome(palindrome);
};
return (
<div className="container" style=
{containerStyle}>
<h2 className="app-title" style=
{appTitleStyle}>
Is It A Palindrome?
</h2>
<div className="input-wrapper"
style={inputWrapperStyle}>
<input
type="text"
placeholder="Enter a word"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
style={
isPalindrome ? { ...inputStyle, ...inputFocusStyle } :
inputStyle
} />
<button id="btn" onClick={handleButtonClick}
style={buttonStyle}>
Check
</button>
</div>
<p
className={isPalindrome ? ' success ' : ' error'}
style={{
...resultStyle,
...(isPalindrome ? successStyle : errorStyle),
}}>
{result}
</p>
</div>
);
} export default PalindromeChecker;
|
Steps to run: To open the application, use the Terminal and enter the command listed below.
npm start