assets/js/X-letter.js in word-games-theme-0.1.9 vs assets/js/X-letter.js in word-games-theme-0.2.0
- old
+ new
@@ -1,359 +1,359 @@
----
----
-const getScript=document.currentScript
-const letterLen = getScript.dataset.letter
-
-let errorMsg = document.querySelector('.errorMsg')
-let wordCount = document.querySelector('.wordCount')
-let main = document.querySelector('.main')
-
-const params = new URLSearchParams(window.location.search)
-let serachValue = params.get('search')
-let prefixValue = params.get('prefix')
-let containsValue = params.get('contains')
-let suffixValue = params.get('suffix')
-let lengthValue = params.get('length')
-let dictonary = params.get('dictonary')
-
-let tab_container = document.querySelector('.tab_container')
-
-let txtBox = document.querySelector('.txtBox')
-txtBox.value = serachValue
-
-var theSelect = document.getElementById('select_dropDown')
-document.querySelector('.select_dropDown2').value = dictonary
-
-const getData = async (serachValue) => {
- try {
- main.innerHTML = `<div class="loader">
- <img src='/assets/images/loading.gif'>
- </div>`
- const response = await fetch(
- `/.netlify/functions/getWords?name=${serachValue}`
- )
- const data = await response.json()
- main.innerHTML = ''
- x_with_letters(data)
- } catch (error) {
- console.log(error)
- }
-}
-// calling function
-getData(serachValue.toLowerCase())
-
-function x_with_letters(data) {
- if (typeof data === 'string') {
- errorMsg.innerHTML = 'No words found'
- wordCount.innerHTML = `<strong> 0 words with letters ${serachValue.split(
- ''
- )}</strong>`
- } else {
- let newWordsLength = 0
- let filterData = ''
-
-
- if (letterLen) {
- filterData = data.filter((item) => item.length == letterLen)
- }
-
-
- if (prefixValue) {
- filterData = filterData.filter((item2) =>
- item2.startsWith(prefixValue.toLowerCase())
- )
- startsWith.classList.add('tick')
- startsWith.value = prefixValue
- }
- if (containsValue) {
- filterData = filterData.filter((item) =>
- item.includes(containsValue.toLowerCase())
- )
- mustInclude.classList.add('tick')
- mustInclude.value = containsValue
- }
- if (suffixValue) {
- filterData = filterData.filter((item) =>
- item.endsWith(suffixValue.toLowerCase())
- )
- endsWith.classList.add('tick')
- endsWith.value = suffixValue
- }
-
- if (filterData.length === 0) {
- main.innerHTML += ''
- errorMsg.innerHTML = 'No words Found with this length'
- } else {
- // sort eventlistener
- theSelect.addEventListener('change', () => {
- sortValue = theSelect[theSelect.selectedIndex].text
- if (sortValue == 'Z-A') {
- sortBool = true
- sortby(sortBool, filterData, itemLength)
- } else {
- sortBool = false
- sortby(sortBool, filterData, itemLength)
- }
- if (sortValue == 'Points') {
- sortBool = true
- sortPointsby(sortBool, filterData, itemLength)
- }
- })
-
- 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
- return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
- <li>${item}
- <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
- </li></a>`
- })
-
- tab_container.innerHTML += `
- <a href="#${itemLength}">
- <input type="button" value="${itemLength} Letter" id="Tab${itemLength}" onclick="addFilter(${itemLength})"
- class="tab_link">
- </a>
- `
-
- let tabs = document.getElementsByClassName('tab_link')
- tabs[0] ? tabs[0].classList.add('active-tab') : ''
-
- 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>
- `
- }
- wordCount.innerHTML = `<strong>${newWordsLength} words with letters ${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 = 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) => {
- return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
- <li>${item.words}
- <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
- }
- return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
- <li>${item}
- <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
- }
- return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
- <li>${item}
- <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')
-}
-
-// 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
- }
-}
+---
+---
+const getScript=document.currentScript
+const letterLen = getScript.dataset.letter
+
+let errorMsg = document.querySelector('.errorMsg')
+let wordCount = document.querySelector('.wordCount')
+let main = document.querySelector('.main')
+
+const params = new URLSearchParams(window.location.search)
+let serachValue = params.get('search')
+let prefixValue = params.get('prefix')
+let containsValue = params.get('contains')
+let suffixValue = params.get('suffix')
+let lengthValue = params.get('length')
+let dictonary = params.get('dictonary')
+
+let tab_container = document.querySelector('.tab_container')
+
+let txtBox = document.querySelector('.txtBox')
+txtBox.value = serachValue
+
+var theSelect = document.getElementById('select_dropDown')
+document.querySelector('.select_dropDown2').value = dictonary
+
+const getData = async (serachValue) => {
+ try {
+ main.innerHTML = `<div class="loader">
+ <img src='/assets/images/loading.gif'>
+ </div>`
+ const response = await fetch(
+ `/.netlify/functions/getWords?name=${serachValue}`
+ )
+ const data = await response.json()
+ main.innerHTML = ''
+ x_with_letters(data)
+ } catch (error) {
+ console.log(error)
+ }
+}
+// calling function
+getData(serachValue.toLowerCase())
+
+function x_with_letters(data) {
+ if (typeof data === 'string') {
+ errorMsg.innerHTML = 'No words found'
+ wordCount.innerHTML = `<strong> 0 words with letters ${serachValue.split(
+ ''
+ )}</strong>`
+ } else {
+ let newWordsLength = 0
+ let filterData = ''
+
+
+ if (letterLen) {
+ filterData = data.filter((item) => item.length == letterLen)
+ }
+
+
+ if (prefixValue) {
+ filterData = filterData.filter((item2) =>
+ item2.startsWith(prefixValue.toLowerCase())
+ )
+ startsWith.classList.add('tick')
+ startsWith.value = prefixValue
+ }
+ if (containsValue) {
+ filterData = filterData.filter((item) =>
+ item.includes(containsValue.toLowerCase())
+ )
+ mustInclude.classList.add('tick')
+ mustInclude.value = containsValue
+ }
+ if (suffixValue) {
+ filterData = filterData.filter((item) =>
+ item.endsWith(suffixValue.toLowerCase())
+ )
+ endsWith.classList.add('tick')
+ endsWith.value = suffixValue
+ }
+
+ if (filterData.length === 0) {
+ main.innerHTML += ''
+ errorMsg.innerHTML = 'No words Found with this length'
+ } else {
+ // sort eventlistener
+ theSelect.addEventListener('change', () => {
+ sortValue = theSelect[theSelect.selectedIndex].text
+ if (sortValue == 'Z-A') {
+ sortBool = true
+ sortby(sortBool, filterData, itemLength)
+ } else {
+ sortBool = false
+ sortby(sortBool, filterData, itemLength)
+ }
+ if (sortValue == 'Points') {
+ sortBool = true
+ sortPointsby(sortBool, filterData, itemLength)
+ }
+ })
+
+ 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
+ return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+ <li>${item}
+ <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
+ </li></a>`
+ })
+
+ tab_container.innerHTML += `
+ <a href="#${itemLength}">
+ <input type="button" value="${itemLength} Letter" id="Tab${itemLength}" onclick="addFilter(${itemLength})"
+ class="tab_link">
+ </a>
+ `
+
+ let tabs = document.getElementsByClassName('tab_link')
+ tabs[0] ? tabs[0].classList.add('active-tab') : ''
+
+ 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>
+ `
+ }
+ wordCount.innerHTML = `<strong>${newWordsLength} words with letters ${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 = 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) => {
+ return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+ <li>${item.words}
+ <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
+ }
+ return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+ <li>${item}
+ <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
+ }
+ return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+ <li>${item}
+ <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')
+}
+
+// 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
+ }
+}