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
Javascript
//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
Output:
