質問編集履歴

1

修正依頼に対して、該当コードの追加をしました。

2021/11/04 23:30

投稿

ta01kuya
ta01kuya

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,16 +10,364 @@
10
10
 
11
11
  下記のボタンの表示、非表示を連続で行いたい
12
12
 
13
+ `<button class="button" id="button">ボタン</button>`
14
+
13
15
  index.html.erb
14
16
 
15
17
  ```
16
18
 
19
+ <main class="app">
20
+
21
+ <progress id="js-progress" value="0"></progress>
22
+
23
+ <div class="progress-bar"></div>
24
+
25
+ <div class="timer">
26
+
27
+ <div class="button-group mode-buttons" id="js-mode-buttons">
28
+
29
+ <button
30
+
31
+ data-mode="pomodoro"
32
+
33
+ class="button active mode-button"
34
+
35
+ id="js-pomodoro"
36
+
37
+ >
38
+
39
+ Pomodoro
40
+
41
+ </button>
42
+
43
+ <button
44
+
45
+ data-mode="shortBreak"
46
+
47
+ class="button mode-button"
48
+
49
+ id="js-short-break"
50
+
51
+ >
52
+
53
+ Short break
54
+
55
+ </button>
56
+
57
+ <button
58
+
59
+ data-mode="longBreak"
60
+
61
+ class="button mode-button"
62
+
63
+ id="js-long-break"
64
+
65
+ >
66
+
67
+ Long break
68
+
69
+ </button>
70
+
71
+ </div>
72
+
73
+ <div class="clock" id="js-clock">
74
+
75
+ <span id="js-minutes">25</span>
76
+
77
+ <span class="separator">:</span>
78
+
79
+ <span id="js-seconds">00</span>
80
+
81
+ </div>
82
+
17
- <button class="button" id="btn">ボタン</button>
83
+ <button class="button" id="button">ボタン</button>
84
+
85
+ <button class="main-button" data-action="start" id="js-btn">
86
+
87
+ Start
88
+
89
+ </button>
90
+
91
+ </div>
92
+
93
+ </main>
94
+
95
+ <%= javascript_pack_tag 'worktimes/time' %>
96
+
97
+
18
98
 
19
99
  ```
20
100
 
21
101
 
22
102
 
