You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
900 B
JavaScript
32 lines
900 B
JavaScript
const displayedImage = document.querySelector('.displayed-img');
|
|
const thumbBar = document.querySelector('.thumb-bar');
|
|
|
|
const btn = document.querySelector('button');
|
|
const overlay = document.querySelector('.overlay');
|
|
|
|
//Looping image
|
|
|
|
for (let i = 1; i <= 5; i++) {
|
|
const newImage = document.createElement('img');
|
|
newImage.setAttribute('src', 'pic' + i + '.jpg');
|
|
thumbBar.appendChild(newImage);
|
|
newImage.onclick = function (e) {
|
|
displayedImage.src = e.target.src;
|
|
}
|
|
}
|
|
|
|
//Adding darken effect and revert option
|
|
|
|
btn.onclick = function () {
|
|
const btnClass = btn.getAttribute('class');
|
|
if (btnClass === '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)';
|
|
}
|
|
}
|