"Image gallery" assessment


(Steve Davis) #1

Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please.

Thanks
Steve


"Mozilla splash page" assessment
"Mozilla splash page" assessment
Learning web development: Marking guides and questions
(Chris Mills) #2

Hi there! I have been working my way through the JavaScript course over the last few weeks I started from the very beginning and have just about finished the first part. I have just finished the image gallery assessment that contains a css, js and html files and I want someone to take a look over my work and let me know how I’ve done. Can you tell me what I need to do please.

Hi Steve,

Nice work! You can find the finished image gallery example here (go through and see if your code matches up):

The directory also contains the marking guide for this assessment, which tells you exactly what you need to do to score full marks:

Don’t hesitate to ask if you have more questions.


(Steve Davis) #3

Hi Chris firstly thanks for your reply.

I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade…

However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* *


Learning web development: Marking guides and questions
(Chris Mills) #4

I was hoping not to self mark really this would help me get a proper unbiased assessment grade. I’m sure you understand when your working on your own as I have been it’s easy to con yourself that your work meets the grade…

I agree with you. However, unfortunately we haven’t got the resources to manually assess everyone’s entries. I wish we did.

However I have to say on this occasion I feel as though I’m pretty close the only real difference is that I have used an array to hold all the photo path values. But to me this is better than making up the path in the loop because you don’t have to change the code to change the photo - just substitute or add to the array, I have set the loop using the array.length property anyway. I think the rest is the same looking at what is required in the marking guide. What do you think.* *

Yeah, cool, that all sounds fine. I agree that the array is a better way of doing this. In a real app, you’d probably retrieve the photos and info via some kind of JSON structure via an XHR call, or similar.


(Juan de Souza) #5

Hi everyone! I’m stuck in the Image Gallery assessment. Can anyone show me the code? It’s really annoying that they do not show the code on the page!


(Chris Mills) #6

You can find the finished code here:


(Paul Harris) #7

I have a question about the adding an onclick handler in https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery section

https://pastebin.mozilla.org/9069371 this is what I have so far

I’m confused as to how I get the “src” without using newImage as the event object won’t contain the information either if i set the event object to bbb it’s still the same thing as using newImage


(adilson) #8

@Paul_Harris Unfortunately your code is no longer available, so I can’t see what you had made. In the guidelines, think Chris gave us a hint with “event” and “target” and suggested us to use Event objects as is explained in the course, or at least that’s what I used (haven’t checked the solved code).


(adilson) #9

And this is my JS code and live preview . Only points to highlight in my code comparing to the solved one by chris are:

  1. I used addEventListener instead of using the event handler as property. Being able to remove the listeners was what made me decide for it (even if it didn’t matter at this early stage :sweat_smile:).
  2. Because of the previous point, I didn’t code the displayImage function specified in the guidelines. It was going to be only one line in there, and I was already using event function handlers. Too many functions for something that simple. But, I was able to see that setting up displayImage allow us to used it in a wide different set of events in case we want to improve our gallery; i.e. dragging a file to the page, display such picture and show another thumbnail at the bottom.

I loved this assessment! it was challenging. I’m going to read again the “Introduction to events” section as well as the external links in there. I felt like it was a stepped curve of learning.


(Patty518) #10

Hello!

my code is the following:

for( i=1; i<=5; i++) {
var newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, ‘images/pic’ + i + ‘.jpg’);

function whatever(e) {
displayedImage.setAttribute(‘src’, e.target.getAttribute(‘src’));
}

newImage.addEventListener(‘click’, whatever);
thumbBar.appendChild(newImage);
}

It seems to be working. My questions are the following:

  1. is there a preference for having the function ‘whatever’ inside the for loop or outside the for loop? mine is within the loop, but the solution code places it outside. Just want to know if there are any cases, and if so, what they are, in which one would be preferable.

  2. does the placement for the line ‘thumbBar.appendChild(newImage);’ matter, or can it be placed anywhere inside the for loop?

  3. I see that in the solution code, the function displayImage(imgSrc) is called before the function is defined, but I was under the impression that the code would crash if a function is called before it’s defined. can you please clarify the order of function calling and definition?

And finally, just want to say that i found this assessment to be challenging and fun!


(Chris Mills) #11

Hi there Patty,

Thanks for sharing your solution. I had a bit of a play, and ended up with this:

/* Looping through images */

function displayImage(e) {
  displayedImage.setAttribute('src', e.target.getAttribute('src'));
}

for(var i = 1; i <= 5; i++) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.addEventListener('click', displayImage);
}

I think that if anything this is a better solution than our final example, although obviously I’ve got the function outside the solution. But you’ve improved on it by adding an event listener, rather than using an onclick handler function. Again, removing a function from the loop.

It is generally considered bad practice to include a function inside a loop, as it can cause problems in some circumstances. It is better to define the function outside the loop and reference it from inside.

I am going to update our example when I get the time to use something more like this. I’ve made a note of it. Thanks again for jogging me on this!

To answer your questions:

  1. See above.
  2. There is flexibility here, but it does need to be placed after you have defined newImage, otherwise you’ll get an undefined error.
  3. the answer here is “it depends” — this stack overflow post provides useful reading on bthe matter: https://stackoverflow.com/questions/9973461/does-a-javascript-function-have-to-be-defined-before-calling-it