Hey!
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?
Thanks!
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
arrayOfSrc.push(“images/pic”+i+".jpg");
}
// Looping through images
for (let i = 0; i < arrayOfSrc.length; i++) {
const newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, arrayOfSrc[i]);
thumbBar.appendChild(newImage);
newImage.onclick = function() { //replacing big img with small
displayedImage.setAttribute('src',arrayOfSrc[i]);
}
}
// Wiring up the Darken/Lighten button
btn.onclick = function() { //changes the bg color on div
if (overlay.style.backgroundColor == ‘rgba(0, 0, 0, 0)’) {
overlay.style.backgroundColor = ‘rgba(0, 0, 0, 0.7)’;
} else {
overlay.style.backgroundColor = ‘rgba(0, 0, 0, 0)’;
}
}
