This clock app was built on a base of HTML and CSS. Hiding the clock, rendering the clock, and logic, were done with jQuery.
How it works: The clock app is made of two separate parts. The initial button asking the user what time it is, and the second section which contains the actual clock and instructions. The div and paragraph tags that contain both the clock and instructions are built into the HTML, but are initially hidden by jQuery. When the "what time is it?" button is clicked, jQuery is used to: (1) hide the "what time is it?" button, and (2) separate the time into hours, minutes, and seconds. After that a function is called to add 0 before any number under 10, whether it be in hours, minutes, or seconds. For hours, right before checking if the hour is under 10, another function converts the hour from military time to standard. Right at the end of the main function the hours, minutes, and seconds are concatenated and rendered inside of the clock div, which then makes use of fadeIn.
Freezing time is just a matter of checking if a variable called "timer" exists, and if it does, clearing it out. And if it doesnt (which it wont after you first click it), to run the entire clock function again.
see on codepenClick the clock to freeze time. Click again to restart time.
