JavaScriptで作った簡単なvoting systemを動かせたい。

javascriptで簡単な投票システムをつくったのですが、それぞれクリックし、カウントおよび％を動かしたいのですがこれからどのようにすれば良いのでしょうか？

今のままでは普通のグラフ状態です；

実現したいこと

ここに実現したいことを箇条書きで書いてください。
カウントと累積表示機能を動作するようにする

発生している問題・エラーメッセージ

エラーは出てませんが、おそらくサーバー関係の知識が足りないところがあるのではと...

node.jsを組み込んで

該当のソースコード

index.html
1<!DOCTYPE html>
2<!-- Created By MultiWebPress - www.multiwebpress.com -->
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Poll UI Design | MultiWebPress</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11  <div class="wrapper">
12    <header>What Design tool do you use the most? <br></header>
13    <div class="poll-area">
14      <input type="checkbox" name="poll" id="opt-1">
15      <input type="checkbox" name="poll" id="opt-2">
16      <input type="checkbox" name="poll" id="opt-3">
17      <input type="checkbox" name="poll" id="opt-4">
18      <label for="opt-1" class="opt-1">
19        <div class="row">
20          <div class="column">
21            <span class="circle"></span>
22            <span class="text">Photoshop</span>
23          </div>
24          <span class="percent">55%</span>
25        </div>
26        <div class="progress" id="pstyle1" style='--w:55;'></div>
27      </label>
28      <label for="opt-2" class="opt-2">
29        <div class="row">
30          <div class="column">
31            <span class="circle"></span>
32            <span class="text">Sketch</span>
33          </div>
34          <span class="percent">20%</span>
35        </div>
36        <div class="progress" id="pstyle2" style='--w:80;'></div>
37      </label>
38      <label for="opt-3" class="opt-3">
39        <div class="row">
40          <div class="column">
41            <span class="circle"></span>
42            <span class="text">Adobe XD</span>
43          </div>
44          <span class="percent">20%</span>
45        </div>
46        <div class="progress" id="pstyle3" style='--w:20;'></div>
47      </label>
48      <label for="opt-4" class="opt-4">
49        <div class="row">
50          <div class="column">
51            <span class="circle"></span>
52            <span class="text">Figma</span>
53          </div>
54          <span class="percent">96%</span>
55        </div>
56        <div class="progress" id="pstyle4" style='--w:96;'></div>
57      </label>
58    </div>
59  </div>
60  <script src="javascript/script.js"></script>
61</body>
62</html>
63

style.css
1@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
2*{
3  margin: 0;
4  padding: 0;
5  box-sizing: border-box;
6  font-family: 'Poppins', sans-serif;
7}
8body{
9  display: flex;
10  align-items: center;
11  justify-content: center;
12  min-height: 100vh;
13  background: FAFAFA;
14}
15.wrapper{
16  padding: 30px;
17  background: #fff;
18  max-width: 500px;
19  width: 100%;
20  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);
21}
22
23@media (max-width:675px){
24    .wrapper{
25        max-width: 300px;
26}
27}
28
29.wrapper header{
30  font-size: 22px;
31  font-weight: 600;
32}
33.wrapper .poll-area{
34  margin: 20px 0 15px 0;
35}
36.poll-area label{
37  display: block;
38  margin-bottom: 10px;
39  padding: 8px 15px;
40  border: 2px solid #e6e6e6;
41  transition: all 0.2s ease;
42}
43
44label.opt-1.selected {
45    border: 2px solid #cf2d00;
46}
47
48label.opt-2.selected {
49    border: 2px solid #4bcc00;
50}
51
52label.opt-3.selected {
53    border: 2px solid #cfbd00;
54}
55
56label.opt-4.selected {
57    border: 2px solid #01638c;
58}
59
60div#pstyle1::after {
61    background: #cf2d00 !important;
62}
63
64div#pstyle2::after {
65    background: #4bcc00 !important;
66}
67
68div#pstyle3::after {
69    background:  #cfbd00 !important;
70}
71
72div#pstyle4::after {
73    background: #01638c !important;
74}
75
76label.opt-1.selected .row .circle{
77    border-color: #cf2d00 !important;
78  }
79
80  label.opt-2.selected .row .circle{
81    border-color: #4bcc00 !important;
82  }
83
84  label.opt-3.selected .row .circle{
85    border-color: #cfbd00 !important;
86  }
87
88  label.opt-4.selected .row .circle{
89    border-color: #01638c !important;
90  }
91
92
93label.opt-1 .row .circle::after{
94    background: #cf2d00 !important;
95  }
96
97  label.opt-2 .row .circle::after{
98    background: #4bcc00 !important;
99}
100
101  label.opt-3 .row .circle::after{
102    background: #cfbd00 !important;
103  }
104
105  label.opt-4 .row .circle::after{
106    background: #01638c !important;
107  }
108
109label .row{
110  display: flex;
111  pointer-events: none;
112  justify-content: space-between;
113}
114label .row .column{
115  display: flex;
116  align-items: center;
117}
118label .row .circle{
119  height: 19px;
120  width: 19px;
121  display: block;
122  border: 2px solid #ccc;
123  border-radius: 50%;
124  margin-right: 10px;
125  position: relative;
126}
127label .row .circle::after{
128  content: "";
129  height: 11px;
130  width: 11px;
131  border-radius: inherit;
132  position: absolute;
133  left: 2px;
134  top: 2px;
135  display: none;
136}
137.poll-area label:hover .row .circle::after{
138  display: block;
139  background: #e6e6e6;
140}
141label.selected .row .circle::after{
142  display: block;
143}
144label .row span{
145  font-size: 16px;
146  font-weight: 500;
147}
148label .row .percent{
149  display: none;
150}
151label .progress{
152  height: 7px;
153  width: 100%;
154  position: relative;
155  background: #f0f0f0;
156  margin: 8px 0 3px 0;
157  border-radius: 30px;
158  display: none;
159  pointer-events: none;
160}
161label .progress:after{
162  position: absolute;
163  content: "";
164  height: 100%;
165  background: #ccc;
166  width: calc(1% * var(--w));
167  border-radius: inherit;
168  transition: all 0.2s ease;
169}
170label.selectall .progress,
171label.selectall .row .percent{
172  display: block;
173}
174input[type="radio"],
175input[type="checkbox"]{
176  display: none;
177}

script.js
1const options = document.querySelectorAll("label");
2for (let i = 0; i < options.length; i++) {
3  options[i].addEventListener("click", ()=>{
4    for (let j = 0; j < options.length; j++) {
5      if(options[j].classList.contains("selected")){
6        options[j].classList.remove("selected");
7      }
8    }
9
10    options[i].classList.add("selected");
11    for (let k = 0; k < options.length; k++) {
12      options[k].classList.add("selectall");
13    }
14
15    let forVal = options[i].getAttribute("for");
16    let selectInput = document.querySelector("#"+forVal);
17    let getAtt = selectInput.getAttribute("type");
18    if(getAtt == "checkbox"){
19      selectInput.setAttribute("type", "radio");
20    }else if(selectInput.checked == true){
21      options[i].classList.remove("selected");
22      selectInput.setAttribute("type", "checkbox");
23    }
24
25    let array = [];
26    for (let l = 0; l < options.length; l++) {
27      if(options[l].classList.contains("selected")){
28        array.push(l);
29      }
30    }
31    if(array.length == 0){
32      for (let m = 0; m < options.length; m++) {
33        options[m].removeAttribute("class");
34      }
35    }
36  });
37}