word-games-theme 2.3.9 → 2.4.0

data/assets/js/wordfinder.js

@@ -0,0 +1,952 @@
+/***************
+ SCRABBLER_JS
+***************/
+console.log(true);
+const getScript = document.currentScript;
+let form = document.querySelector("#form");
+let wordCount = document.querySelector(".wordCount");
+let main = document.querySelector(".main");
+// let loader = document.querySelector(".main-loader")
+let errorMsg = document.querySelector(".errorMsg");
+let script = document.currentScript;
+
+// getqueryUrl from form
+const params = new URLSearchParams(window.location.search);
+let serachValue = params.get("search").toLowerCase();
+let prefixValue = params.get("prefix");
+let containsValue = params.get("contains");
+let suffixValue = params.get("suffix");
+let exculdeValue = params.get("exclude");
+let includeValue = params.get("include");
+let lengthValue = params.get("length");
+let dictonary = params.get("dictionary");
+
+// advanced filter element grabs
+let tick;
+// let startsWith = document.getElementById("startsWith");
+// let mustInclude = document.getElementById("mustInclude");
+// let endsWith = document.getElementById("endsWith");
+// let exculdeWith = document.getElementById("exculdeWith");
+// let inculdeWith = document.getElementById("inculdeWith");
+// let wordLength = document.getElementById("wordLength");
+
+
+let ok = true;
+
+let tab_container = document.querySelector(".tab_container");
+let lengthSelect = document.querySelector(".length-select");
+const siteUrl = getScript.dataset.url;
+var sortValue;
+var sortBool = false;
+
+// let letterCloseButton = document.querySelector(
+//     ".letter-close-button-commonPage"
+// );
+// if (serachValue) {
+//     letterCloseButton.classList.add("ltr-cls-btn-commonPage");
+// }
+// letterCloseButton.addEventListener("click", () => {
+//     txtBox.value = "";
+//     letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
+// });
+
+// let txtBox = document.querySelector(".txtBox");
+// txtBox.focus();
+txtBox.value = serachValue;
+
+// txtBox.addEventListener("input", (e) => {
+//     if (e.target.value === "") {
+//         letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
+//     } else {
+//         letterCloseButton.classList.add("ltr-cls-btn-commonPage");
+//     }
+//     let rangeOfBlankTile = script.dataset.range;
+//     e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "");
+//     if (rangeOfBlankTile === "") {
+//         rangeOfBlankTile = 3;
+//     }
+//     e.target.value = e.target.value.replace(/ /g, "?");
+//     let data = [];
+//     data = e.target.value.split("").filter((i) => i === "?");
+//     if (data.length > rangeOfBlankTile) {
+//         e.target.value = e.target.value.replace(/\?$/, "");
+//     }
+// });
+
+// function mobileScrollTop(x) {
+//     if (x.matches) {
+//         console.log(x.matches);
+//         txtBox.addEventListener("click", () => {
+//             document.documentElement.scrollTop = 350;
+//             setTimeout(() => {
+//                 document.documentElement.scrollTop = 350;
+//             }, 300);
+//         });
+//     } else {
+//         console.log("false");
+//     }
+// }
+// var x = window.matchMedia("(max-width: 768px)");
+// mobileScrollTop(x);
+// x.addListener(mobileScrollTop);
+
+// let rangeOfBlankTile = script.dataset.range;
+// let quesMark = "?";
+
+// if (rangeOfBlankTile) {
+//     if (!serachValue.includes("?")) {
+//         serachValue = serachValue + quesMark.repeat(rangeOfBlankTile); //
+//         txtBox.value = serachValue;
+//     }
+// }
+
+// const filterInputs = document.querySelectorAll('.filter_val');
+// Array.from(filterInputs).forEach((item) => {
+//     item.addEventListener("input", (e) => {
+//         const inputValue = e.target.value;
+//         const parentElement = e.target.parentElement;
+//         const imgElement = parentElement.querySelector('img');
+//         const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+//         if (inputValue == "") {
+//             imgElement.src = "/assets/images/questionmark.svg"
+//             item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+//             tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+//             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+
+//         } else {
+//             item.nextElementSibling.removeAttribute("data-tip")
+//             imgElement.src = "/assets/images/close-btn.svg"
+//             tooltipElement.style.setProperty('--tooltip-padding', '0');
+//             tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+//         }
+//         item.nextElementSibling.addEventListener("click", () => {
+//             e.target.value = ""
+//             imgElement.src = "/assets/images/questionmark.svg"
+//             item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+//             tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+//             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+//         })
+//     })
+// })
+
+
+// function handleFilterInput(e) {
+//     const inputValue = e.target.value;
+//     const parentElement = e.target.parentElement;
+//     const imgElement = parentElement.querySelector('img');
+//     const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+//     if (inputValue == "") {
+//         imgElement.src = "/assets/images/questionmark.svg"
+//         e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+//         tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+//         tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+//     } else {
+//         e.target.nextElementSibling.removeAttribute("data-tip")
+//         imgElement.src = "/assets/images/close-btn.svg"
+//         tooltipElement.style.setProperty('--tooltip-padding', '0');
+//         tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+//     }
+
+//     e.target.nextElementSibling.addEventListener("click", () => {
+//         e.target.value = ""
+//         imgElement.src = "/assets/images/questionmark.svg"
+//         e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+//         tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+//         tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+//     });
+// }
+
+// document.addEventListener("DOMContentLoaded", () => {
+//   const filterInputs = document.querySelectorAll('.filter_val');
+//     Array.from(filterInputs).forEach((item) => {
+//         // Call the function on load
+//         handleFilterInput({ target: item });
+//         item.addEventListener("input", handleFilterInput);
+//     });
+// });
+
+
+
+
+let theSelect = document.getElementById("select_dropDown");
+
+const sortup = document.querySelector(".sortup-icon");
+let bool = false;
+sortup.addEventListener("click", () => {
+    if (bool) {
+        theSelect.size = 0;
+        bool = false;
+        theSelect.style.display = "none";
+    } else {
+        bool = true;
+        theSelect.size = 3;
+        theSelect.style.display = "block";
+    }
+});
+document.querySelector(".select_dropDown2").value = dictonary;
+const getDiff = (text1, text2) => {
+    var diffRange = [];
+    var currentRange = undefined;
+    for (var i = 0; i < text1.length; i++) {
+        if (text1[i] != text2[i]) {
+            if (currentRange == undefined) {
+                currentRange = [i];
+            }
+        }
+        if (currentRange != undefined && text1[i] == text2[i]) {
+            currentRange.push(i);
+            diffRange.push(currentRange);
+            currentRange = undefined;
+        }
+    }
+    if (currentRange != undefined) {
+        currentRange.push(i);
+        diffRange.push(currentRange);
+    }
+    return diffRange;
+};
+
+// getWords define...
+const getData = async (serachValue) => {
+    try {
+        errorMsg.innerHTML = "";
+        wordCount.innerHTML = "";
+        let selectedDictionary = document.querySelector(".select_dropDown2").value;
+        main.innerHTML = `<main class="placeholder-loader">
+        <ul class="o-vertical-spacing o-vertical-spacing--l">
+          <li class="blog-post o-media">
+            <div class="o-media__body">
+              <div class="o-vertical-spacing">
+                <p class="m-0">
+                  <span class="skeleton-box" style="width:40%;"></span>
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+            <div class="o-media__figure">
+              <span class="skeleton-box" style="width:800px;height:140px;"></span>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+            <div class="o-media__figure">
+              <span class="skeleton-box" style="width:800px;height:140px;"></span>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+          <div class="o-media__figure">
+            <span class="skeleton-box" style="width:800px;height:140px;"></span>
+          </div>
+        </li>
+        </ul>
+      </main>`;
+        /// loader
+        const response = await fetch(
+            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
+        );
+        const data = await response.json();
+        main.innerHTML = "";
+        getWords(data);
+        //getWords calling...
+    } catch (error) {
+        console.log(error);
+    }
+};
+//getData calling...
+if (lengthValue === "1") {
+    errorMsg.innerHTML = "words length should be more than 1";
+} else {
+    getData(serachValue.toLowerCase());
+    function logSubmit(event) {
+        document.querySelector(".fillterWrapper").classList.add("hide")
+
+
+        const scrollingElement = document.scrollingElement || document.body;
+        scrollingElement.scroll({ top: 0, behavior: "smooth" });
+        // if (rangeOfBlankTile) {
+        //     if (!txtBox.value.includes("?")) {
+        //         txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
+        //     }
+        // }
+
+        let selectedDictionary = document.querySelector(".select_dropDown2").value;
+        event.preventDefault();
+        if (history.pushState) {
+            var newurl =
+                window.location.protocol +
+                "//" +
+                window.location.host +
+                window.location.pathname +
+                "?" +
+                "search" +
+                "=" +
+                txtBox.value.toLowerCase() +
+                "&" +
+                "dictionary" +
+                "=" +
+                selectedDictionary +
+                "&" +
+                "prefix" +
+                "=" +
+                startsWith.value +
+                "&" +
+                "contains" +
+                "=" +
+                mustInclude.value +
+                "&" +
+                "suffix" +
+                "=" +
+                endsWith.value +
+                "&" +
+                "exclude" +
+                "=" +
+                exculdeWith.value +
+                "&" +
+                "include" +
+                "=" +
+                inculdeWith.value +
+                "&" +
+                "length" +
+                "=" +
+                wordLength.value;
+            window.history.pushState({ path: newurl }, "", newurl);
+
+            const params = new URLSearchParams(window.location.search);
+            serachValue = params.get("search");
+            prefixValue = params.get("prefix");
+            containsValue = params.get("contains");
+            suffixValue = params.get("suffix");
+            exculdeValue = params.get("exclude");
+            includeValue = params.get("include");
+            lengthValue = params.get("length");
+            dictonary = params.get("dictionary");
+
+            gtag("event", "page_view", {
+                page_location: window.location.pathname + location.search,
+            });
+        }
+        getData(txtBox.value.toLowerCase());
+        // addFilterCount();
+    }
+    let selectedDictionary = document.querySelector(".select_dropDown2");
+    selectedDictionary.addEventListener("change", (e) => {
+        logSubmit(e);
+    });
+    // applyBtn.addEventListener("submit", logSubmit);
+    form.addEventListener("submit", logSubmit);
+}
+
+// getWords function define...
+function getWords(data) {
+    main.innerHTML = "";
+    // tab_container.innerHTML = "";
+    lengthSelect.innerHTML = ""
+    document.querySelector(".sortingFilters").style.display="flex"
+    if (typeof data === "string") {
+        errorMsg.innerHTML = "no words found";
+        wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
+            ""
+        )}</strong>`;
+    } else {
+        let newWordsLength = 0;
+        let dataArr = [];
+        for (let i = serachValue.length; i >= 1; i--) {
+            let newdata = data.filter((item) => item.length === i);
+            if (prefixValue) {
+                newdata = newdata.filter((item2) =>
+                    item2.startsWith(prefixValue.toLowerCase())
+                );
+                startsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                startsWith.classList.add("tick");
+                startsWith.value = prefixValue;
+            } else {
+                startsWith.classList.remove("tick");
+            }
+            if (containsValue) {
+                newdata = newdata.filter((item) =>
+                    item.includes(containsValue.toLowerCase())
+                );
+                mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                mustInclude.classList.add("tick");
+                mustInclude.value = containsValue;
+            } else {
+                mustInclude.classList.remove("tick");
+            }
+            if (suffixValue) {
+                newdata = newdata.filter((item) =>
+                    item.endsWith(suffixValue.toLowerCase())
+                );
+                endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                endsWith.classList.add("tick");
+                endsWith.value = suffixValue;
+            } else {
+                endsWith.classList.remove("tick");
+            }
+            if (exculdeValue) {
+                let data = [];
+                newdata.map((item) => {
+                    let check = false;
+                    for (let e = 0; e < exculdeValue.length; e++) {
+                        const element = exculdeValue[e].toLowerCase();
+                        if (item.includes(element)) {
+                            check = true;
+                            break;
+                        } else {
+                            check = false;
+                        }
+                    }
+                    if (check === false) {
+                        data.push(item);
+                    }
+                });
+                exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                exculdeWith.classList.add("tick");
+                exculdeWith.value = exculdeValue;
+                newdata = data;
+            } else {
+                exculdeWith.classList.remove("tick");
+            }
+            if (includeValue) {
+                let data = [];
+                newdata.map((item) => {
+                    let check = false;
+                    for (let e = 0; e < includeValue.length; e++) {
+                        const element = includeValue[e].toLowerCase();
+                        if (!item.includes(element)) {
+                            check = true;
+                            break;
+                        } else {
+                            check = false;
+                        }
+                    }
+                    if (check === false) {
+                        data.push(item);
+                    }
+                });
+                inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                inculdeWith.classList.add("tick");
+                inculdeWith.value = includeValue;
+                newdata = data;
+            } else {
+                inculdeWith.classList.remove("tick");
+            }
+            if (lengthValue) {
+                newdata = newdata.filter((item) => item.length == lengthValue);
+                wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                wordLength.classList.add("tick");
+                wordLength.value = lengthValue;
+            } else {
+                wordLength.classList.remove("tick");
+            }
+            if (newdata.length === 0) {
+                main.innerHTML += "";
+            } else {
+                newWordsLength += newdata.length;
+                const result = newdata.map((item) => {
+                    var text1 = serachValue.replace("?", "");
+                    var text2 = item;
+                    var text3 = item;
+                    let chars = text1.split("");
+
+                    let indexs = [];
+                    chars.map((i) => {
+                        let findIndexes = findIndex(text3, i);
+                        if (findIndexes.length > 0) {
+                            text3 = text3.split("");
+                            text3[findIndexes] = "$";
+                            text3 = text3.join("");
+
+                            indexs = [...indexs, ...findIndexes];
+                        }
+                    });
+                    let itemHtml = "";
+                    text2.split("").map((itemValue, index) => {
+                        let check = indexs.find((i) => i === index);
+
+                        if (check !== undefined) {
+                            itemHtml += `${itemValue}`;
+                        } else {
+                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                        }
+                    });
+
+                    if (item.length === 1) {
+                        ok = false;
+                        newWordsLength = newWordsLength - 1;
+                    } else {
+                        let ScrabbleLetterScore = ScrabbleScore();
+                        sum = 0;
+                        item = item.toLowerCase();
+                        for (let i = 0; i < item.length; i++) {
+                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
+                        }
+                        dataArr.push(item);
+                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            <li>${itemHtml}
+          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
+            </li></a>`;
+                    }
+                });
+
+                if (result[0] !== undefined) {
+                    var option = document.createElement("option");
+                    option.text = `${i} Letter`;
+                    option.value = i;
+                    lengthSelect.setAttribute("onchange", `Filtering(${i})`)
+                    lengthSelect.add(option);
+
+                    //             tab_container.innerHTML += `
+                    //   <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
+                    //   class="tab_link  cursorPointer" />
+                    //   `;
+                    //             let tabs = document.getElementsByClassName("tab_link");
+                    //             tabs[0] ? tabs[0].classList.add("active-tab") : "";
+                    main.innerHTML += `
+          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+              <div class="wordListHeading">
+                  <h3 class="lead">${i} Letter Words</h3>
+              </div>
+              <div class="wordList">
+                  <ul class="ul list-unstyled">
+                   ${result.join("")}
+                  </ul>
+              </div>
+          </div>
+          `;
+                }
+            }
+        }
+        theSelect.addEventListener("change", () => {
+            sortValue = theSelect[theSelect.selectedIndex].text;
+            if (sortValue == "Z-A") {
+                sortBool = true;
+                sortby(sortBool, dataArr);
+            } else {
+                sortBool = false;
+                sortby(sortBool, dataArr);
+            }
+            if (sortValue == "Points") {
+                sortBool = true;
+                sortPointsby(sortBool, dataArr);
+            }
+        });
+        sortValue = theSelect[theSelect.selectedIndex].text;
+        if (sortValue == "Z-A") {
+            sortby(sortBool, dataArr);
+        }
+        if (sortValue == "Points") {
+            sortPointsby(sortBool, dataArr);
+        }
+        if (newWordsLength === 0) {
+            errorMsg.innerHTML = "no words found";
+        } else {
+            wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
+                ""
+            )}</strong>`;
+        }
+    }
+}
+
+// sorting by points
+function sortPointsby(sortValue, data) {
+    main.innerHTML = "";
+    if (sortValue) {
+        let newWordsLength = 0;
+        for (let i = serachValue.length; i >= 1; i--) {
+            var newdata = data.filter((item) => item.length === i);
+            if (newdata.length === 0) {
+                main.innerHTML += "";
+            } else {
+                newWordsLength += newdata.length;
+                var newArray = [];
+                newdata.map((item) => {
+                    if (item.length === 1) {
+                        ok = false;
+                        newWordsLength = newWordsLength - 1;
+                    } else {
+                        let ScrabbleLetterScore = ScrabbleScore();
+                        let points = 0;
+                        item = item.toLowerCase();
+                        for (let i = 0; i < item.length; i++) {
+                            points += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
+                        }
+                        const value = {
+                            words: item,
+                            points: points,
+                        };
+                        newArray.push(value);
+                    }
+                });
+
+                newArray.sort(function (a, b) {
+                    return b.points - a.points;
+                });
+                const result = newArray.map((item) => {
+                    var text1 = serachValue.replace("?", "");
+                    var text2 = item.words;
+                    var text3 = item.words;
+                    function findIndex(str, char) {
+                        const strLength = str.length;
+                        const indexes = [];
+                        let newStr = str;
+                        while (newStr && newStr.indexOf(char) > -1) {
+                            indexes.push(newStr.indexOf(char) + strLength - newStr.length);
+                            newStr = newStr.substring(newStr.indexOf(char) + 1);
+                            newStr = newStr.substring(newStr.indexOf(char) + 1);
+                        }
+                        return indexes;
+                    }
+                    let chars = text1.split("");
+                    let indexs = [];
+                    chars.map((i) => {
+                        let findIndexes = findIndex(text3, i);
+                        if (findIndexes.length > 0) {
+                            text3 = text3.split("");
+                            text3[findIndexes] = "$";
+                            text3 = text3.join("");
+                            indexs = [...indexs, ...findIndexes];
+                        }
+                    });
+                    let itemHtml = "";
+                    text2.split("").map((itemValue, index) => {
+                        let check = indexs.find((i) => i === index);
+                        if (check !== undefined) {
+                            itemHtml += `${itemValue}`;
+                        } else {
+                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                        }
+                    });
+                    return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+          <li>${itemHtml}
+        <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
+          </li></a>`;
+                });
+
+                main.innerHTML += `
+        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+            <div class="wordListHeading">
+                <h3 class="lead">${i} Letter Words</h3>
+            </div>
+            <div class="wordList">
+                <ul class="ul list-unstyled">
+                 ${result.join("")}
+                </ul>
+            </div>
+        </div>
+        `;
+            }
+        }
+    }
+}
+// sort by aplhabets
+function sortby(sortBool, data) {
+    if (sortBool) {
+        main.innerHTML = "";
+        data.reverse();
+        let newWordsLength = 0;
+        for (let i = serachValue.length; i >= 1; i--) {
+            var newdata = data.filter((item) => item.length === i);
+
+            if (newdata.length === 0) {
+                main.innerHTML += "";
+            } else {
+                newWordsLength += newdata.length;
+
+                const result = newdata.map((item) => {
+                    var text1 = serachValue.replace("?", "");
+                    var text2 = item;
+                    var text3 = item;
+                    let chars = text1.split("");
+                    let indexs = [];
+                    chars.map((i) => {
+                        let findIndexes = findIndex(text3, i);
+                        if (findIndexes.length > 0) {
+                            text3 = text3.split("");
+                            text3[findIndexes] = "$";
+                            text3 = text3.join("");
+                            indexs = [...indexs, ...findIndexes];
+                        }
+                    });
+                    let itemHtml = "";
+                    text2.split("").map((itemValue, index) => {
+                        let check = indexs.find((i) => i === index);
+                        if (check !== undefined) {
+                            itemHtml += `${itemValue}`;
+                        } else {
+                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                        }
+                    });
+                    if (item.length === 1) {
+                        ok = false;
+                        newWordsLength = newWordsLength - 1;
+                    } else {
+                        let ScrabbleLetterScore = ScrabbleScore();
+                        let sum = 0;
+                        item = item.toLowerCase();
+                        for (let i = 0; i < item.length; i++) {
+                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
+                        }
+
+                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            <li>${itemHtml}
+        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
+          </li></a>`;
+                    }
+                });
+
+                main.innerHTML += `
+        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+            <div class="wordListHeading">
+                <h3 class="lead">${i} Letter Words</h3>
+            </div>
+            <div class="wordList">
+                <ul class="ul list-unstyled">
+                 ${result.join("")}
+                </ul>
+            </div>
+        </div>
+        `;
+            }
+        }
+    } else {
+        main.innerHTML = "";
+        data.sort();
+        for (let i = serachValue.length; i >= 1; i--) {
+            var newdata = data.filter((item) => item.length === i);
+            if (newdata.length === 0) {
+                main.innerHTML += "";
+            } else {
+                const result = newdata.map((item) => {
+                    var text1 = serachValue.replace("?", "");
+                    var text2 = item;
+                    var text3 = item;
+                    let chars = text1.split("");
+                    let indexs = [];
+                    chars.map((i) => {
+                        let findIndexes = findIndex(text3, i);
+                        if (findIndexes.length > 0) {
+                            text3 = text3.split("");
+                            text3[findIndexes] = "$";
+                            text3 = text3.join("");
+                            indexs = [...indexs, ...findIndexes];
+                        }
+                    });
+                    let itemHtml = "";
+                    text2.split("").map((itemValue, index) => {
+                        let check = indexs.find((i) => i === index);
+                        if (check !== undefined) {
+                            itemHtml += `${itemValue}`;
+                        } else {
+                            itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                        }
+                    });
+                    if (item.length === 1) {
+                        ok = false;
+                    } else {
+                        let ScrabbleLetterScore = ScrabbleScore();
+                        let sum = 0;
+                        item = item.toLowerCase();
+                        for (let i = 0; i < item.length; i++) {
+                            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
+                        }
+
+                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            <li>${itemHtml}
+        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
+          </li></a>`;
+                    }
+                });
+                main.innerHTML += `
+        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+            <div class="wordListHeading">
+                <h3 class="lead">${i} Letter Words</h3>
+            </div>
+            <div class="wordList">
+                <ul class="ul list-unstyled">
+                 ${result.join("")}
+                </ul>
+            </div>
+        </div>
+        `;
+            }
+        }
+    }
+}
+
+// Scrabble Point Array
+const ScrabbleScore = () => {
+    let twl06_sowpods = {
+        a: 1,
+        e: 1,
+        i: 1,
+        o: 1,
+        u: 1,
+        l: 1,
+        n: 1,
+        r: 1,
+        s: 1,
+        t: 1,
+        d: 2,
+        g: 2,
+        b: 3,
+        c: 3,
+        m: 3,
+        p: 3,
+        f: 4,
+        h: 4,
+        v: 4,
+        w: 4,
+        y: 4,
+        k: 5,
+        j: 8,
+        x: 8,
+        q: 10,
+        z: 10,
+    };
+
+    let wwfScore = {
+        a: 1,
+        b: 4,
+        c: 4,
+        d: 2,
+        e: 1,
+        f: 4,
+        g: 3,
+        h: 3,
+        i: 1,
+        j: 10,
+        k: 5,
+        l: 2,
+        m: 4,
+        n: 2,
+        o: 1,
+        p: 4,
+        q: 10,
+        r: 1,
+        s: 1,
+        t: 1,
+        u: 2,
+        v: 5,
+        w: 4,
+        x: 8,
+        y: 3,
+        z: 10,
+    };
+
+    if (dictonary === "wwf") {
+        return wwfScore;
+    } else {
+        return twl06_sowpods;
+    }
+};
+
+// handling of filter on scroll
+window.onscroll = function () {
+    var section = document.querySelectorAll(".wordlistContainer");
+    let new_sections = {};
+    Array.prototype.forEach.call(section, function (e) {
+        if (document.body.clientWidth > 991) {
+            new_sections[e.id] = e.offsetTop - 10;
+        } else {
+            new_sections[e.id] = e.offsetTop - 10;
+        }
+    });
+    var scrollPosition =
+        document.documentElement.scrollTop || document.body.scrollTop;
+    for (i in new_sections) {
+        let sort_val = document.querySelector(".sort-select").value;
+        if (
+            i.split("_")[0] == sort_val &&
+            new_sections[i] &&
+            new_sections[i] <= scrollPosition
+        ) {
+            // document.querySelector(".active-tab").classList.remove("active-tab");
+            // var active_now = document.querySelector("#Tab_" + i.split("_")[1]);
+            // active_now.classList.add("active-tab");
+            // active_now.scrollIntoView({ block: "nearest" });
+        }
+    }
+};
+
+// Add Filtering
+let sections = {};
+function Filtering(id) {
+    id = lengthSelect.value
+
+    let tabs = document.getElementsByClassName("tab_link");
+    tabs[0] ? tabs[0].classList.add("active-tab") : "";
+
+    Array.from(tabs).map((item) => {
+        item.classList.remove("active-tab");
+    });
+    main.innerHTML += ``;
+    let activeLetter = event.target;
+    activeLetter.classList.add("active-tab");
+
+    var section = document.querySelectorAll(".allGroupWords");
+    var sort_val = "alpha";
+    Array.prototype.forEach.call(section, function (e) {
+        if (document.body.clientWidth > 991) {
+            sections[e.id] = e.offsetTop - 10;
+        } else {
+            sections[e.id] = e.offsetTop - 10;
+        }
+    });
+    document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
+
+    setTimeout(() => {
+        document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
+    }, 150);
+}
+
+// next && previous functionality
+let prev = document.getElementById("prev");
+let next = document.getElementById("next");
+
+if (prev) {
+    prev.onclick = scroll_Right;
+}
+if (next) {
+    next.onclick = scroll_Left;
+}
+window.addEventListener("resize", function () {
+    scroll_visible();
+});
+window.addEventListener("scroll", function () {
+    scroll_visible();
+});
+function scroll_visible() {
+    let tab_container = document.querySelector("#tab-container");
+    if (tab_container) {
+        if (tab_container.clientWidth === tab_container.scrollWidth) {
+            prev.style.display = "none";
+            next.style.display = "none";
+        } else {
+            prev.style.display = "block";
+            next.style.display = "block";
+        }
+    }
+}
+scroll_visible();
+
+function scroll_Left() {
+    tab_container.scrollLeft += 130;
+}
+function scroll_Right() {
+    tab_container.scrollLeft -= 130;
+}
+function findIndex(str, char) {
+    const strLength = str.length;
+    const indexes = [];
+    let newStr = str;
+
+    while (newStr && newStr.indexOf(char) > -1) {
+        indexes.push(newStr.indexOf(char) + strLength - newStr.length);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+    }
+
+    return indexes;
+}