30:T4fa,viewof image = { const files = [ ["Beastie Boys", FileAttachment("beastie-boys.jpg")], ["Bohemian Rhapsody", FileAttachment("bohemian-rhapsody.jpg")], ["Buy a Boat Cat", FileAttachment("buy-a-boat-cat.jpg")], ["Is This a Pigeon", FileAttachment("is-this-a-pigeon.jpg")], ["Picard Annoyed", FileAttachment("picard-annoyed.jpg")], ["Picard Facepalm", FileAttachment("picard-facepalm.jpg")] ]; const form = html`

`; form.file.onchange = () => { form.select.value = "Other"; form.value = new Promise((resolve, reject) => { const image = new Image; image.src = URL.createObjectURL(form.file.files[0]); image.onload = () => resolve(image); image.onerror = reject; }); form.dispatchEvent(new CustomEvent("input")); }; form.select.onchange = async () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = files[form.select.selectedIndex][1].image(); form.dispatchEvent(new CustomEvent("input")); } }; form.select.selectedIndex = 0; form.select.onchange(); return form; }31:[{"id":"b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","href":"https://static.observableusercontent.com/files/b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","name":"picard-facepalm.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":91853},{"id":"3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","href":"https://static.observableusercontent.com/files/3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","name":"picard-annoyed.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":91822},{"id":"02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","href":"https://static.observableusercontent.com/files/02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","name":"is-this-a-pigeon.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":54721},{"id":"2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","href":"https://static.observableusercontent.com/files/2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","name":"buy-a-boat-cat.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":34772},{"id":"49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","href":"https://static.observableusercontent.com/files/49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","name":"bohemian-rhapsody.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":46848},{"id":"b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","href":"https://static.observableusercontent.com/files/b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","name":"beastie-boys.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":73554}] 2e:{"title":"Meme Generator","cells":[{"id":0,"value":"md`# Meme Generator\n\nI’m sorry. Right click to save or copy the image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"canvas = {\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n const context = DOM.context2d(width, height, 1);\n context.canvas.style.maxWidth = \"100%\";\n context.drawImage(image, 0, 0);\n context.font = `${fontSize}px ${fontFamily}`;\n context.textAlign = \"center\";\n context.fillStyle = \"#fff\";\n context.lineWidth = 3;\n context.lineJoin = \"round\";\n context.textBaseline = \"top\";\n context.strokeText(toptext, width / 2, height * padding);\n context.fillText(toptext, width / 2, height * padding);\n context.textBaseline = \"bottom\";\n context.strokeText(bottomtext, width / 2, height * (1 - padding));\n context.fillText(bottomtext, width / 2, height * (1 - padding));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof toptext = textarea({placeholder: \"Enter top text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof bottomtext = textarea({value: \"memes\", placeholder: \"Enter bottom text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof fontFamily = {\n const form = html`\n \n \n`;\n form.text.oninput = () => form.value = form.text.value;\n form.select.onchange = () => {\n if (form.select.value === \"Other\") {\n form.text.style.display = \"inline\";\n form.text.select();\n form.value = form.text.value;\n } else {\n form.text.style.display = \"none\";\n form.value = form.select.value;\n }\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof fontSize = {\n const form = html`\n \n \n

`;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px font-size`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof padding = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed(0)}% padding`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function textarea({value = \"\", placeholder = \"Enter text here\"}) {\n const textarea = html``;\n textarea.placeholder = placeholder;\n textarea.value = value;\n textarea.style = `\n display: block;\n box-sizing: border-box;\n width: calc(100% + 28px);\n font: var(--mono_fonts);\n border: none;\n padding: 6px 10px;\n margin: 0 -14px;\n background: rgb(247,247,249);\n `;\n return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}