An anagram of a string is another string that contains the same characters, only the order of characters can be different. For example, “abcd” and “dabc” are an anagram of each other.

import { useEffect, useState } from "react";
import "./styles.css";
import noPic from "./img/no.gif";
import yesPic from "./img/yes-sir-yup.gif";
import thinkingPic from "./img/thinking.gif";

export default function App() {
  const [string1, setString1] = useState("");
  const [string2, setString2] = useState("");
  const [currPic, setCurrpic] = useState(thinkingPic);
  function checkAnagram() {
    if (string1.length !== string2.length) {
      return false;
    }
    //Sorting the string
    let str1 = string1.split("").sort().join("");
    let str2 = string2.split("").sort().join("");
    return str1 === str2;
  }
  useEffect(() => {
    checkAnagram() ? setCurrpic(yesPic) : setCurrpic(noPic);
  }, [string1, string2]);

  return (
    <div className="App">
      <h1>Anagram String</h1>
      <input
        placeholder="String 1"
        onChange={(e) => setString1(e.target.value)}
      />
      <input
        placeholder="String 2"
        onChange={(e) => setString2(e.target.value)}
      />
      <p className="result">Result</p>
      <img
        src={string1 === "" || string2 === "" ? thinkingPic : currPic}
        alt=""
      />
    </div>
  );
}