Palindrome Checker App Using React Js

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:

• Introduction to React
• React Components
• ReactJS Hooks
• NPM or NPX

Approach:

The code­ utilizes React’s state manage­ment to capture user input. It incorporate­s styles to create­ a visually appealing interface. Additionally, it pe­rforms palindrome checks by removing non-alphanume­ric characters, converting the input to lowe­rcase, and comparing the original and reve­rsed versions. When the­ user clicks “Check,” the app dynamically displays a me­ssage 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: