dictionary/script.js at main · pratishlmc/dictionary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const search_input = document.querySelector('input')
const infoText = document.querySelector(".info-text")
const wrapper = document.querySelector(".wrapper")
const meaning = document.querySelector(".meaning")
const partOfSpeech = document.querySelector("#pos")
const phonetic = document.querySelector("#phonetic")
const the_word = document.querySelector(".the_word")
const showAll = document.querySelector("a")
const clearBtn = document.querySelector("#clearButton")
const audioBtn = document.querySelector("#audioBtn")

function data(result, word) {
    if (!result[0].shortdef) {
        infoText.innerHTML = `Can't find any meaning for <span>"${word}"</span>, please check the spelling and try again.`
        wrapper.classList.remove('active')
    }
    else {
        let showAllMeanings = false

        showAll.innerHTML = "Show all"
        wrapper.classList.add('active')
        let item = result[0]

        // console.log(item)
        the_word.innerHTML = word
        partOfSpeech.innerHTML = item.fl
        phonetic.innerHTML = `/${item.hwi.prs[0].mw}/`

        meaning.innerHTML = `<span class="multi-text">${item.shortdef[0]}</span>`
        if (item.shortdef.length <= 1) {
            showAll.style.display = "none"
        }
        else {
            showAll.style.display = "block"

        }

        showAll.addEventListener('click', function (e) {
            showAllMeanings = !showAllMeanings

            if (showAllMeanings === true) {
                showAll.innerHTML = "Show less"
                for (let i = 1; i < item.shortdef.length; i++) {
                    let HTMLitem = `<hr/><li class="multi-text" >${item.shortdef[i]}</li>`
                    meaning.insertAdjacentHTML('beforeend', HTMLitem)
                }
            } else {
                showAll.innerHTML = "Show all"
                meaning.innerHTML = `<span class="multi-text">${item.shortdef[0]}</span>`
            }
        })
    }

}
function fetchApi(word) {
    infoText.style.color = "#000000"
    infoText.innerHTML = `Searching meaning for <span>"${word}"</span>`

    let url = `https://dictionaryapi.com/api/v3/references/collegiate/json/${word}?key=bb3685a4-1bc4-4e6f-b9c6-d2ee454a2700`
    fetch(url)
        .then(response => response.json())
        .then(result => data(result, word))
    // .catch(err => console.error(err));
}

search_input.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
        fetchApi(e.target.value)
    }
})

clearBtn.addEventListener('click', function () {
    search_input.value = ""
})

audioBtn.addEventListener('click', function () {
    let utterance = new SpeechSynthesisUtterance(the_word.innerHTML);
    speechSynthesis.speak(utterance);
})

async function query(data) {
    const response = await fetch(
        "https://api-inference.huggingface.co/models/facebook/fastspeech2-en-ljspeech",
        {
            headers: { Authorization: "Bearer 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" },
            method: "POST",
            body: JSON.stringify(data),
        }
    );
    const result = await response.json();
    return result;
}

query({ "inputs": "The answer to the universe is 42" }).then((response) => {
    console.log(JSON.stringify(response));
});