31:[] 2f:{"title":"Getting Input","cells":[{"id":0,"value":"md`# Getting Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`---\n## Button`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"textChangedByButton = html`

The Window of Change

\nText before.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof buttonWithValue = Button(\"Text on Button\", {\n label: \"Click me:\",\n reduce: functionRunOnClick\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"functionRunOnClick = function() {\n textChangedByButton.innerHTML = `

The Window of Change

\nText after clicking button.

`;\n return \"value of buttonsValue\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"buttonWithValue","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`---\n## Select`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"import { Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"textChangedBySelect = html`

The Window of Change

\nText before.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof selection = Select([\"Nothing\"].concat([\"This\", \"That\", \"The Other\"]), {\n label: \"Choose:\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"{\n let text = ``;\n if (selection == \"Nothing\")\n text = `

The Window of Change

\nText before.

`;\n else\n text = `

The Window of Change

\nText after selecting ${selection}.

`;\n textChangedBySelect.innerHTML = text;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"selection","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`---\n## Text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"import { Text } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"textChangedByText = html`

The Window of Change

\nText before.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof textInput = Text({\n label: \"Type something:\",\n placeholder: \"Yes, type over me ...\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`Try adding \\` submit: true\\` in the code above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n let text = ``;\n if (textInput == \"\")\n text = `

The Window of Change

\nText before.

`;\n else\n text = `

The Window of Change

\nText after: ${textInput}.

`;\n textChangedByText.innerHTML = text;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"textInput","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`---\n## (working on) Keypress inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"whichKey = document.addEventListener('keypress', e => {\n return e.key;\n if (e.key == \"Enter\") return \"Enter pressed\";\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"report = function(theKey) {\n return theKey;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}