"Image gallery" assessment

MDN Learn
#53

Thanks for your response!

#54

Hi There,

                  I had a similar image gallery on [mysite](http://www.bitwallet.org/) , but i updated that to a new JS based gallery.

thanks for the info.

#55

why does it work properly when i use directly newImage.src in this loop?

image
image.png1363×637 200 KB

#57

Hi, i’m new here pls assess my code

let displayedImage = document.querySelector('.displayed-img');
let thumbBar = document.querySelector('.thumb-bar');
let btn = document.querySelector('button');
let overlay = document.querySelector('.overlay');

for(let i = 1; i <= 5; i++) {
let newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i +'.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function() {
let imageReplace = newImage.getAttribute('src');
displayedImage.setAttribute('src', imageReplace);
}
}

btn.onclick = function() Preformatted text{
let classCheck = btn.getAttribute('class');
if(classCheck === '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)';
}
}

#58

Hi @740479865 — your code is working because you have used an array to store the image names and then set the src values directly from those in each step. We don’t use an array but use a separate function.

Both techniques work pretty reasonably.

#59

Hello there @papans.maxkeeble!

I’ve checked your code out, and it looks to be working perfectly. Great work!

#60

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);

#61

Hello, @Emmanuel_A_Valdez, and welcome to our community! I am so glad that you kept working on this exercise — you have ended up with a really good set of code, which works well.

The only thing I noticed that you should change is as follows — this line uses backslashes in the image paths:

var imgArray = [‘images\pic1.jpg’, ‘images\pic2.jpg’, ‘images\pic3.jpg’, ‘images\pic4.jpg’, ‘images\pic5.jpg’];

You should replace those with forward slashes, like so:

var imgArray = ['images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg'];

This is because web servers in general use forward slashes — this code would break if you tried to run it through a server (and indeed, on my Mac). I’m guessing you are using a Windows machine for your coding? Windows tends to be more permissive when using backslashes.

#62

Thanks for the assessment and tip. Noted.

#63

Hi everyone! Hope you’re having fun. I have just finished my image gallery and hope it can be accessed. Do find my main.js file below:

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 */

for (let i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', `images/pic${i}.jpg`);
  thumbBar.appendChild(newImage);
  newImage.onclick = function(e) {
    newImage = e.target.getAttribute('src');
    displayedImage.setAttribute('src', newImage);
  }
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function() {
  if (btn.getAttribute('class') === '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)';
  }
}

Many thanks.

#64

Hi @samuel,

I just got back off holiday, so having less fun than I was last week :wink:

I looked through your code, and tested it, and it works perfectly. Nice usage of a template literal inside the for loop as well. I’d give this full marks; well done!

1 Like
#65

Good to know you’re back @chrisdavidmills. Many thanks for the assessment. I’m loving this.

#67

Hi, hope whoever reads this is doing well.

Here’s my code for the project. I did the project without looking at the suggestions, so it’s a little different from the official code. I was hoping someone could assess my code:

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */
for (let i = 1; i < 6; i++) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' +  i + '.jpg');
  thumbBar.appendChild(newImage);

  newImage.onclick = function () {
    displayedImage.setAttribute('src', this.getAttribute('src'));
  };
}

/* Wiring up the Darken/Lighten button */
btn.onclick = function () {
  if (btn.innerHTML === 'Darken') {
    overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
    btn.innerHTML = 'Lighten';
  } else {
    overlay.style.backgroundColor = 'rgba(0,0,0,0)';
    btn.innerHTML = 'Darken';
  }
};

Thanks a lot. All the best!

#68

@Isaac-Svi hi there, and thanks for sending in your code! I have tested this, and it works really well — probably more efficient than our original version in fact :wink:

Well done on some great work!

#69

Hi, thank you so much for your assessment! Very much appreciated. Have a great day. :smile:

#70

Here’s mine

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 */
for(let i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);

  newImage.addEventListener('click', function(e) {
    let src = e.target.getAttribute('src');
    displayedImage.setAttribute('src', src);
  });
}

/* Wiring up the Darken/Lighten button */
btn.addEventListener('click', function() {
  if (btn.getAttribute('class') === '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)';
  }
})
1 Like
#71

Hi there @abdi.faishal, and welcome to our community! Thank you for sending in your code. I’ve tested it, and it works perfectly; well done on some great work!

#72

Hi,

I’m confused about the first point under Adding an onclick handler to each thumbnail image. It says

Using newImage won’t work, as the loop is completed before the event handlers are applied; doing it this way would result in the src value of the last <img> being returned in every case.

However, for me it works just fine. I used

newImage.onclick = function() {
  displayedImage.src = newImage.src;
}

The solution instead uses

newImage.onclick = function(event) {
  displayedImage.src = event.target.src;
}

(The solution also uses getAttribute and setAttribute instead of the dot notation, but this doesn’t matter for the above.)

I am confused to what is the difference between using myImage and event.target, when my code works just fine?

#73

@gerfolder thanks for sharing your solution here. The way that I was doing it was just needlessly overcomplicated. I’ve updated the assessment description and files to your solution instead :wink:

#74

Image gallery

Hi everyone!Please review my JS code)

var displayedImage = document.querySelector(".displayed-img");
var thumbBar = document.querySelector(".thumb-bar");

btn = document.querySelector("button");
var overlay = document.querySelector(".overlay");

/* Looping through images */

for (var i = 1; i <= 5; i ++) {
  var newImage = document.createElement("img");
  newImage.setAttribute("src", "images/pic" + i + ".jpg");
  thumbBar.appendChild(newImage);  
    
  newImage.onclick = function (e) {      
    var imgAttr = e.target.getAttribute("src");      
    displayedImage.setAttribute("src", imgAttr);
  }     
}
  
/* Wiring up the Darken/Lighten button */
  
btn.onclick = function () {
  var btnAttr = btn.getAttribute("class");
  if (btnAttr === "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)";
   }
}