Kana-Go.github.io/script.js at main · developers-together/Kana-Go.github.io · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import {kanaList} from './jpChars.js';

let hiraganaButton = document.getElementById("hiragana");
let katakanaButton = document.getElementById("katakana");
let romajiButton = document.getElementById("romaji");
const blockquote = document.getElementById('letter');
const answer = document.getElementById('answer');
let main = document.getElementById('main');
const instructionText = document.querySelector('.main p');

let ind = Math.floor(Math.random() * kanaList.length);

document.addEventListener("DOMContentLoaded", () => {
    const savedMode = localStorage.getItem('kanaMode');

    instructionText.textContent = "Click to reveal";

    if (savedMode === 'katakana') {
        katakanaButton.click();
    } else if (savedMode === 'romaji') {
        romajiButton.click();
    } else {
        hiraganaButton.click();
    }
});

hiraganaButton.addEventListener("click", () => {
    if(!hiraganaButton.classList.contains('clicked')){
        localStorage.setItem('kanaMode', 'hiragana');
        answer.textContent = kanaList[ind][2];
        answer.classList.remove('shown');
        hiraganaButton.classList.toggle('clicked');
        blockquote.textContent = kanaList[ind][0];
        instructionText.textContent = "Click to reveal";
    }
    katakanaButton.classList.remove('clicked');
    romajiButton.classList.remove('clicked');
})

katakanaButton.addEventListener("click", () => {
    if(!katakanaButton.classList.contains('clicked')){
        localStorage.setItem('kanaMode', 'katakana');
        answer.textContent = kanaList[ind][2];
        answer.classList.remove('shown');
        katakanaButton.classList.toggle('clicked');
        blockquote.textContent = kanaList[ind][1];
        instructionText.textContent = "Click to reveal";
    }
    hiraganaButton.classList.remove('clicked');
    romajiButton.classList.remove('clicked');
})

romajiButton.addEventListener("click", () => {
    if(!romajiButton.classList.contains('clicked')){
        localStorage.setItem('kanaMode', 'romaji');
        answer.textContent = kanaList[ind][0] + " " + kanaList[ind][1];
        answer.classList.remove('shown');
        romajiButton.classList.toggle('clicked');
        blockquote.textContent = kanaList[ind][2];
        instructionText.textContent = "Click to reveal";
    }
    hiraganaButton.classList.remove('clicked');
    katakanaButton.classList.remove('clicked');
})

main.addEventListener("click", () => {
    if(!answer.classList.contains('shown')){
        answer.classList.add('shown');
        instructionText.textContent = "Click for next";
    }
    else{
        blockquote.classList.add('fade-out');
        answer.classList.add('fade-out');
        instructionText.classList.add('fade-out');

        setTimeout(() => {
            ind = Math.floor(Math.random() * kanaList.length);

            answer.style.transition = 'none';
            answer.classList.remove('shown');

            instructionText.textContent = "Click to reveal";

            if(hiraganaButton.classList.contains('clicked')){
                blockquote.textContent = kanaList[ind][0];
                answer.textContent = kanaList[ind][2];
            }
            else if(katakanaButton.classList.contains('clicked')){
                blockquote.textContent = kanaList[ind][1];
                answer.textContent = kanaList[ind][2];
            }
            else{
                blockquote.textContent = kanaList[ind][2];
                answer.textContent = kanaList[ind][0] + " " + kanaList[ind][1];
            }

            void answer.offsetWidth;

            answer.style.transition = '';

            blockquote.classList.remove('fade-out');
            answer.classList.remove('fade-out');
            instructionText.classList.remove('fade-out');
        }, 100);
    }
})

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space' || e.code === 'Enter') {
        e.preventDefault();
        main.click();
    }
    if (e.key.toLowerCase() === 'h') {
        hiraganaButton.click();
    }
    if (e.key.toLowerCase() === 'k') {
        katakanaButton.click();
    }
    if (e.key.toLowerCase() === 'r') {
        romajiButton.click();
    }
});