click on a site to add a new image in Squarespace? with Javascript?

Site URL: https://amphibian-pineapple-742d.squarespace.com/portfolio-fluid

I am tying to implement a code I got from a superhi tutorial on a squarespace site. I want to have a gallery that doesn't appear until you click. Like this site - studio-push.com

I have the script written - just not sure how to implement it in squarespace..... any ideas?

// JavaScript to reveal image on click. 

const images = [
	"Folio-1.jpg",
	"Folio-2.jpg",
	"Folio-3.jpg"
]

let i = 0 

function placeImage(x, y){
	
	const nextImage = images[i]
	const img = document.createImage("img")
	img.setAttribute("src", nextImage)
	img.style.left = x + "px"
	img.style.top = y + "px"
	
	
	// if you want to rotate...
	//img.style.transform = "rotate (" + (Math.random() * 20 - 10) + "deg)"
	
	img.style.transform = "translate(-50%,-50%) scale(0.5)"
	
	document.body.appendChild(img) 
	
	i = i + 1
	
	if (i >= images.length) {
		i = 0 
	}
	
}

document.addEventListener("click", function(event){
	
	event.preventDefault()
	placeImage(event.pageX,event.pageY )
	
})


///on mobile 

document.addEventListener("touchend", function(event){
	
	event.preventDefault()
	placeImage(event.pageX,event.pageY )
	
})

This code works when I use on the SuperHi site but just cant quite wrap my head around how to implement it in squarespace.... 

Added this in the code Injection footer: 

<!-- Image adder -->
<script src="/s/imageadder.js"></script>
<!-- Image Adder -->

then added the imageadder.js file into site as a link.... 

Just can't figure out the next steps... code block with something like this where images are in a page with a gallery?? 

<article class="imageadder" data-url=“/portfolio”></article>

Would greatly appreciate some help with this @creedon @tuanphan or anyone! 
ps site is under development but page is :https://amphibian-pineapple-742d.squarespace.com/portfolio-fluid

password: sos