https://jamienorthman.github.io/full-exposure/app.js

1import { wordList } from './data.js'
2
3const containerDiv = document.getElementById("word-container");
4
5
6function renderWord(wordListEntry) {
7    let wordElement;
8
9    const widlDiv = document.createElement("div"); // HTML element: these divs hold each word (euphemism). It contains two things: wordElement and toolTipSpan.
10    widlDiv.classList.add("tooltip"); // tooltip class is added from style.css file
11
12     // the HTML elements representing the characteristics of the wordListEntries.
13    if (wordListEntry.link) { // wordListEntry refers to the actual contents of wordList (the objects inside array wordList).
14        wordElement = document.createElement("a"); // creates a link element for wordElement...
15        wordElement.href = wordListEntry.link; // ...attaches the link element to wordListEntry
16        wordElement.target = "_blank" //opens link in another tab
17    } else {
18        wordElement = document.createElement("span"); // words with no link inside WidlDiv
19    }
20    wordElement.style = wordListEntry.styleCSS;
21    let toolTipSpan = document.createElement("span"); // toolTipSpan created to see tooltip in the HTML.
22
23    toolTipSpan.classList.add("tooltiptext"); // class 'tooltiptext' is added from style.css file.
24
25    widlDiv.appendChild(wordElement); // attaches wordElement
26    widlDiv.appendChild(toolTipSpan); // attaches toolTipSpan
27
28    wordElement.innerText = wordListEntry.word; // euphemism will be displayed.
29    toolTipSpan.innerText = wordListEntry.reason; // and tooltip feature with translation of the euphemism.
30
31    containerDiv.appendChild(widlDiv)
32
33    // Now all the HTML for this word has been created.
34    // store reference for each word element in wordList so that we 
35    // can access each word's HTML whenever we need it: (For example, in addEventListener.)
36    // (each word has an HTML buddy, so wordElementHTML is a new key added to each object)
37    wordListEntry.wordElementHTML = wordElement; 
38}
39
40// finds words that are related to selected word and highlights or
41// unhighlights them based on matching tags:
42function updateMatchingWords(wordEntry, shouldHighlight) {
43    for (let otherWordEntry of wordList) {
44
45        const tags1 = wordEntry.tags
46        const tags2 = otherWordEntry.tags
47
48        if (tags1.some(tag => tags2.includes(tag))) {
49            // highlight or unhighlight the matching word element
50            let cL = otherWordEntry.wordElementHTML.classList
51            if (shouldHighlight)
52            {
53                cL.add('highlight')
54            }
55            else
56            {
57                cL.remove('highlight')
58            }
59        }
60    }
61}
62   
63// Creates HTML divs and attaches reference to each word's html element 
64// to the word list entries.
65for (let wordEntry of wordList) {
66    renderWord(wordEntry); 
67} 
68
69// provides interactive state by showing highlighted words
70// for given word element adds and removes highlighted state:
71for (let wordEntry of wordList) {
72
73    wordEntry.wordElementHTML.addEventListener('mouseout', () => {
74        updateMatchingWords(wordEntry, false)
75    })
76
77    wordEntry.wordElementHTML.addEventListener('mouseover', () => {
78        updateMatchingWords(wordEntry, true)
79    })
80}