Trivia-App/scripts.js at main · vsingh2201/Trivia-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
const game = document.querySelector('#game');

const scoreDisplay = document.getElementById('score');
let score = 0;

const genres = [
    {
        name: "Film",
        id: 11
    },
    {
        name: "Books",
        id: 10
    },
    {
        name: "Music",
        id: 12
    },
    {
        name: "Video Games",
        id: 15
    }
]
const levels = ['easy','medium','hard'];


function addGenre(genre){
    const column = document.createElement('div');
    column.classList.add('genre-column');
    column.innerHTML = genre.name;
    game.append(column);

    levels.forEach(level => {
        const card = document.createElement('div');
        card.classList.add('card');
        column.append(card);

        if(level === 'easy'){
            card.innerHTML = 100;
        }
        if(level === 'medium'){
            card.innerHTML = 200;
        }
        if (level === 'hard'){
            card.innerHTML = 300;
        }

        fetch(`https://opentdb.com/api.php?amount=1&category=${genre.id}&difficulty=${level}&type=boolean`)
        .then(response => response.json())
        .then(data =>{
            console.log(data);
            card.setAttribute('data-question', data.results[0].question);
            card.setAttribute('data-answer', data.results[0].correct_answer);
            card.setAttribute('data-value', card.getInnerHTML());

        })
        .then(done => card.addEventListener('click', flipCard));
        //card.addEventListener('click', flipCard)
    })
}

//addGenre(genres[0]);

genres.forEach(genre =>  addGenre(genre));

function flipCard(){
    this.innerHTML = '';
    this.style.fontSize = '15px';
    const textDisplay = document.createElement('div');
    const trueButton = document.createElement('button');
    const falseButton = document.createElement('button');
    trueButton.innerHTML = 'True';
    falseButton.innerHTML = 'False';
    trueButton.classList.add('true-button');
    //trueButton.setAttribute('type', 'button');
    //trueButton.classList.add('btn btn-success');
    falseButton.classList.add('false-button');
    trueButton.addEventListener('click', getResult);
    falseButton.addEventListener('click', getResult);
    textDisplay.innerHTML = this.getAttribute('data-question');
    this.append(textDisplay, trueButton, falseButton);

    const allCards = Array.from(document.querySelectorAll('.card'));
    allCards.forEach(card => card.removeEventListener('click', flipCard));
}

function getResult(){

    const allCards = Array.from(document.querySelectorAll('.card'));
    allCards.forEach(card => card.addEventListener('click', flipCard));

    const cardOfButton = this.parentElement;
    // If the answer is correct
    if (cardOfButton.getAttribute('data-answer') === this.innerHTML){
        //console.log('Its a match!');
        score = score + parseInt(cardOfButton.getAttribute('data-value'));
        scoreDisplay.innerHTML = score;
        cardOfButton.classList.add('correct-answer');
        setTimeout(() => {
            while(cardOfButton.firstChild){
                cardOfButton.removeChild(cardOfButton.lastChild);
            }
            cardOfButton.innerHTML = cardOfButton.getAttribute('data-value');
        }, 100)
    }else{ // If the answer is incorrect
        cardOfButton.classList.add('wrong-answer');
        setTimeout(() => {
            while(cardOfButton.firstChild){
                cardOfButton.removeChild(cardOfButton.lastChild);
            }
            cardOfButton.innerHTML = 0;
        },100)
    }
    cardOfButton.removeEventListener('click', flipCard);


}