random-generator/index.js at master · implodium/random-generator · 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
97
98
99
100
101
102
103
104
105
window.addEventListener('load', () => {

    function deleteSelf() {
        this.style.transform = 'scale(0,0)'
        setTimeout(() => {
            this.remove()
        }, 500)
    }

    function displayRandom(text) {
        const generationOverlay = document.querySelector('#random-number-overlay')
        const generationNumberField = document.querySelector("#random-number-container")

        generationNumberField.textContent = text;
        generationOverlay.style.display = "flex";
        setTimeout(() => {
            generationNumberField.style.transform = "rotate(+360deg)";
            generationNumberField.style.fontSize = "20vh";
            generationOverlay.style.opacity = "1";
        }, 20)
    }

    function addRandomWord() {
        const wordField = document.querySelector('#word-field')
        if (wordField.value.trim() !== "") {
            const currentWordContainer = document.querySelector('#current-words')

            const newWordElement = document.createElement('div')
            newWordElement.classList.add('current-word')
            newWordElement.textContent = wordField.value;
            newWordElement.addEventListener('click', deleteSelf)
            wordField.value = ""
            currentWordContainer.appendChild(newWordElement)
            setTimeout(() => {
                newWordElement.style.transform = 'scale(1,1)'
            }, 20)
        }
    }

    document
        .querySelector("#generate-button-number")
        .addEventListener('click', () => {
            const numberField = document.querySelector('#number-field');
            let randomNumber =  Math.trunc( 1 + Math.random() * numberField.value);
            displayRandom(randomNumber)
        })

    document
        .querySelector('#random-number-overlay')
        .addEventListener('click', function() {
            const generationNumberField = document.querySelector("#random-number-container")
            this.style.opacity = "0"
            generationNumberField.style.fontSize = "0";
            generationNumberField.style.transform = "rotate(-360deg)";

            setTimeout(() => {
                this.style.display = "none"
            }, 1000)
        })

    const randomTypes = ["number", "word"]

    randomTypes.forEach(randomType => {
        document
            .querySelector(`#t-nav-random-${randomType}`)
            .addEventListener('click', () => {
                const tContainer = document.querySelector(`#t-random-${randomType}`)
                let tNav = document.querySelector(`#t-nav-random-${randomType}`)
                let otherTypes = randomTypes.slice();
                otherTypes.splice(otherTypes.indexOf(randomType), 1)

                tContainer.style.display = "flex"
                tNav.style.color = "grey"
                otherTypes.forEach(otherType => {
                    let tOtherContainer = document.querySelector(`#t-random-${otherType}`)
                    let tOtherNav = document.querySelector(`#t-nav-random-${otherType}`)

                    tOtherNav.style.color = "black"
                    tOtherContainer.style.display = "none"
                })
            });
    })

    document
        .querySelector('#submit-word')
        .addEventListener('click', () => {
            addRandomWord()
        })

    document
        .querySelector("#generate-button-word")
        .addEventListener('click', () => {
            const currentWords = document.querySelector('#current-words')
            let randomNumber =  Math.trunc( 1 + Math.random() * currentWords.children.length);
            displayRandom(currentWords.children[randomNumber - 1].textContent)
        })

    document
        .querySelector('#word-field')
        .addEventListener('keydown', evt => {
            if (evt.keyCode === 13) {
                addRandomWord()
            }
        })
})