update generatePermutaion function

Bridgetamana · Sep 30, 2024 · 3ac0a79 · 3ac0a79
1 parent c994b98
commit 3ac0a79
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -3,14 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Word Descrambler</title>
+    <title>Word Unscrambler</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <input type="text" id="scrambledInput" placeholder="Enter a word" />
-    <button id="unscrambleButton">Unscramble</button>
+    <div class="container">
+      <input type="text" id="scrambledInput" placeholder="Enter a word" />
+      <button id="unscrambleButton">Unscramble</button>
 
-    <div id="resultsContainer"></div>
+      <div id="resultsContainer"></div>
+    </div>
 
     <script src="script.js"></script>
   </body>

diff --git a/script.js b/script.js
@@ -1,40 +1,66 @@
 function generatePermutations(inputString) {
     const uniquePermutations = [];
 
-    function generateUniquePermutations(arr, currentIndex) {
+    function generateUniquePermutations(arr, currentIndex, length) {
         if (currentIndex === arr.length - 1) {
-            uniquePermutations.push(arr.join(""));
+            const newPermutation = arr.slice(0, length).join("");
+            if (!uniquePermutations.includes(newPermutation)) {
+                uniquePermutations.push(newPermutation);
+            }
         } else {
             for (let i = currentIndex; i < arr.length; i++) {
                 [arr[currentIndex], arr[i]] = [arr[i], arr[currentIndex]];
-                generateUniquePermutations([...arr], currentIndex + 1);
+                generateUniquePermutations([...arr], currentIndex + 1, length);
             }
         }
     }
+    for (let length = 2; length <= inputString.length; length++) {
+        generateUniquePermutations(inputString.split(""), 0, length);
+    }
 
-    generateUniquePermutations(inputString.split(""), 0);
     return uniquePermutations;
 }
 
-
-
 function descrambleWords() {
     const input = document.getElementById('scrambledInput').value;
     const combinations = generatePermutations(input);
-    displayResults(combinations);
+    const categorizedWords = categorizeByLength(combinations);
+    displayResults(categorizedWords);
+}
+
+function categorizeByLength(combinations) {
+    const categorized = {};
+    combinations.forEach(word => {
+        const length = word.length;
+        if (!categorized[length]) {
+            categorized[length] = [];
+        }
+        categorized[length].push(word);
+    });
+    return categorized;
 }
 
-function displayResults(combinations) {
+function displayResults(categorizedWords) {
     const resultsContainer = document.getElementById('resultsContainer');
     resultsContainer.innerHTML = '';
 
-    const wordList = document.createElement('ul');
-    combinations.forEach(word => {
-        const listItem = document.createElement('li');
-        listItem.textContent = word;
-        wordList.appendChild(listItem);
-    });
-    resultsContainer.appendChild(wordList);
+    for (const [length, words] of Object.entries(categorizedWords)) {
+        const section = document.createElement('div');
+        section.className = 'result-section';
+
+        const header = document.createElement('h2');
+        header.textContent = `${length}-Letter Words`; 
+        section.appendChild(header);
+
+        const wordList = document.createElement('ul');
+        words.forEach(word => {
+            const listItem = document.createElement('li');
+            listItem.textContent = word;
+            wordList.appendChild(listItem);
+        });
+        section.appendChild(wordList);
+        resultsContainer.appendChild(section);
+    }
 }
 
 document.getElementById('unscrambleButton').addEventListener('click', descrambleWords);
diff --git a/styles.css b/styles.css
@@ -1,3 +1,16 @@
+body {
+    width: 80%;
+    max-width: 40rem;
+    margin: 0 auto;
+}
+
+.container {
+    margin-top: 4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 #scrambledInput, #unscrambleButton {
     margin: 10px;
     padding: 10px;
@@ -8,6 +21,8 @@
     border: 0;
     color: white;
     background-color: blueviolet;
+    cursor: pointer;
+    width: 200px;
 }
 
 #resultsContainer {