As I delve into the world of JS/HTML5/CSS3, I have been immersing myself in code examples from three different authors and combining and modifying them to enhance my learning. You can find my work-in-progress Pen, with references to the original authors, right here:
http://codepen.io/Widgeteria/pen/jqpyYb
My current challenge revolves around making the time element invisible within the narrow blue vertical Task Clock section (activated by clicking on the start button) when switching to either the Dropzone or Notes sections.
I have experimented with various approaches, including embedding CSS rules, but I have not been successful in making the faint clock numerals disappear from the vertical section box after transitioning to another section.
Here is the structure of the clock as it stands:
<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
My goal is to hide the <time> tag when the focus shifts to a section other than Task Clock and then make it visible again upon returning.
Another issue I am grappling with is adjusting the JavaScript so that the clock does not continue running if the Start button is clicked twice.
If you have any insights on how to tackle either of these challenges, I would greatly appreciate your input!