FLASHCARD-APP/index.js at master · CeasarMartinLee/FLASHCARD-APP · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// const flashcard =

// [
//     {
//       "category": "GameOfThrones",
//       "answer": "Water Dancing",
//       "question": "Arya's fighting style is called?"
//     },
//     {
//       "category": "GameOfThrones",
//       "answer": "The Hound",
//       "question": "Sandor Clegane is known as ..."
//     },
//     {
//       "category": "GameOfThrones",
//       "answer": "Longclaw",
//       "question": "What's the name of Jon Snows's sword?"
//     },
//     {
//       "category": "Geography",
//       "answer": "Amsterdam",
//       "question": "What is the capital city of the Netherlands"
//     },
//     {
//       "category": "Geography",
//       "answer": "Ankara",
//       "question": "What is the capital city of the Turkey"
//     },
//     {
//       "category": "Geography",
//       "answer": "Manilla",
//       "question": "What is the capital city of the Philippines"
//     }
//   ]

let flashcard = []

const delB = document.getElementById('delB')
delB.style.display = "none"

function nextQuestion() {
    h2.style.display = "none";
    delB.style.display = "block"

    // let e = document.getElementById('categoryID');
    // let optionValue = e[e.selectedIndex].value
    // console.log(optionValue)
    // flashcard = flashcard.filter(item => item.category === "Geography")
    // console.log(flashcard);

    let n = Math.floor(Math.random() * flashcard.length)
    document.getElementById('h1').innerHTML = flashcard[n].question
    document.getElementById('h2').innerHTML = flashcard[n].answer
    window.n = n
}

h1.addEventListener("click", nextQuestion);

async function addQuestion() {
    let questionVal = document.getElementById('question').value
    let answerVal = document.getElementById('answer').value
    let categoryVal = document.getElementById('category').value

    if (doesNotPassAllValidations(questionVal, answerVal, categoryVal)) {
        return null
    }

    flashcard.push({
        "question": questionVal, "answer": answerVal,
        "category": categoryVal
    })

    const request = await fetch('https://api.jsonbin.io/b/5c387ca505d34b26f2076228', {
        method: "PUT",
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(flashcard)
    })

    document.getElementById('question').value = ''
    document.getElementById('answer').value = ''
    document.getElementById('category').value = ''
    alert('Successfully Added!')

    console.log(flashcard);
}

async function deleteQuestion() {
    let n = window.n
    delete flashcard[n]
    flashcard = flashcard.filter(Boolean);

    const request = await fetch('https://api.jsonbin.io/b/5c387ca505d34b26f2076228', {
        method: "PUT",
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(flashcard)
    })

    console.log(flashcard);

    alert('Successfully Deleted!')
    nextQuestion()
}

function showAnswer() {
    h2.style.display = "block";
}

function doesNotPassAllValidations(questionVal, answerVal, categoryVal) {
    if (!questionVal) {
        alert('You forgot to fill in new question!')
        return true;
    } else if (!answerVal) {
        alert('You forgot to fill in the answer to the question!')
        return true;
    } else if (!categoryVal) {
        alert('You forgot to fill in the category!')
        return true;
    }
    return false
}

const getJson = async function () {
    const request = await fetch('https://api.jsonbin.io/b/5c387ca505d34b26f2076228/latest')
    const json = await request.json()
    flashcard = json

    nextQuestion()
}

getJson()