diff --git a/js/timer.js b/js/timer.js index 6b4505b..0347a74 100644 --- a/js/timer.js +++ b/js/timer.js @@ -8,22 +8,55 @@ function startTimer(duration, display) { seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; + + fadeTimer(); if (--timer < 0) { timer = duration; - + // Put all CSS back to First Iteration clearInterval(interval); - + document.getElementById("Pulse").style.animation = ""; + document.getElementById("Start").style.display = ""; } }, 1000); - } window.onclick = function () { - var oneMinute = 60, - display = document.getElementById('Timer'); + display = document.getElementById('Timer'); + var oneMinute = 5 ; //, + // display = document.getElementById('Timer'); startTimer(oneMinute, display); - - -}; \ No newline at end of file +}; + + +var display = document.getElementById('Timer'); + +function fadeTimer() { + console.log("Display: ") + var fadeEffect = setInterval(function () { + if (!display.style.opacity) { + display.style.opacity = 1; + } + if (display.style.opacity > 0) { + display.style.opacity -= 0.05; + } else { + clearInterval(fadeEffect); + } + }, 100); + } + +display.onclick = function showTimer () { + console.log("Display2: ") + //TODO fix damit man den Timer wieder einblenden kann + var showEffect = setInterval(function () { + if (!display.style.opacity) { + display.style.opacity = 1; + } + if (display.style.opacity < 1) { + display.style.opacity += 0.5; + } else { + clearInterval(showEffect); + } + }, 100); + } \ No newline at end of file diff --git a/todo.txt b/todo.txt index 28e9c17..5e9625b 100644 --- a/todo.txt +++ b/todo.txt @@ -7,10 +7,11 @@ pulse.css - [ ] Einstellungen für todo highlight aus thinkpad übernehmen -- [ ] create timer +- [x] create timer - [ ] timer stops --> restart - [ ] "START" reappears -- [ ] timer hide after 2s , reappear on touch +- [x] timer hide after 2s , +- [ ] reappear on touch - [ ] service worker fixen