"Image gallery" assessment

hollydavis541 · May 9, 2019, 4:45pm

At the start of the JS file, two variables are defined, but for the third line of code, “btn” doesn’t have “var” in front of it. Why is this? Thanks!

var displayedImage = document.querySelector(’.displayed-img’);
var thumbBar = document.querySelector(’.thumb-bar’);
btn = document.querySelector(‘button’);

chrisdavidmills · May 13, 2019, 10:21am

Hi @hollydavis541,

Hope you are well; thanks for posting to our discourse forum. You have uncovered a minor error in our code. The line is wrong, and should be

var btn = document.querySelector(‘button’);

This is the first time btn appears in the code — where we first initialise and declare it. So really we should give it the proper initialization keyword (var, or in more modern JS you might use const, as the value of btn never changes in the code.)

In many cases, not including the keyword won’t cause any problems, but it is a good practice to always include it as it can cause unexpected behaviour. For example the variable will automatically become part of the global scope, no matter where you initialise it…

chrisdavidmills · May 13, 2019, 10:21am

@hollydavis541 I fixed it in our source code now, BTW.

Tom-Vanderboom · May 19, 2019, 1:53pm

hello, everyone, I had just finished the assessment ‘Image gallery’, could someone make some comments about my code? thanks.

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

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

function setDisplayedImage(src) {
  displayedImage.setAttribute('src', src);
}

/* Looping through images */
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(e) {
    setDisplayedImage(e.target.getAttribute('src'));
  }
}
/* Wiring up the Darken/Lighten button */
btn.onclick = function(e) {
  let btnClass = e.target.getAttribute('class');
  if(btnClass == 'dark') {
    e.target.setAttribute('class', 'light');
    e.target.textContent = 'Lighten';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  }
  else {
    e.target.setAttribute('class', 'dark');
    e.target.textContent = 'Darken';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  }
}

chrisdavidmills · May 20, 2019, 10:42am

@Tom-Vanderboom hi there!

I’ve had a look at your code, and it works just like we want it to. I don’t really have any specific comments on how you could improve!

Tom-Vanderboom · May 20, 2019, 2:19pm

thank you for your reply.

hollydavis541 · May 22, 2019, 4:14am

Thanks for your response!

johnpetersright · June 13, 2019, 10:09am

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.

740479865 · July 11, 2019, 7:16am

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

papans.maxkeeble · July 17, 2019, 6:06pm

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

chrisdavidmills · July 17, 2019, 7:13pm

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.

chrisdavidmills · July 17, 2019, 7:17pm

Hello there @papans.maxkeeble!

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

Emmanuel_A_Valdez · August 1, 2019, 7:48pm

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

chrisdavidmills · August 2, 2019, 5:45am

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.

Emmanuel_A_Valdez · August 2, 2019, 4:23pm

Thanks for the assessment and tip. Noted.

samuel · August 19, 2019, 2:53pm

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.

chrisdavidmills · August 20, 2019, 8:06am

Hi @samuel,

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

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!

samuel · August 20, 2019, 5:49pm

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

Isaac-Svi · December 2, 2019, 4:40pm

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!

chrisdavidmills · December 3, 2019, 11:26am

@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

Well done on some great work!