JavaScript-powered Image Gallery Assessment Wanted

Here is me trying to do the image gallery exercise without looking at the “steps to complete”.

I was hopping to get an idea of how can I do the first section of the exercise in a more efficient way (i didnt like the fact that i used a number inside the condition, this would not be very good for bigger project).
Maybe I can use some string methods and get the last number of image in the folder and then use this info to make a loop until I reach that last image?
Just something that will make the program run if say I had 1,000 images in side the folder and I could not count how many I have.

I’m also wondering if the rest of the exercise is alright or can I improve on it?

Here is my code (only js):

const displayedImage = document.querySelector(’.displayed-img’); //big image
const thumbBar = document.querySelector(’.thumb-bar’); //small images bar

const btn = document.querySelector(‘button’); //darken btn
const overlay = document.querySelector(’.overlay’); //darken div

// Makeing and array of src codes for images
let arrayOfSrc = [];

for (let i = 1; i <= 5; i++) { //5 is for the existing number of images in folder

// Looping through images
for (let i = 0; i < arrayOfSrc.length; i++) {
const newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, arrayOfSrc[i]);

newImage.onclick = function() {  //replacing big img with small


// Wiring up the Darken/Lighten button
btn.onclick = function() { //changes the bg color on div
if ( == ‘rgba(0, 0, 0, 0)’) { = ‘rgba(0, 0, 0, 0.7)’;
} else { = ‘rgba(0, 0, 0, 0)’;