word-games-theme 2.4.2 → 2.4.4

data/assets/js/xletter-result.js

@@ -0,0 +1,812 @@
+const getScript = document.querySelector(".serachSection")
+const letterLen = getScript.dataset.letter
+const ablank = getScript.dataset.ablank
+const siteUrl = getScript.dataset.url
+let errorMsg = document.querySelector('.errorMsg')
+let script = document.currentScript
+let wordCount = document.querySelector('.wordCount')
+let main = document.querySelector('.main')
+
+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('exculde')
+let includeValue = params.get('include')
+let lengthValue = params.get('length')
+let dictonary = params.get('dictionary')
+
+
+// Scrabble Point Counts
+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
+    }
+}
+
+let tab_link_wrapper = document.querySelector('.tab_link_wrapper')
+tab_link_wrapper.style.display = "none"
+
+let home_page_search_result = document.querySelector("#home_page_search_result")
+let homePageSearchResult = `/?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;
+
+txtBox.value = serachValue
+
+
+if (ablank) {
+    if (!serachValue.includes("?")) {
+        if (serachValue.length <= letterLen || serachValue.length >= letterLen) {
+            serachValue = serachValue + '?'
+            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 letterCloseButton = document.querySelector('.letter-close-button-commonPage')
+if (serachValue) {
+    letterCloseButton.style.display = "block"
+}
+// letterCloseButton.addEventListener("click", () => {
+//   txtBox.value = ""
+//   letterCloseButton.classList.remove("ltr-cls-btn-commonPage")
+// })
+
+// 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 === '?')
+//   // console.log(data)
+//   if (data.length > rangeOfBlankTile) {
+//     e.target.value = e.target.value.replace(/\?$/, '')
+//   }
+// })
+
+// function mobileScrollTop(x) {
+//   if (x.matches) {
+//     txtBox.addEventListener("click", () => {
+//       document.documentElement.scrollTop = 350
+//       setTimeout(() => {
+//         document.documentElement.scrollTop = 350
+//       }, 150);
+//     })
+//   } else {
+//     console.log("false");
+//   }
+// }
+// var x = window.matchMedia("(max-width: 768px)")
+// mobileScrollTop(x)
+// x.addListener(mobileScrollTop)
+
+var 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
+}
+const getData = async (serachValue) => {
+    try {
+        errorMsg.innerHTML = ""
+        wordCount.innerHTML = ""
+        home_page_search_result.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>`;
+        const response = await fetch(
+            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
+        )
+        const data = await response.json()
+        main.innerHTML = ''
+        x_with_letters(data)
+    } catch (error) {
+        console.log(error)
+    }
+}
+// calling function
+getData(serachValue.toLowerCase())
+
+let quesMark = ''
+quesMark = "?"
+
+
+function logSubmit(event) {
+    document.querySelector(".fillterWrapper").classList.add("hide")
+
+
+    const scrollingElement = (document.scrollingElement || document.body);
+    scrollingElement.scroll({ top: 0, behavior: 'smooth' });
+    if (ablank) {
+        if (!txtBox.value.includes("?")) {
+            txtBox.value = txtBox.value + quesMark
+        }
+    }
+    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 + '&' + 'exculde' + '=' + 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('exculde')
+        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);
+
+
+function x_with_letters(data) {
+    main.innerHTML = ""
+    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 filterData = ''
+        let dataArr = []
+
+
+        if (letterLen) {
+            filterData = data.filter((item) => item.length == letterLen)
+        }
+
+        if (prefixValue) {
+            filterData = filterData.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) {
+            filterData = filterData.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) {
+            filterData = filterData.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 = []
+            filterData.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
+            filterData = data
+        } else {
+            exculdeWith.classList.remove('tick')
+        }
+
+        if (includeValue) {
+            let data = []
+            filterData.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
+            filterData = data
+        } else {
+            inculdeWith.classList.remove('tick')
+        }
+
+        if (letterLen) {
+            wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+        }
+
+        if (filterData.length === 0) {
+            main.innerHTML += ''
+            errorMsg.innerHTML = 'No words Found with this length'
+        } else {
+
+            newWordsLength += filterData.length
+            let itemLength = ''
+            const result = filterData.map((item) => {
+                itemLength = item.length
+                let ScrabbleLetterScore = ScrabbleScore()
+                sum = 0
+                item = item.toLowerCase()
+                for (let i = 0; i < item.length; i++) {
+                    sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
+                }
+                wordLength.value = itemLength
+
+                var text1 = serachValue.replace('?', '')
+                var text2 = item
+                var text3 = item
+                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>`
+                    }
+                })
+
+                dataArr.push(item)
+                return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+        <li>${itemHtml}
+          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
+            </li></a>`
+            })
+            home_page_search_result.href = homePageSearchResult
+            home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`
+
+
+            main.innerHTML += `
+        <div class="allGroupWords">
+          <div class="wordListHeading">
+          <h3 class="lead">${itemLength} Letter Words</h3>
+           </div>
+      <div class="wordList">
+          <ul class="ul list-unstyled">
+           ${result.join('')}
+          </ul>
+      </div>
+  </div>
+  `
+
+            // sort eventlistener
+            theSelect.addEventListener('change', () => {
+                sortValue = theSelect[theSelect.selectedIndex].text
+                if (sortValue == 'Z-A') {
+                    sortBool = true
+                    sortby(sortBool, dataArr, itemLength)
+                } else {
+                    sortBool = false
+                    sortby(sortBool, dataArr, itemLength)
+                }
+                if (sortValue == 'Points') {
+                    sortBool = true
+                    sortPointsby(sortBool, dataArr, itemLength)
+                }
+            })
+
+            sortValue = theSelect[theSelect.selectedIndex].text
+            if (sortValue == 'Z-A') {
+                sortby(sortBool, dataArr, itemLength)
+            }
+            if (sortValue == 'Points') {
+                sortPointsby(sortBool, dataArr, itemLength)
+            }
+
+
+        }
+
+        wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
+            ''
+        )}</strong>`
+    }
+}
+
+//Handling of filter counter in advanced filter
+function addFilterCount() {
+    let filter_val = document.getElementsByClassName('filter_val')
+    let filter = document.querySelector('.filter_count')
+    let filter_count = 0
+
+    filter_val[0].value = prefixValue
+    filter_val[1].value = containsValue
+    filter_val[2].value = suffixValue
+    filter_val[3].value = exculdeValue
+    filter_val[4].value = includeValue
+    filter_val[5].value = lengthValue
+
+    for (var i = 0; i <= 4; i++) {
+        if (filter_val[i].value != '') {
+            filter_count += 1
+        }
+        if (filter_count === 0) {
+            filter.style.display = 'none'
+        } else {
+            filter.style.display = 'inline-block'
+        }
+
+        filter.innerHTML = filter_count
+    }
+}
+// addFilterCount()
+
+// sorting by points
+function sortPointsby(sortValue, data, i) {
+    if (sortValue) {
+        main.innerHTML = ''
+        let newArray = []
+        data.map((item) => {
+            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, i) {
+    if (sortBool) {
+        main.innerHTML = ''
+        data.reverse()
+        const result = data.map((item) => {
+            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
+            }
+
+            var text1 = serachValue.replace('?', '')
+            var text2 = item
+            var text3 = item
+            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}">
+            <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()
+        const result = data.map((item) => {
+            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
+            }
+
+            var text1 = serachValue.replace('?', '')
+            var text2 = item
+            var text3 = item
+            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}">
+              <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>
+       
+          `
+    }
+}
+
+// Implement Active class
+// const addFilter = () => {
+//   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
+//   // console.log(activeLetter)
+//   activeLetter.classList.add('active-tab')
+// }