2a:null 2b:["$","title",null,{"children":"Exercises: Basic Interactivity | Steve Oney | Observable"}] 30:[{"id":"1046143ae472a208837e6a7789426fdec460bbf7c33293664b180f9b1543222010caeb615d2ee0024e0e2af3c4734ced0b59bbe2667c9debf21b71e49fa67383","href":"https://static.observableusercontent.com/files/1046143ae472a208837e6a7789426fdec460bbf7c33293664b180f9b1543222010caeb615d2ee0024e0e2af3c4734ced0b59bbe2667c9debf21b71e49fa67383","name":"buddys.mp4","type":"video/mp4","lastModified":1612376661479.776,"size":12134311}] 2e:{"id":"29d67f3ff13895c3","slug":"si-579-lecture-5","title":"Exercises: Basic Interactivity","thumbnail":"ca9173b00896f394c9f3dd125e161402ca6ba62fd38d0b4247e828f230066d7d","access_level":"public","create_time":"$D2021-02-03T18:22:34.384Z","update_time":"$D2023-10-02T17:47:27.639Z","view_time":null,"first_public_time":"$D2021-02-03T18:34:37.601Z","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":87,"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":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercises: Basic Interactivity","cells":[{"id":0,"value":"md`# Exercises: Basic Interactivity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`\n## Imperfect UI of the Day\n\nComes via the [Buddy's Pizza](https://www.buddyspizza.com/) iOS App. Note in the \"Select Location\" page how \"Pickup\" and \"Delivery\" and \"Curbside\" look like buttons. Also, note the unecessary radio buttons in the \"Select Location\" page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`\n## [Mixing in JavaScript](https://observablehq.com/@soney/mixing-in-javascript)\n## [JavaScript Basics](https://observablehq.com/@soney/javascript-basics)\n## [Manipulating the DOM with JavaScript](https://observablehq.com/@soney/manipulating-the-dom-with-javascript)\n## [Introduction to JavaScript Callbacks](https://observablehq.com/@soney/introduction-to-javascript-callbacks)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`\n# Exercise: Basic Interactivity\n\nWrite code that creates a box and **using JavaScript**, toggles between making the box red and blue every 2 seconds.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"html`\n\n \n \n \n \n

\n \n \n\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"setInterval(() => {\n const box = document.getElementById(\"thebox\");\n const cl = box.getAttribute(\"class\");\n if(cl === \"color1\") {\n box.setAttribute(\"class\", \"color2\");\n } else {\n box.setAttribute(\"class\", \"color1\");\n }\n}, 20000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"## [Manipulating the DOM with JavaScript](https://observablehq.com/@soney/manipulating-the-dom-with-javascript)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"