Image gallery

gistfile1.txt

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */
for (let i=1; i<=5; i++){
	const newImage = document.createElement('img');
	newImage.setAttribute('src', "pic"+i+".jpg");
	thumbBar.appendChild(newImage);
	
	newImage.addEventListener("click", function(){
		document.getElementById("mainImage").src = "pic"+i+".jpg";
	});
}
/* Wiring up the Darken/Lighten button */
let currentState = btn.getAttribute("class");
if (currentState === "dark"){
	btn.addEventListener("click", function() {
		btn.textContent = "Lighten";
		btn.setAttribute("class", "light");
		overlay.style.backgroundColor="rgba(0,0,0,0.5)";
	});
}
if (currentState === "light"){
	btn.addEventListener("click", function() {		
	btn.textContent = "Darken";
	btn.setAttribute("class", "dark");
	overlay.style.backgroundColor="rgba(0,0,0,0)";
	});
}

Note: I didn't touch the CSS/HTML file, except I just added an ID to the <img class="displayed-img" id="mainImage" src="images/pic1.jpg">