anagram.html

<!DOCTYPE html>
<html>
  <head>
    <title>Anagram Generator</title>
    <style>
      /* Center the page content */
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #87CEEB;
      }
      
      /* Style the container */
      #anagram-container {
        width: 400px;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #ccc;
      }
      
      /* Style the title */
      h1 {
        text-align: center;
        margin-bottom: 20px;
      }
      
      /* Style the input field and button */
      input[type="text"], button {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 5px;
        margin-bottom: 10px;
        box-sizing: border-box;
        font-size: 16px;
      }
      
      /* Style the "Generate" button */
      button {
        background-color: #000080;
        color: white;
        cursor: pointer;
      }
      
      /* Style the result text */
      #result {
        text-align: center;
        margin-top: 20px;
        font-size: 18px;
        color: #000080;
      }
    </style>
  </head>
  <body>
    <div id="anagram-container">
      <h1>Anagram Generator</h1>
      <input type="text" id="input-word" placeholder="Enter a word">
        <br>
        <button onclick="generateAnagram()">Generate</button>
        <br>
        <p id="result"></p>
    </div>
    <script>
      // Generate all unique anagrams of a word
      function generateAllAnagrams(word) {
        const results = new Set();

        function permute(prefix, remaining) {
          if (remaining.length === 0) {
            results.add(prefix);
            return;
          }

          for (let i = 0; i < remaining.length; i++) {
            permute(prefix + remaining[i], remaining.slice(0, i) + remaining.slice(i + 1));
          }
        }

        permute('', word);
        return Array.from(results);
      }

      // Function called when clicking "Generate"
      function generateAnagram() {
        var inputWord = document.getElementById("input-word").value;
        var result = document.getElementById("result");

        if (inputWord === "") {
          result.textContent = "Please enter a word";
          return;
        }

        var anagrams = generateAllAnagrams(inputWord);
        result.innerHTML = "Anagrams:<br>" + anagrams.join(', ');
      }
    </script>
  </body>
</html>