Interactive Elements in Pluto

[Bob-McCrory]

I'm trying to learn how to develop and add JavaScript interactive elements to a Pluto notebook. Regrettably, I've never used JavaScript before. I would appreciate any pointers to more focused learning material than a general Web design, HTML, CSS, JavaScript book.

Thanks.

[SyxP]

I would provide a possible answer I had, though this is uncommented, and hope that it is helpful.

function ClickCounterWithReset(text = "Click")
	ButtonScript = ["let button$i = div.querySelector(\"button:nth-child($i)\")
		button$i.addEventListener(\"click\", (e) => {
		count = $(i == 1 ? "count + 1" : "0")
		div.value = count
		div.dispatchEvent(new CustomEvent(\"input\"))
		e.preventDefault()})" for i in 1:2]
	
	@htl("""<div>
		<button>$(text)</button>
		<button>Reset</button>
			<script>
			let div = currentScript.parentElement
			let count = 0
			div.value = count
			$(HypertextLiteral.JavaScript(join(ButtonScript, "\n")))
		</script>
	</div>""")
end

[fonsp]

Take a look at the JavaScript sample notebook (from the Pluto main menu), it includes pointers to tutorials and reference material to learn HTML/CSS/JS.

[fonsp]

@Bob-McCrory It looks like you edited your question to ask a completely different question. Don't do that, open a new Discussion item instead.