Hi Guys,
I’m working through the JS course and have just finished the img gallery project.
I had been getting through the course and it’s exercises rather quickly until I got to this one. Found it to be pretty challenging and frustrating at times but I managed to sort it out after 3 days working on it.
Here is my solution:
var displayedImage = document.querySelector(’.displayed-img’);
var thumbBar = document.querySelector(’.thumb-bar’);
var btn = document.querySelector(‘button’);
var overlay = document.querySelector(’.overlay’);
/* Looping through images */
var imgArray = [‘images\pic1.jpg’, ‘images\pic2.jpg’, ‘images\pic3.jpg’, ‘images\pic4.jpg’, ‘images\pic5.jpg’];
for (var i = 0; i < imgArray.length; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, imgArray[i]);
thumbBar.appendChild(newImage);
function imgDisplay(e) {
var newSrc = e.target.getAttribute(‘src’);
displayedImage.setAttribute(‘src’, newSrc);
}
newImage.addEventListener(‘click’, imgDisplay);
}
/* Wiring up the Darken/Lighten button */
function btnAction() {
var btnClassName = btn.getAttribute(‘class’);
if (btnClassName === ‘dark’) {
btn.setAttribute(‘class’, ‘light’);
btn.textContent = ‘lighten’;
overlay.style.backgroundColor = “rgba(0,0,0,0.5)”;
} else {
btn.setAttribute(‘class’, ‘dark’);
btn.textContent = ‘darken’;
overlay.style.backgroundColor = “rgba(0,0,0,0)”;
}
}
btn.addEventListener(‘click’, btnAction);