"Image gallery" assessment

MDN Learn
#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)";
   }
}
#75

Hi @shurawi!

Iā€™ve tested your code and it works perfectly. Well done!

#76

Hi @chrisdavidmills, thank you so much for your assessment!