word-games-theme 1.2.7 → 1.3.0

data/assets/js/noRefreshAds.js

@@ -0,0 +1,888 @@
+/***************
+ SCRABBLER_JS
+***************/
+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('exculde')
+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')
+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(/\?$/, '')
+    }
+})
+let rangeOfBlankTile = script.dataset.range
+let quesMark = "?"
+if (rangeOfBlankTile) {
+    if (!serachValue.includes("?")) {
+        serachValue = serachValue + quesMark.repeat(rangeOfBlankTile); //
+        txtBox.value = serachValue
+    }
+}
+
+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...
+let stringLength = null
+let blank = []
+const getData = async (serachValue) => {
+    try {
+        errorMsg.innerHTML = ""
+        wordCount.innerHTML = ""
+        let selectedDictionary = document.querySelector('.select_dropDown2').value
+        loader.innerHTML = `<div class="loader">
+    <img src='/assets/images/loading.gif'>
+    <div style="font-weight:900;font-size:14px" >Finding words - Powered by ${siteUrl.replace(/^https?:\/\//, '')}</div>
+    </div>`
+        /// loader
+        const response = await fetch(
+            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
+        )
+        const data = await response.json()
+
+        function longestString(...strs) {
+            return strs.sort(function (a, b) { return b.length - a.length })[0];
+        }
+
+        stringLength = longestString(...data)
+
+        loader.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) {
+        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 + '&' + '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 getWords(data) {
+    // main.innerHTML = ""
+    tab_container.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
+        theSelect.addEventListener('change', () => {
+            sortValue = theSelect[theSelect.selectedIndex].text
+            if (sortValue == 'Z-A') {
+                sortBool = true
+                sortby(sortBool, data)
+            } else {
+                sortBool = false
+                sortby(sortBool, data)
+            }
+            if (sortValue == 'Points') {
+                sortBool = true
+                sortPointsby(sortBool, data)
+            }
+        })
+        let inc = 0
+        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.classList.add('tick')
+                startsWith.value = prefixValue
+            } else {
+                startsWith.classList.remove('tick')
+            }
+            if (containsValue) {
+                newdata = newdata.filter((item) =>
+                    item.includes(containsValue.toLowerCase())
+                )
+                mustInclude.classList.add('tick')
+                mustInclude.value = containsValue
+            }
+            else {
+                mustInclude.classList.remove('tick')
+            }
+            if (suffixValue) {
+                newdata = newdata.filter((item) =>
+                    item.endsWith(suffixValue.toLowerCase())
+                )
+                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.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.classList.add('tick')
+                inculdeWith.value = includeValue
+                newdata = data
+            } else {
+                inculdeWith.classList.remove('tick')
+            }
+            if (lengthValue) {
+                newdata = newdata.filter((item) => item.length == lengthValue)
+                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
+                        }
+                        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) {
+
+
+                    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') : ''
+
+                    let allGroupWords = document.getElementById(`alpha_${i}`)
+                    let getAllGroupWords = [...main.getElementsByClassName('allGroupWords')]
+
+                    if (main.dataset.value !== "null") {
+                        if (allGroupWords) {
+                            Array.from(getAllGroupWords).forEach((item) => {
+                                if (item.id.slice(6) <= stringLength.length) {
+                                    // if (item.nextSibling !== null && item.nextSibling.classList !== undefined && item.nextSibling.classList.contains("mmtwrappos")) {
+                                    //     item.nextSibling.style.display = "block"
+                                    // }
+                                    item.style.display = "block"
+                                }
+                                else {
+                                    if (item.nextSibling !== null && item.nextSibling.classList !== undefined && item.nextSibling.classList.contains("mmtwrappos")) {
+                                        item.nextSibling.style.visibility = "hidden"
+                                        item.nextSibling.style.height = "0"
+                                    }
+                                    item.style.display = "none"
+                                }
+                            })
+                            allGroupWords.innerHTML = `
+              <div class="wordListHeading">
+                <h3 class="lead">${i} Letter Words</h3>
+              </div>
+              <div class="wordList">
+                <ul class="ul list-unstyled">
+                  ${result.join('')}
+                </ul>
+              </div>
+             `
+                        }
+                        else {
+                            console.log(true)
+                            let getAllGroupWords = [...main.getElementsByClassName('allGroupWords')]
+                            let allGroupWords = document.createElement("div")
+                            allGroupWords.className = "allGroupWords wordlistContainer"
+                            allGroupWords.id = `alpha_${i}`
+                            allGroupWords.innerHTML = `
+                <div class="wordListHeading">
+                  <h3 class="lead">${i} Letter Words</h3>
+                </div>
+                <div class="wordList">
+                  <ul class="ul list-unstyled">
+                    ${result.join('')}
+                  </ul>
+                </div>
+              `
+                            blank.push(allGroupWords)
+                            let newCreated = stringLength.length - getAllGroupWords.length - 1
+                            inc = inc + 1
+                            if (inc === newCreated) {
+                                Array.from(blank).reverse().map((item) => {
+                                    main.prepend(item)
+                                })
+                            }
+                        }
+                    }
+                    else {
+                        if (i === 2) {
+                            main.dataset.value = "not_null"
+                        }
+                        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>`
+
+                    }
+                }
+            }
+        }
+        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> `
+                })
+
+                let allGroupWords = document.getElementById(`alpha_${i}`)
+                if (allGroupWords) {
+                    allGroupWords.innerHTML = `
+          <div class="wordListHeading">
+            <h3 class="lead">${i} Letter Words</h3>
+          </div>
+          <div class="wordList">
+            <ul class="ul list-unstyled">
+              ${result.join('')}
+            </ul>
+          </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> `
+                    }
+                })
+                let allGroupWords = document.getElementById(`alpha_${i}`)
+                if (allGroupWords) {
+                    allGroupWords.innerHTML = `
+          <div class="wordListHeading">
+            <h3 class="lead">${i} Letter Words</h3>
+          </div>
+          <div class="wordList">
+            <ul class="ul list-unstyled">
+              ${result.join('')}
+            </ul>
+          </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> `
+                    }
+                })
+                let allGroupWords = document.getElementById(`alpha_${i}`)
+                if (allGroupWords) {
+                    allGroupWords.innerHTML = `
+          <div class="wordListHeading">
+            <h3 class="lead">${i} Letter Words</h3>
+          </div>
+          <div class="wordList">
+            <ul class="ul list-unstyled">
+              ${result.join('')}
+            </ul>
+          </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 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 <= 5; 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()
+// 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) {
+    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('.wordlistContainer')
+    var sort_val = document.querySelector('.sort-select').value
+    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
+}
+
+// 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
+}