2a:null 2b:["$","title",null,{"children":"Exercise: Creating a Stopwatch | Steve Oney | Observable"}] 30:T609,setTimeout(() => { const startButton = document.getElementById("start-button"); const stopButton = document.getElementById("stop-button"); const resetButton = document.getElementById("reset-button"); const timeDisplay = document.getElementById("time-display"); let lastTime; let countInterval; let clock = 0; function render() { timeDisplay.textContent = Math.round(clock/1000); } function updateClock() { const currentTime = (new Date()).getTime(); const delta = currentTime - lastTime; clock += delta; render(); lastTime = currentTime; } stopButton.setAttribute('disabled', 'true'); resetButton.setAttribute('disabled', 'true'); startButton.addEventListener("click", () => { lastTime = (new Date()).getTime(); countInterval = setInterval(updateClock, 1000); startButton.setAttribute('disabled', 'true'); stopButton.removeAttribute('disabled'); resetButton.removeAttribute('disabled'); }); stopButton.addEventListener("click", () => { clearInterval(countInterval); startButton.removeAttribute('disabled'); stopButton.setAttribute('disabled', 'true'); }); resetButton.addEventListener("click", () => { clearInterval(countInterval); resetButton.setAttribute('disabled', 'true'); stopButton.setAttribute('disabled', 'true'); startButton.removeAttribute('disabled'); clock = 0; render(); }); }, 1000);31:T447,setTimeout(() => { const startButton = document.getElementById("start-button6"); const stopButton = document.getElementById("stop-button6"); const timeDisplay = document.getElementById("time-display6"); let lastTime; let countInterval; let clock = 0; function render() { timeDisplay.textContent = Math.round(clock/1000); } function updateClock() { const currentTime = (new Date()).getTime(); const delta = currentTime - lastTime; clock += delta; render(); lastTime = currentTime; } stopButton.setAttribute('disabled', 'true'); startButton.addEventListener("click", () => { lastTime = (new Date()).getTime(); countInterval = setInterval(updateClock, 1000); startButton.setAttribute('disabled', 'true'); stopButton.removeAttribute('disabled'); }); stopButton.addEventListener("click", () => { clearInterval(countInterval); startButton.removeAttribute('disabled'); stopButton.setAttribute('disabled', 'true'); }); }, 1000);32:T60d,setTimeout(() => { const startButton = document.getElementById("start-button7"); const stopButton = document.getElementById("stop-button7"); const resetButton = document.getElementById("reset-button7"); const timeDisplay = document.getElementById("time-display7"); let lastTime; let countInterval; let clock = 0; function render() { timeDisplay.textContent = Math.round(clock/1000); } function updateClock() { const currentTime = (new Date()).getTime(); const delta = currentTime - lastTime; clock += delta; render(); lastTime = currentTime; } stopButton.setAttribute('disabled', 'true'); resetButton.setAttribute('disabled', 'true'); startButton.addEventListener("click", () => { lastTime = (new Date()).getTime(); countInterval = setInterval(updateClock, 1000); startButton.setAttribute('disabled', 'true'); stopButton.removeAttribute('disabled'); resetButton.removeAttribute('disabled'); }); stopButton.addEventListener("click", () => { clearInterval(countInterval); startButton.removeAttribute('disabled'); stopButton.setAttribute('disabled', 'true'); }); resetButton.addEventListener("click", () => { clearInterval(countInterval); resetButton.setAttribute('disabled', 'true'); stopButton.setAttribute('disabled', 'true'); startButton.removeAttribute('disabled'); clock = 0; render(); }); }, 1000);33:[{"id":"1193fcb8eefcdc7298278138b0e51c2b36fc7bd5a96fb2b28c7925e6bd948acccf3304ecbb26741fb93fbac4e1c8e1f8a6a929989b378b6402f7b20da04fd101","href":"https://static.observableusercontent.com/files/1193fcb8eefcdc7298278138b0e51c2b36fc7bd5a96fb2b28c7925e6bd948acccf3304ecbb26741fb93fbac4e1c8e1f8a6a929989b378b6402f7b20da04fd101","name":"javascript_books.jpg","type":"image/jpeg","lastModified":1612880071160.201,"size":810742}] 2e:{"id":"ba085856b6a45c8b","slug":"si-579-lecture-7","title":"Exercise: Creating a Stopwatch","thumbnail":"51b43e38af9399dfffc1a368437f4fa34a0e1a2f8007834d20ec95d70b7fec40","access_level":"public","create_time":"$D2021-02-09T04:55:41.815Z","update_time":"$D2023-10-02T17:49:13.201Z","view_time":null,"first_public_time":"$D2021-02-09T04:55:46.562Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":220,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercise: Creating a Stopwatch","cells":[{"id":0,"value":"md`# Exercise: Creating a Stopwatch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`\n## Fun Thing of the Day: Unix Time\n\nHow does your computer measure time? Internally, it measures it as the number of **seconds since Midnight on January 1st, 1970 UTC**.\n\nThat means:\n\n- This lecture started at \\`1612985400\\` in Unix time.\n- Friday, February 13 2009 6:31:30 PM was \\`1234567890\\`\n- Sunday, February 7 2106 will be \\`4294967295\\` seconds which, for systems that hold the time on 32-bit unsigned integers, is the maximum attainable. For some of these systems, the next second will be incorrectly interpreted as 00:00:00 Thursday 1 January 1970 UTC. [(source)](https://en.wikipedia.org/wiki/Unix_time)\n\nJavaScript measures time similarly except it measures it in milliseconds rather than in seconds.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md`\nTo get the current time in JavaScript, we can run:\n\n\\`\\`\\`JavaScript\n(new Date()).getTime()\n\\`\\`\\`\n\nThe \\`new Date()\\` creates a new JavaScript \\`Date\\` object (which JavaScript uses to track dates), with the current time. The \\`.getTime()\\` method gets the timestamp.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"(new Date()).getTime()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"{\n setInterval(() => {\n const timestamp = document.getElementById(\"the_current_timestamp\");\n timestamp.textContent = \"The (JavaScript) time is: \" + (new Date()).getTime() + \". That is the number of milliseconds that have passed since midnight on January 1st, 1970\";\n }, 500);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"md`\nUtility for measuring Unix time: [https://soney.github.io/unxtme/](https://soney.github.io/unxtme/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"md`\n## Exercise: Making a Timer\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"html`\n\n\n\n \n \n \n \n

Stopwatch

\n 0\n \n

\n \n \n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"### Step 0: Create the body of the page","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":206,"value":"\n\n\n \n \n \n \n

\n 0\n

\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`\n### Step 1: Display the Current Time\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"setTimeout(() => {\n const timeDisplay = document.getElementById(\"time-display1\");\n\n let clock = 0;\n \n function render() {\n timeDisplay.textContent = Math.round(clock/1000);\n }\n function updateClock() {\n clock = (new Date()).getTime();\n render();\n }\n const countInterval = setInterval(updateClock, 1000);\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"md`\n### Step 2: Display the Number of Seconds since Loading the Page\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"setTimeout(() => {\n const timeDisplay = document.getElementById(\"time-display2\");\n const loadTime = (new Date()).getTime();\n let clock = 0;\n \n function render() {\n timeDisplay.textContent = Math.round(clock/1000);\n }\n function updateClock() {\n clock = (new Date()).getTime() - loadTime;\n render();\n }\n const countInterval = setInterval(updateClock, 1000);\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md`\n### Step 3: Add a \"start\" button\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"setTimeout(() => {\n const timeDisplay = document.getElementById(\"time-display3\");\n const startButton = document.getElementById(\"start-button3\");\n\n let lastTime;\n let clock = 0;\n let countInterval;\n \n function render() {\n timeDisplay.textContent = Math.round(clock/1000);\n }\n function updateClock() {\n clock = (new Date()).getTime() - lastTime;\n render();\n }\n startButton.addEventListener(\"click\", () => {\n lastTime = (new Date()).getTime();\n countInterval = setInterval(updateClock, 1000);\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"md`\n### Step 4: Disable the \"start\" button when it is clicked\n\nDo this by setting the \\`disabled\\` attribute in JavaScript\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"setTimeout(() => {\n const timeDisplay = document.getElementById(\"time-display4\");\n const startButton = document.getElementById(\"start-button4\");\n\n let lastTime;\n let clock = 0;\n let countInterval;\n \n function render() {\n timeDisplay.textContent = Math.round(clock/1000);\n }\n function updateClock() {\n clock = (new Date()).getTime() - lastTime;\n render();\n }\n startButton.addEventListener(\"click\", () => {\n lastTime = (new Date()).getTime();\n countInterval = setInterval(updateClock, 1000);\n startButton.setAttribute('disabled', 'true');\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`\n### Step 5: Add a \"stop\" button\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"setTimeout(() => {\n const startButton = document.getElementById(\"start-button5\");\n const stopButton = document.getElementById(\"stop-button5\");\n const timeDisplay = document.getElementById(\"time-display5\");\n \n let lastTime;\n let countInterval;\n let clock = 0;\n \n function render() {\n timeDisplay.textContent = Math.round(clock/1000);\n }\n function updateClock() {\n const currentTime = (new Date()).getTime();\n const delta = currentTime - lastTime;\n clock += delta;\n render();\n lastTime = currentTime;\n }\n \n startButton.addEventListener(\"click\", () => {\n lastTime = (new Date()).getTime();\n countInterval = setInterval(updateClock, 1000);\n startButton.setAttribute('disabled', 'true');\n stopButton.removeAttribute('disabled');\n });\n stopButton.addEventListener(\"click\", () => {\n clearInterval(countInterval);\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"md`\n### Step 6 Re-enable the \"start\" button when stopped\n\nDo this by removing the \\`disabled\\` attribute\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n

\n \n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"md`\n### Step 7 Add a \"reset\" button\n\nNote that you will need to update the logic for when certain buttons are enabled or disabled.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"html`\n\n\n\n \n \n \n \n

\n 0\n \n

\n \n \n \n

\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"