Public
Edited
Oct 20, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("spongebob.png").image({width: 200})
Insert cell
FileAttachment("Futurama-Fry.jpg").image({width: 200})
Insert cell
Insert cell
images = ({
spongebob: FileAttachment("spongebob.png"),
fry: FileAttachment("Futurama-Fry.jpg")
})
Insert cell
Insert cell
async function makeMeme(imgName, topText, bottomText) {
let img = await images[imgName].image();
// This simply returns some HTML with a bolded paragraph above and below the image
return html`
<p><strong>${topText}</strong></p>
${img}
<p><strong>${bottomText}</strong><p>
`
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
makeMeme("spongebob", "Other people: That spongebob meme isn't funny", "Me: ThAt SpOnGeBoB mEmE iSn'T fUnNy")
Insert cell
Insert cell
Insert cell
viewof selectedMeme = Inputs.select(Object.keys(images), {label: "Select your meme template: "})
Insert cell
Insert cell
selectedMeme
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof text = Inputs.text({label: "Top Text", placeholder: "Top caption here"})
Insert cell
viewof text2 = Inputs.text({label: "Bottom Text", placeholder: "Bottom caption here", submit:true})
Insert cell
makeMeme(selectedMeme, text, text2)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more