const imgArray = [“balloons1.jpg”, “balloons2.jpg”, “balloons3.jpg”, “balloons4.jpg”, “balloons5.jpg”]
const imgText = {
balloons1 : “gobito 1”,
balloons2 : “gobito 2”,
balloons3 : “gobito 3”,
balloons4 : “gobito 4”,
balloons5 : “gobito 5”
}
const mainImg = document.getElementsByClassName(‘full-img’)[0];
var thumbBar = document.getElementsByClassName(‘thumb-bar’)[0];
for (var img of imgArray){
var miImg = document.createElement(‘img’)
miImg.src = img
thumbBar.appendChild(miImg)
miImg.addEventListener(‘click’, newImg)
function newImg(event){
let selectedImg = event.target
let currentSrc = selectedImg.getAttribute(“src”)
let currentImg = document.getElementsByClassName(‘displayed-img’)[0]
currentImg.setAttribute(“src”, currentSrc);
}
}
const btn = document.getElementsByTagName(‘button’)[0]
btn.addEventListener(‘click’, darkMode)
function darkMode(){
if(btn.getAttribute(‘class’) === ‘dark’){
btn.setAttribute(‘class’, ‘light’)
btn.textContent = “Light”
mainImg.style.filter = ‘brightness(0.5)’
}
else{
btn.setAttribute(‘class’, ‘dark’)
btn.textContent = “Dark”
mainImg.style.filter = ‘brightness(1)’
}
}