[#3] 途中

app/assets/javascripts/timer.js

@@ -1,99 +1,30 @@
-var timer1; //タイマーを格納する変数（タイマーID）の宣言
+document.addEventListener('DOMContentLoaded', function() {
 
+        document.getElementById('btn').addEventListener('click', function() {
+            toggleBtnFunction();
+        })
 
-//カウントダウン関数を1000ミリ秒毎に呼び出す関数
-function cntStart()
-{
-    document.timer.elements[2].disabled=true;
-    timer1=setInterval("countDown()",1000);
-}
-
-//タイマー停止関数
-function cntStop()
-{
-    document.timer.elements[2].disabled=false;
-    clearInterval(timer1);
-}
-
-//カウントダウン関数
-function countDown()
-{
-    var min=document.timer.elements[0].value;
-    var sec=document.timer.elements[1].value;
-
-    if( (min=="") && (sec=="") )
-    {
-        alert("時刻を設定してください！");
-        reSet();
-    }
-    else
-    {
-        if (min=="") min=0;
-        min=parseInt(min);
-
-        if (sec=="") sec=0;
-        sec=parseInt(sec);
-
-        tmWrite(min*60+sec-1);
-    }
-}
-
-//残り時間を書き出す関数
-function tmWrite(int)
-{
-    int=parseInt(int);
+        document.getElementsByClassName('start-timer').addEventListener('click', function() {
+            startTimer();
+        })
 
-    if (int<=0)
-    {
-        reSet();
-        alert("時間です！");
+        document.getElementsByClassName('stop-timer').addEventListener('click', function() {
+            stopTimer();
+        })
     }
-    else
-    {
-        //残り分数はintを60で割って切り捨てる
-        document.timer.elements[0].value=Math.floor(int/60);
-        //残り秒数はintを60で割った余り
-        document.timer.elements[1].value=int % 60;
+)
+
+function toggleBtnFunction() {
+    var button = document.getElementById('btn');
+    if(button.value == 'Start') {
+        button.value = 'Stop';
+        button.className = 'stop-timer';
+    } else if(button.value == 'Stop') {
+        button.value = 'Start';
+        button.className = 'start-timer';
     }
 }
 
-//フォームを初期状態に戻す（リセット）関数
-function reSet()
-{
-    document.timer.elements[0].value="0";
-    document.timer.elements[1].value="0";
-    document.timer.elements[2].disabled=false;
-    clearInterval(timer1);
-}
-
-//memo
-// setInterval: 一定時間ごとに特定の処理を繰り返す
-// setTimeout: 一定時間後に特定の処理を行う。
-
-// 休憩タイマーの関数
-// pomoタイマーの関数
-// stopPomoTimer関数 → タイマーを止めて送信, タイマーをリセットして休憩タイマーをスタートする。
-
-function startPomoTimer() {
-    var seconds = 2;
-    var minutes_window = document.getElementById('minutes');
-    minutes_window.innerHTML = seconds;
-    timee = setInterval(setTime, 1000);
-    startRestTimer
-}
-
-function setTime() {
-    var minutes_window = document.getElementById('minutes');
-    var seconds_window = document.getElementById('seconds');
-    minutes_window.innerHTML -= 1;
-    if (minutes_window.textContent == 0) {
-        alert( 'yakiniku' );
-        clearInterval(timee);
-    }
-}
-
-function stopPomoTimer() {}
-
-function startRestTimer() {}
+function startTimer() {
 
-function stopRestTimer() {}
+}

app/views/pomos/_form.html.erb

@@ -44,12 +44,6 @@
   </div>
 
 <% end %>
-  <form name="timer">
-    <input type="text" value="">分
-    <input type="text" value="">秒<br>
-    <input type="button" value="スタート" onclick="cntStart()">
-    <input type="button" value="ストップ" onclick="cntStop()">
-  </form>
 
 <br/>
 <br/>
@@ -65,8 +59,8 @@ debug
 経過秒数   <span id="passage"></span>
 <br/>
 
-<input type="button" value="startPomoTimer" onclick="startPomoTimer();" />
-<input type="button" value="stopPomoTimer" />
+<input type="button" id="btn" class="start-timer" value="Start"/>
+
 <br/>
 <br/>
 <br/>