-
Notifications
You must be signed in to change notification settings - Fork 0
/
votingtest.html
120 lines (110 loc) · 2.92 KB
/
votingtest.html
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
<!DOCTYPE html>
<html>
<head>
<style>
.number {
display: inline-block;
text-align: center;
}
.vote {
display: flex;
flex-direction: column;
text-align: center;
}
.up-vote,
.down-vote {
color: dimgray;
cursor: pointer;
}
.vote.vote-up .up-vote,
.vote.vote-down .down-vote {
color: #3CBC8D;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="vote">
<span class="up-vote"><i class="fas fa-angle-up"></i></span>
<span class="number">0</span>
<span class="down-vote"><i class="fas fa-angle-down"></i></span>
</div>
<div class="vote">
<span class="up-vote"><i class="fas fa-angle-up"></i></span>
<span class="number">0</span>
<span class="down-vote"><i class="fas fa-angle-down"></i></span>
</div>
<div class="vote">
<span class="up-vote"><i class="fas fa-angle-up"></i></span>
<span class="number">0</span>
<span class="down-vote"><i class="fas fa-angle-down"></i></span>
</div>
<script type="text/javascript">
const myVotePrototype = {
init: function(id) {
this.voteId = id;
// Prepare for voting clicks
this.bindEvents();
},
votes: 0,
upVote: function() {
this.votes++;
this.setVoteDirection('up');
},
downVote: function() {
this.votes--;
this.setVoteDirection('down');
},
setVoteDirection: function(direction) {
let voteObj = document.getElementById(this.voteId);
if (direction === 'up') {
voteObj.classList.add('vote-up');
if (voteObj.classList.contains('vote-down')) {
voteObj.classList.remove('vote-down');
}
} else if (direction === 'down') {
voteObj.classList.add('vote-down');
if (voteObj.classList.contains('vote-up')) {
voteObj.classList.remove('vote-up');
}
}
},
updateUI: function() {
document.querySelector(`#${this.voteId} .number`).innerHTML = Number(this.votes);
},
bindEvents: function() {
document
.querySelector(`#${this.voteId} .up-vote`)
.addEventListener('click', () => {
this.upVote();
this.updateUI();
});
document
.querySelector(`#${this.voteId} .down-vote`)
.addEventListener('click', () => {
this.downVote();
this.updateUI();
})
}
};
function myVote(id) {
function V() {};
V.prototype = myVotePrototype;
let v = new V();
v.init(id);
return v;
}
// Loop through all votes in the UI
const votes = document.querySelectorAll('.vote');
votes.forEach((vote, index) => {
// Create an id
let voteId = `vote_${index}`;
// Set the id in the UI so we can find it later for updating
vote.setAttribute('id', voteId);
// Create a new vote object, passing in the vote id
myVote(voteId);
});
</script>
</body>
</html>