103
+ time.js
104
+
105
+ ```
106
+
107
+ const timer = {
108
+
109
+ pomodoro: 25,
110
+
111
+ shortBreak: 5,
112
+
113
+ longBreak: 15,
114
+
115
+ longBreakInterval: 4,
116
+
117
+ sessions: 0,
118
+
119
+ }
120
+
121
+
122
+
123
+ let interval;
124
+
125
+
126
+
127
+ const mainButton = document.getElementById('js-btn');
128
+
129
+ mainButton.addEventListener('click', () => {
130
+
131
+
132
+
133
+ const { action } = mainButton.dataset;
134
+
135
+ if (action === 'start') {
136
+
137
+ startTimer();
138
+
139
+ } else {
140
+
141
+ stopTimer();
142
+
143
+ }
144
+
145
+ });
146
+
147
+
148
+
149
+ const modeButtons = document.querySelector('#js-mode-buttons');
150
+
151
+ modeButtons.addEventListener('click', handleMode);
152
+
153
+
154
+
155
+ function getRemainingTime(endTime) {
156
+
157
+ const currentTime = Date.parse(new Date());
158
+
159
+ const difference = endTime - currentTime;
160
+
161
+
162
+
163
+ const total = Number.parseInt(difference / 1000, 10);
164
+
165
+ const minutes = Number.parseInt((total / 60) % 60, 10);
166
+
167
+ const seconds = Number.parseInt(total % 60, 10);
168
+
169
+
170
+
171
+ return {
172
+
173
+ total,
174
+
175
+ minutes,
176
+
177
+ seconds,
178
+
179
+ };
180
+
181
+ }
182
+
183
+
184
+
185
+ function startTimer() {
186
+
187
+ let { total } = timer.remainingTime;
188
+
189
+ const endTime = Date.parse(new Date()) + total * 1000;
190
+
191
+
192
+
193
+ if (timer.mode === 'pomodoro') timer.sessions++;
194
+
195
+
196
+
197
+ mainButton.dataset.action = 'stop';
198
+
199
+ mainButton.textContent = 'stop';
200
+
201
+ mainButton.classList.add('active');
202
+
203
+
204
+
205
+ interval = setInterval(function() {
206
+
207
+ timer.remainingTime = getRemainingTime(endTime);
208
+
209
+ updateClock();
210
+
211
+
212
+
213
+ total = timer.remainingTime.total;
214
+
215
+ if (total <= 0) {
216
+
217
+ clearInterval(interval);
218
+
219
+
220
+
221
+ switch (timer.mode) {
222
+
223
+ case 'pomodoro':
224
+
225
+ if (timer.sessions % timer.longBreakInterval === 0) {
226
+
227
+ switchMode('longBreak');
228
+
229
+ } else {
230
+
231
+ switchMode('shortBreak');
232
+
233
+ }
234
+
235
+ break;
236
+
237
+ default:
238
+
239
+ switchMode('pomodoro');
240
+
241
+ }
242
+
243
+ }
244
+
245
+ }, 1000);
246
+
247
+ }
248
+
249
+
250
+
251
+ function stopTimer() {
252
+
253
+ clearInterval(interval);
254
+
255
+
256
+
257
+ mainButton.dataset.action = 'start';
258
+
259
+ mainButton.textContent = 'start';
260
+
261
+ mainButton.classList.remove('active');
262
+
263
+ }
264
+
265
+
266
+
267
+ function updateClock() {
268
+
269
+ const { remainingTime } = timer;
270
+
271
+ const minutes = `${remainingTime.minutes}`.padStart(2, '0');
272
+
273
+ const seconds = `${remainingTime.seconds}`.padStart(2, '0');
274
+
275
+
276
+
277
+ const min = document.getElementById('js-minutes');
278
+
279
+ const sec = document.getElementById('js-seconds');
280
+
281
+ min.textContent = minutes;
282
+
283
+ sec.textContent = seconds;
284
+
285
+
286
+
287
+ const text = timer.mode === 'pomodoro' ? 'Pomosto' : 'Take a break!';
288
+
289
+ document.title = `${minutes}:${seconds} — ${text}`;
290
+
291
+
292
+
293
+ const progress = document.getElementById('js-progress');
294
+
295
+ progress.value = timer[timer.mode] * 60 - timer.remainingTime.total;
296
+
297
+ }
298
+
299
+
300
+
301
+
302
+
303
+ function switchMode(mode) {
304
+
305
+ timer.mode = mode;
306
+
307
+ timer.remainingTime = {
308
+
309
+ total: timer[mode] * 60,
310
+
311
+ minutes: timer[mode],
312
+
313
+ seconds: 0,
314
+
315
+ };
316
+
317
+
318
+
319
+ document
320
+
321
+ .querySelectorAll('button[data-mode]')
322
+
323
+ .forEach(e => e.classList.remove('active'));
324
+
325
+ document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
326
+
327
+ document.body.style.backgroundColor = `var(--${mode})`;
328
+
329
+ document
330
+
331
+ .getElementById('js-progress')
332
+
333
+ .setAttribute('max', timer.remainingTime.total);
334
+
335
+ updateClock();
336
+
337
+ }
338
+
339
+
340
+
341
+ function handleMode(event) {
342
+
343
+ const { mode } = event.target.dataset;
344
+
345
+
346
+
347
+ if (!mode) return;
348
+
349
+
350
+
351
+ switchMode(mode);
352
+
353
+ stopTimer();
354
+
355
+ }
356
+
357
+
358
+
359
+ document.addEventListener('DOMContentLoaded', () => {
360
+
361
+ switchMode('pomodoro');
362
+
363
+ });
364
+
365
+ ```
366
+
367
+
368
+
369
+
370
+
23
371
  ## 試したこと
24
372
 
25
373
  `document.getElementById('btn').style.display = 'none';`