would like to add animation for clock count down

[cch5ng]

• there's kind of animation for the last minute of the timer
• off the top of my head, I am not sure exactly how this would be done
• don't spend excessive amount of time on this because I am behind the schedule I would like to be on

[cch5ng]

• have a rough prototype of what the animation could look like
  • http://codepen.io/cch5ng/pen/WQeWzN

[cch5ng]

resources:

• https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
• http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
  • see changing element styles
• http://stackoverflow.com/questions/14477746/jquery-css-dynamically-change-attributes-of-a-class
• wonder if this would have been better handled with html canvas

[cch5ng]

sat 5:30p

• http://codepen.io/cch5ng/pen/WQeWzN
• right now the setInterval call to animate() is not updating the display at all
• think there is an issue because I am updating the style of the
  rather than updating the css rule for .rect directly
• http://stackoverflow.com/questions/14477746/jquery-css-dynamically-change-attributes-of-a-class
  • this topic had the correct example for accessing a stylesheet's rule

[cch5ng]

sat 6:17p

• http://codepen.io/cch5ng/pen/WQeWzN
  • base logic is working here (proof of concept that this animation can be done combining css clip-path, svg, js manipulation of css rule)
  • todo: need to figure out all the user interaction use cases
  • for ex. when the remaining time is 59sec, the animation should start (if timer isCountingDown)
  • if user stops timer, the animation should stop
  • if timer is incremented > 1, then rectangle top should be reset and animation turned off
  • also change the rectangle background color (toggle between the session background and break background)

[cch5ng]

note:

• weird that I can test js console.log logic in jsbin, but it was not showing the expected UI behavior
• not sure how to get console.log display from codepen

[cch5ng]

• https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
• https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
• https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule

[cch5ng]

• http://stackoverflow.com/questions/5678040/cssrules-rules-are-null-in-chrome
  • the animate logic only works if the site is accessed from a web server (i.e. python simplehttpserver or codepenio)

[cch5ng]

• residual issues
  • location of animation div is weird
  • the text for the timer name and the remaining time is moving along with the animation