SimplePoll/index.js at main · LittleGraper/SimplePoll · 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
let poll = {
    question:"how are you?",
    answers: ["good", "bad", "very good", "sad"],
    pollCount: 20,
    answersWeight:[4, 4, 0, 0],
    selectedAnswer: -1
  };


let pollDOM = {
    question: document.querySelector(".poll .question"),
    answers: document.querySelector(".poll .answers")
};

pollDOM.question.innerText = poll.question;
pollDOM.answers.innerHTML = poll.answers.map(function(answer, i){
    return `
    <div class="answer" onclick="markAnswer('${i}')">
        ${answer}
        <span class="percentage-bar"></span>
        <span class="percentage-value"></span>
    </div>
    `;
}).join("");


function markAnswer(i){
    poll.selectedAnswer = +i;
    try {
        document.querySelector(".poll .answers .answer.selected").classList.remove("selected");
    } catch(msg){}
    document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected");
    showResults();
}


function showResults(){
    let answers = document.querySelectorAll(".poll .answers .answer");
    for(let i = 0; i < answers.length; i++){
        let percentage = 0;
        if(i == poll.selectedAnswer){
            percentage = Math.round(
                (poll.answersWeight[i] + 1) * 100 / (poll.pollCount + 1)
            );
        } else {
            percentage = Math.round(
                (poll.answersWeight[i]) * 100 / (poll.pollCount + 1)
            );
        }

        answers[i].querySelector(".percentage-bar").style.width = percentage + "%";
        answers[i].querySelector(".percentage-value").innerText = percentage + "%";
    }
}