Build a Anagram Checker App Using ReactJS

Last Updated : 28 Apr, 2025

In this article, we will create an Anagram Checker App using React. Anagrams are words or phrases that can be formed by rearranging the letters of another word or phrase, using each letter exactly once. This app will enable users to enter two words or phrases and determine if they are anagrams of each other. Moreover, it provides the option for users to switch between checking anagram possibilities for words or numbers.

Preview Image:

Build-a-Anagram-Checker-App-Using-React

Approach:

In the Anagram Checker App, users have the option to input two words or numbers and switch between word and number-checking modes using a toggle checkbox. The "Check" button remains inactive until both input fields are filled. Once the user clicks on the "Check" button, the app examines whether the inputs form anagrams. In case they do, a success message with a green background is displayed. However, if the inputs are not anagrams or if the input fields are empty, an message with a red background appears. 

Steps to Create a React Application:

Create a react application by using this command

npx create-react-app anagramApp

After creating your project folder, i.e. anagramApp, use the following command to navigate to it:

cd anagramApp

Project Structure:

The package.json file will look like:

{
  "name": "anagram-checker-app",
  "version": "0.0.0",
  "description": "Anagram Checker App using React",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test", 
    "eject": "react-scripts eject" 
  },
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Example : Write the below code in App.js file and style.css in the src directory

JavaScript

import React, { useState } from 'react'; import './style.css'; // Import the external CSS file  function App() {     const [word1, setWord1] = useState('');     const [word2, setWord2] = useState('');     const [result, setResult] = useState('');     const [isAnagram, setIsAnagram] = useState(false);     const [checkNumbers, setCheckNumbers] = useState(false);      const handleWord1Change = (e) => {         setWord1(e.target.value.toLowerCase());     };      const handleWord2Change = (e) => {         setWord2(e.target.value.toLowerCase());     };      const handleToggleChange = () => {         setCheckNumbers(!checkNumbers);     };      const checkAnagram = () => {              // Remove spaces and punctuation from both words         const cleanedWord1 = checkNumbers             ? word1.replace(/[^0-9]/g, '')             : word1.replace(/[^\w]/g, '');          const cleanedWord2 = checkNumbers             ? word2.replace(/[^0-9]/g, '')             : word2.replace(/[^\w]/g, '');          // Check if the lengths are the same         if (cleanedWord1.length !== cleanedWord2.length) {             setResult('Not an anagram');             setIsAnagram(false);             return;         }          // Count character occurrences in the first word         const charCount1 = {};         for (const char of cleanedWord1) {             charCount1[char] = (charCount1[char] || 0) + 1;         }          // Count character occurrences in the second word         const charCount2 = {};         for (const char of cleanedWord2) {             charCount2[char] = (charCount2[char] || 0) + 1;         }          // Compare character counts         for (const char in charCount1) {             if (charCount1[char] !== charCount2[char]) {                 setResult('Not an anagram');                 setIsAnagram(false);                 return;             }         }          // If all character counts are the same, it's an anagram         setResult("It's an anagram!");         setIsAnagram(true);     };      return (         <div className="container">             <h1 className="heading">Anagram Checker</h1>             <p className="desc">                 Enter two                  {checkNumbers ? 'numbers' : 'words'}                  to check if they are                 anagrams:             </p>             <div className="inputs">                 <input                     type="text"                     placeholder=                         {`Enter ${checkNumbers ? 'number' : 'word'} 1`}                     value={word1}                     onChange={handleWord1Change}                     className="input"                 />                 <input                     type="text"                     placeholder=                         {`Enter ${checkNumbers ? 'number' : 'word'} 2`}                     value={word2}                     onChange={handleWord2Change}                     className="input"                 />             </div>             <label className="toggleLabel">                 Check for numbers:                 <input                     type="checkbox"                     checked={checkNumbers}                     onChange={handleToggleChange}                     className="toggleCheckbox"                 />             </label>             <button id="btn" onClick={checkAnagram}                      className="button">                 Check             </button>             <p id="result"                 className={isAnagram ? 'result success' : 'result error'}>                 {result}             </p>         </div>     ); } export default App;

CSS

/* style.css */ .container {     width: 90%;     max-width: 31.25em;     background-color: #ffffff;     padding: 2em;     position: absolute;     transform: translate(-50%, -50%);     left: 50%;     top: 50%;     border-radius: 1em;     font-family: 'Poppins', sans-serif;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }  .heading {     font-size: 1.5em;     margin-bottom: 1em;     color: #0083e8;     text-align: center; }  .desc {     font-size: 1.2em;     margin: 1em 0 2em 0;     color: #333; }  .inputs {     display: grid;     grid-template-columns: 1fr 1fr;     gap: 2em; }  .input {     width: 100%;     border: 1px solid #ccc;     padding: 0.5em;     outline: none;     border-radius: 0.3em;     font-size: 1em; }  .button {     display: block;     margin: 0 auto;     background-color: #0083e8;     color: #ffffff;     border: none;     outline: none;     padding: 0.7em 2em;     border-radius: 0.5em;     font-size: 1em;     cursor: pointer; }  .toggleLabel {     display: flex;     align-items: center;     margin-bottom: 1em;     font-size: 1.2em;     color: #333; }  .toggleCheckbox {     margin: 10px; }  .result {     text-align: center;     margin-top: 1em;     font-size: 1.2em;     font-weight: bold; }  .success {     color: #078307;     background-color: #d0ffd0; }  .error {     color: #a00606;     background-color: #ffc4b0; }

Steps to run the Application:

Type the following command in the terminal:

npm start

Type the following URL in the browser:

 http://localhost:3000/

Output: Build-a-Anagram-Checker-App-Using-React

Build a Anagram Checker App Using ReactJS

saurabhkumarsharma05

Improve

Article Tags :

Build a Anagram Checker App Using ReactJS

Preview Image:

Approach:

Steps to Create a React Application:

Similar Reads